taro框架开发小程序经验总结

最近这一年来，做了三个小程序。第一个小程序用的原生框架，所有的样式和js都要自己写，不好看还写得头疼死。写第二个小程序的时候正觉得VUE3流行，想熟悉一下VUE3，因此找到了taro框架。这个框架好不好我也无从分辨，暂时能用就行。

一.搭建项目

1.taro 客户端安装，想用taro开发小程序这个必须要先安装

npm install -g @tarojs/cli

此处参考官方文档：安装及使用 | Taro 文档

2.创建项目

taro init myApp

我的选择如下：

3.项目会自动安装依赖包，然后用微信开发者工具导入这个新创建的项目

4.引入Taro UI Vue3

在项目根目录下输入命令：npm install taro-ui-vue3

参考：快速上手 | Taro UI Vue3 | b2nil

5.总结：以上就是搭建taro项目的全部过程了，接下来就可以参考taro ui vue3以及taro API进行开发了。通过这次摸索有及网上查阅资料，我意识到查阅官方API是非常有用的，有很多资料都是对官方API 的二次解读。

在开发过程中，我觉得对我帮助最大的是介绍里面提供的实例：介绍 | Taro UI Vue3 | b2nil

6.因为在网上vue2的资料相对更多，而 vue3加入了一些语法的新特性，因为我本身对vue2也不是很了解，在写js的时候不确定怎么写，这个示例让我确定了页面语法和代码风格，以及各种组件的引入。每当我遇到组件样式不生效时，就去这个示例项目里找，总是能找到答案，虽然这个示例项目并没能运行成功，看不到效果，但并不妨碍借鉴。

二.项目发布

遇到的坑：在继续做第二个taro小程序的时候，因为我没搞清楚taro运行机制，按照官方文档重新执行了一下npm install -g @tarojs/cli，这是安装taro客户端命令，会默认安装新新版。这下就坏事了，因为之前的项目是用的taro3.4.1，现在默认安装了最新版3.4.7，这个错误不仅使新创建的taro项目无法运行，一直报错，还导致原来运行正常的taro小程序无法正确运行。

仅管我重试了各种卸载，安装taro客户端，试图把它退回到3.4.1，也参照网上提供的各种命令，逐一尝试之后 ，依然没有使taro小程序正常运行。

这段时间正逢上海疫情，居家办公，一直是远程公司电脑办写代码。没有办法之下，我只好把项目下载到自己的笔记本，重新搭了一套开发环境。项目从git上拉下来之后能够运行成功。但是有一个新的问题，真机调试或预览或者发布体验版时，提示项目包超过2M，这在原来公司电脑上是没有遇到的，我也不知道为什么会发生这样的变化。

但是至少至此为止，项目能够正常运行了，要解决的只剩下项目包过大的问题。因此我对项目进行了分包。我觉得我的分包做得不是太严谨，不过有一点效果。主包小了一点，但是还是超过2M。下图是分包之后的项目包大小，比分包之前小了200M左右。

这时候我已经黔驴技穷了，只好把实际情况和同事说一下，一起想办法。他搭好环境，问我为什么登录那个页面那么大，我去文件夹里看了一下，不大呀，都是差不多4KB。我不明白他为什么说login.vue很大。

然后我就点了一下代码依赖分析。看到了他为什么说login.vue很大，确实login这个页面就有934KB。

由于他给我提供了这个思路，我就在网上找taro项目包过大怎么解决，找到了一条靠谱的命令。参考资料在这里：小程序包大小超过2M的解决方法 - 百度文库

我按照文档所说的步骤，最终解决了项目包过大的问题。

最后，我在项目的README.md里总结了一下拉取项目后需要执行的步骤，以及项目发布遇到包过大问题时应该执行什么命令。

三.支付

调起别人写的接口往往是比较容易的，只要规则正确，参数正确，结果就会正确。以前说起小程序支付，我就只知道前端的wx.requestPayment，当然在taro中，语法变成了Taro.requestPayment。

以前我是调用别人写的接口返回的参数来拉起微信支付，这次不一样，后台调用微信预支付交易单和生成签名的方法都要自己写。还是前面那位同事，他在之前帮我捋清了微信支付的思路，先调用统一下单在微信支付服务后台生成预支付交易单。然后自己写一个方法封装Taro.requestPayment所需要的参数。

具体的对接微信支付流程及前后端代码参考我写的另一文章：小程序支付流程总结_Latitia Gu的博客-CSDN博客_小程序支付流程

就算框架不一样，导致语法上有差别，整体逻辑和思路是一样的。

虽然思路正确，但在调通支付接口的过程依然会遇到各种各样的问题，我在网上找到一篇章很好的阐述了遇到问题怎么排查：签名错误讨论区-V2版 - 知乎