taro3.x + tailwindcss + zustand 小程序开发

高项不过不改名
1,598 阅读4分钟

代码仓库

大致框架代码可以查看 HyaCiovo/taro-miniapp-template: 微信/支付宝小程序模板代码。欢迎各位 JY 点点 star✨ 、提提 pr💫！

更新日志

  • 2024/11/11 ： 兼容支持支付宝小程序；

  • 2024/11/12 ： 集成友盟+埋点统计SDK、小程序更新管理；

  • 2024/11/14 ： 在feature/frame-preact分支尝试使用preact减小打包体积；

  • 2025/3/19 ： 生产项目踩坑，更新antmjs/vantui到最新^3.6.2版本解决部分组件无法滚动页面的问题。

写在前面

本项目没有适配多端，只是为了微信小程序开发搭建的模板项目。

对其他小程序的适配可以自行比较官方示例仓库添加依赖和代码，除了H5以外的适配都比较简单。

踩坑记录

  • @antmjs/vantui的Swiper组件在只有两个Item时，手动拖拽的动画交互很奇怪，看了源代码感觉如果要修复需要整个重构。建议优先使用Taro框架自带的轮播图组件。

背景

近期有微信小程序开发需求，主管让我们进行技术选型、编写开发指引和规范文档。这里记录一下我们的技术选型过程，并分享一个空的只包含主要依赖工具的模板项目供开发朋友们参考。

技术选型

框架UI库样式方案状态管理
Taro3.x(React18、Webpack5)@antmjs/vantuiweapp-tailwindcsszustand

原生 or Taro or uni-app

毫无疑问，对于没有跨端需求的我们，写原生必然是性能和可扩展性最好的方案。uni-app也是大多数人首选的小程序开发框架，对比Taro，其拥有更大的用户群体、更丰富的生态，还有我没测试过但是社区反馈的更好的性能。但是鉴于我们已经存在使用Taro开发的小程序项目，其没有出现明显的性能短板，且只有Taro支持React写法，另外主管倾向于不引入新的前端框架增加学习成本。所以我们还是选择了使用Taro搭建项目模板。

Taro官方团队已经推出Taro 4.x，支持了vite编译、开发鸿蒙应用等功能。不过鉴于我们对vite编译带来的性能优化（个人感觉很奇怪，当前小程序都是全量编译后才能在开发者工具上运行的，vite的异步加载js的性能优势该怎么体现出来呢？）和鸿蒙等功能没有硬需求，且Taro团队仍会继续就框架的问题修复和性能优化支持维护一段时间，所以还是倾向于选择相对稳定的3.x版本。

UI组件库

在以往的支付宝小程序开发经历中，发现了该@antmjs/vantui组件库对于Taro（React）的支持较好、组件丰富度也比官方推荐的几个组件库优秀，且维护团队回答问题、解决bug很及时。所以在后续的小程序开发中选择采用该组件库作为小程序模板项目的组件库。

image.png

模板代码也是参考AntmJS/pure-project-vantui修改而来，对于H5或其他小程序的适配可以参考该工程。

image.png

样式方案

我们PC端项目已经很普遍地在使用tailwindcss，原子化CSS带来的开发爽感本人深有体会，果断选择继续引入tailwindcss，官方已经给出了引入方案：使用 Tailwind CSS | Taro 文档。引入weapp-tailwindcss，并按要求配置即可体验。

image.png

状态管理

React项目的状态管理工具五花八门。Taro官方文档介绍的是Redux，个人感觉Redux太重、太繁琐，果断转向选择了广受社区好评的zustand，自己也在项目中使用过，配置方便、引入简单，也可以在React之外使用，方便扩展。参考welives大佬的Taro-React工程搭建 | 学习笔记成功引入了zustand，并扩展了可以通过Taro的API实现持久化的功能。

image.png

多端兼容

目前只支持微信、支付宝小程序。

CSS样式兼容

微信和支付宝小程序的样式无法直接兼容，需要通过postcss进行单位转换。

安装postcss-rem-to-responsive-pixel插件后，通过在postcss.config.js文件中添加以下代码便可以实现基本的样式兼容。

plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-rem-to-responsive-pixel': {
      rootValue: 32, // 1rem = 32rpx
      propList: ['*'], // 默认所有属性都转化
      transformUnit: process.env.TARO_ENV === 'h5' ? 'px' : 'rpx', // 转化的单位,可以变成 px / rpx
    },
  }

效果

微信小程序

支付宝小程序

预期

TailwindCSS v4

最近TailwindCSS v4已经发布了，icebreaker 大佬也是跟进发布了最新版本的 weapp-tailwindcss，所以我计划等 4.0 版本的weapp-tailwindcss稳定后，跟进到模板项目中。

Taro 4.x

Taro 4.x也已经发布了很久了，虽然我们团队暂时还没有考虑跟进，不过可以在自己的demo上尝试一下，应该会有不小的性能提升吧😂，不过还是期待支持Rsbuild构建，性能提升的同时，迁移成本更小。

avatar
文章
阅读
粉丝