小程序Taro跨端框架实战总结

1 背景

1.1 项目

项目需开发移动端，需支持以图表、表格等形式展示数据，对素材进行审核审批等功能。并需支持微信、企微小程序、h5等平台使用。

2 技术选型

2.1 基础框架选择

从落地场景分析，我们需要具备，微信小程序，企微小程序，h5等平台的支持。如果采用小程序/h5等单平台框架开发，在开发效率与人力占用上的成本显然会与需要支持的平台数量成正比。同时小程序在原生开发上也无法使用工程化带来的部分提效功能，所以在选型上会优先考虑跨平台的工程化开发框架。在技术选型过程中，预研了以下几种跨平台方案。

• Taro ：一个基于 React 技术栈的跨平台小程序框架，支持使用 React/Vue/Nerv 等框架来开发 微信/企微/京东/百度/支付宝/字节跳动/QQ/飞书小程序 //H5// RN 等应用。

• uni-app ：一个使用 Vue.js 技术栈的跨平台小程序框架，目前支持iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

• mpvue ：由Meituan-Dianping团队开发，基于vue.js设计的跨端框架。目前支持微信小程序 、 百度智能小程序， 头条小程序 和 支付宝小程序。

  综合下来，Taro的跨技术栈、平台支持和比较完善的生态会更适合我们当前需要落地的应用。具体的入门教程等可看官方文档，这里不详细讲解。

2.2 项目规范

2.2.1 样式规范

• tailwind css ，移动端上，ui要求往往比较严格，乃至到1px的偏差，而tailwind可以更灵活的满足自定义样式，同时降低样式开发管理的成本。

• sass ：因为后续使用到的组件库是基于sass来开发样式，所以项目中也使用sass css预处理器。对于公用组件样式，需要使用css modules模式来避免样式冲突。

2.2.2 状态管理

• 全局状态管理：市面上的状态管理库数不胜数，像redux, mobx, recoil等依赖库群魔乱舞，在此就不具体展开，有兴趣的可以看看这个视频 学习下，在项目中最终确定使用较轻量级、学习和使用成本也非常低的jotai 。

• 数据获取状态管理：对比了swr 与react-query 。相较于swr，react-query功能比较丰富，包括请求缓存、生命周期管理、请求取消、错误处理等，比较适用于复杂的应用场景，而swr则比较轻量级，API 设计简单易用，学成本相对较低，适合快速开发。鉴于小程序的场景交互较为简单，同时对于体积严格要求，最终选择轻量易用的swr。

2.2.3 开发流程规范

• 格式化commit：通过 commitizen来规范commit规范

 sudo npm install -g commitizen
 // commitizen 的首选适配器，提供commit的提交标准配置
 sudo npm install -g cz-conventional-changelog
 echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

• husky：提供githook，如在commit之前会触发pre-commit，只要编写对应的校验逻辑即可完成commit的规范检查。

• lint-staged：通过执行lint-staged，能更高效的过滤出需要进行规范校验的文件

npm install lint-staged 

//在package.json添加如下配置，表示会过滤出所有ts，tsx后缀的文件，然后对文件执行eslint --fix