变更日志

写在前面：

本项目不适配多终端，只是为了开发微信小程序而构建的模板项目。

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

背景

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

技术选型框架UI库风格方案状态管理

.x(,)

@/

-

或Taro或uni-app

毫无疑问，对于我们这些没有跨端需求的人来说，原生编写一定是性能和扩展性最好的解决方案。 uni-app也是大多数人首选的小程序开发框架。与Taro相比，它有更大的用户群体，更丰富的生态系统，以及我没有测试但收到社区反馈的更好的性能。不过考虑到我们已经有使用Taro开发的小程序项目，没有明显的性能缺点，而且只有Taro支持这种写法。另外，主管不愿意引入新的前端框架来增加学习成本。所以我们还是选择使用Taro来构建项目模板。

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

UI组件库

在以往支付宝小程序的开发经验中，我发现@/组件库对Taro()的支持比较好，组件丰富度比官方推荐的几个组件库都要好，而且维护团队答疑解惑，解决Bug及时的方式。 。因此，我们在后续的小程序开发中选择使用该组件库作为小程序模板工程的组件库。

模板代码也参考/pure--进行修改。 H5或者其他小程序的适配可以参考这个项目。

风格方案

我们的PC端项目已经得到了广泛的应用。我深刻体会到原子化CSS带来的开发乐趣，果断选择继续引入。官方已经给出了引入方案：使用CSS |太郎文档。介绍-并根据需要配置它来体验它。

状态管理

项目有许多不同的状态管理工具。 Taro 的官方文档指出，我个人觉得它太重、太繁琐，所以我果断改用了一个受到社区好评的，并且我已经在项目中使用过它。易于配置和引入，也可在外部使用，方便扩展。参考老大的Taro-项目建设|学习笔记成功引入，通过Taro的API可以实现持久化功能。

多终端兼容

目前仅支持微信和支付宝小程序。

CSS 样式兼容

微信和支付宝小程序的风格不直接兼容，需要单位转换。

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

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

效果微信小程序

支付宝小程序

代码库

总体框架代码可以在/taro--：微信/支付宝小程序模板代码中查看。欢迎各位JY点点明星✨并提公关！