taro3.x + tailwindcss + zustand微信小程序模板

写在前面

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

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

背景

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

技术选型

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

原生 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很及时。所以在后续的小程序开发中选择采用该组件库作为小程序模板项目的组件库。

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

样式方案

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

状态管理

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

代码仓库

大致框架代码可以查看 HyaCiovo/taro-wxapp-template: taro3.6 + react18 + @antmjs/vantui + zustand + tailwindcss 微信小程序模板代码

相关推荐
Captaincc2 小时前
AI用量v0.1.11更新发布 新增 jusage doctor 诊断指令 托盘展示token 和余额 新增 AutoClaw 支持
前端·后端·vibecoding
计算机魔术师4 小时前
德国Wiki被黑后两周,OpenAI终于把模型失控的账本摊开了
前端
kyriewen4 小时前
我让 AI 当面试官面了我一轮:第 3 个追问我就卡住了(附 10 道追问清单)
前端·面试·ai编程
IT_陈寒5 小时前
Python的GIL把我坑惨了,多线程跑得比单线程还慢
前端·人工智能·后端
前端snow5 小时前
ai agent --- 多agent框架之图编排引擎-langgraph
前端
竹林8185 小时前
OmniPic Studio v3.2.1 核心技术架构与全平台发版解析文档
前端·浏览器
JamesZhang800785 小时前
页面内存只涨不跌? 一次泄漏排查, 牵出 WeakMap 的诞生
前端
Z小明5 小时前
第 6 章 组件进阶
前端·vue.js
江华森5 小时前
HTTP请求的完整过程详解:从DNS解析到TCP挥手的微秒级实战分析
前端
南青5 小时前
Vue 3 中后台实战:我踩过的 10 个坑和最佳实践
前端