Skip to content

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

 
 

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 框架的模板,这个原生模板需要更多的配置升级,才能达到它们那种尽善尽美的状态。

Releases

No releases published

Packages

No packages published

Languages

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