我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123… 。

0.前言

看到这次征文活动，发现自己用过 Taro 开发小程序，刚好符合这次征文的标准，于是决定把自己的经验分享出来，供大家交流学习。

1.框架

• React 作为前端的框架，React应该不需要我多介绍了， 正如官方文档所说：“React 是一个用于构建用户界面的 JavaScript 库。”
• Taro 官方文档提到，“Taro 是一个开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发 微信 / 京东 / 百度 / 支付宝 / 字节跳动 / QQ / 飞书 小程序 / H5 / RN 等应用。” 刚了解 Taro 的时候，看到这里我就觉得这个框架很厉害，因为它支持的平台实在是太多了，但是我的项目目前只用它来做了微信小程序。
• Taro UI UI 库的话我使用了Taro UI，基本上，我需要的组件这里都有。只不过，有的时候会遇到想要手动修改样式的时候，就只能去看对应的组件在浏览器里面的类名是什么，然后手动去修改对应类的样式。

2.使用

用 Taro 新建一个项目的过程如下，在控制台输入：

1. npm install -g @tarojs/cli 这一步是全局安装@tarojs/cli。

2. taro init appName 这一步就是新建项目，项目名字叫什么可以根据需要起，这里我的例子叫做appName。 输入这个指令后，控制台内会需要你去选择一些东西，比如是否使用ts，选择什么模板，这个就完全看你自己了。 这一步几乎和使用 VueCli 创建项目感觉是差不多的，都是需要在控制台配置一些东西。

3. cd appName 这一步是进入你刚才新建的项目目录。

4. npm i 这一步就是安装node_module了，安装项目需要的库。

到了这一步，基本上，你的项目就初始化完成了，可以去编写代码了。因为我用的是 React，所以编写的就是React 代码。

在编写代码的过程中，因为是在小程序开发者工具内开发的，所以可以在小程序开发者工具内的终端输入：yarn dev:weapp，这差不多就是平常前端项目里的yarn dev。输入这个指令之后，Taro 会监听文件的修改，实时地在小程序工具内显示出来。

如果不需要一直监听文件，只需要打包一次，那么可以输入yarn build:weapp。

我看了一下，如果需要发布在其他平台的话，这一步的指令是不一样的。

比如，需要生成百度小程序的指令是：yarn dev:swan、yarn build:swan 需要生成支付宝小程序的指令是：yarn dev:alipay、yarn build:alipay

然后就是小程序开发的流程了，比如扫描二维码，发布二维码、当功能开发完毕之后申请项目的上线等等。

最后感叹一句，Taro这样开发一次，却支持多个平台的功能，真的很方便！