Skip to content

icebreaker-template/weapp-native-mina-tailwindcss-template

This branch is 41 commits ahead of listenzz/MyMina:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

18fc41e · Jun 16, 2024

History

68 Commits
Apr 9, 2023
Dec 11, 2023
Jun 3, 2019
Jun 3, 2019
Apr 6, 2023
Aug 22, 2023
Aug 8, 2021
May 24, 2024
Feb 25, 2023
Jun 4, 2019
Jun 16, 2024
Nov 27, 2023
Apr 6, 2023
Jun 20, 2023
Aug 22, 2023
Jun 16, 2024
Apr 6, 2023
Nov 27, 2023
Jun 16, 2024

Repository files navigation

weapp-tailwindcss 原生小程序模板

假如你觉得好用,欢迎给我的 weapp-tailwindcss 点个 Star 吧。

官方文档

https://weapp-tw.icebreaker.top/

修改 ts 代码后热更新不生效?

记得关闭微信开发者工具中,启动代码自动热重载功能 这个功能。

组件样式隔离

由于目前,原生微信小程序组件样式隔离,默认为启用。而 tailwindcss 自动生成的原子类样式是在 app.wxss 里的。

所以组件内想要应用上 tailwindcss 的样式,需要在组件内对应的 .json 文件添加:

{
  "styleIsolation": "apply-shared"
}

详见 组件样式隔离

Cli快速启动

本项目已经集成 weapp-ide-cli 可以通过 cliide 进行额外操作,详细信息

安装第三方 UI 库

yarn add tdesign-miniprogram

然后在 plugin -> MinaWebpackPlugin.js 里的 inflateEntries 方法里,发现 tdesign-miniprogram 时,直接 return

yarn start

安装完之后,需要在微信开发者工具中对 npm 进行构建:工具 - 构建 npm

另外,像 tdesign-miniprogram 它是允许传入外部样式类的,此时可以对 UnifiedWebpackPluginV5 插件的 customAttributes 进行配置,这样 t-class 这种才能准确转义。详见 webpack.config.js

此项目和 listenzz/MyMina 的不同点

  • 摒弃了 node-sass,改用了 dart-sass
  • 摒弃了 moment,改用了 dayjs
  • 添加了 postcss8tailwindcss 支持

打包原理见原版 listenzz/MyMina

感谢优秀的作者 listenzz 贡献了优秀的思路和实现!

最后有些话想说

由于笔者精力有限,还是推荐大家使用 uni-app 或者是 taro 框架的模板,这个原生模板需要更多的配置升级,才能达到它们那种尽善尽美的状态。

About

小程序工程化实践

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 55.8%
  • TypeScript 26.8%
  • SCSS 17.4%