Taro教程之相亲类微信小程序开发实战-01开发环境搭建

目前微信小程序的开发者大概有几百万的样子（老夫没有数过），在这几百万当中，有的是使用原生小程序语法开发的，有的是使用第三方的转编译框架进行开发的，比如 mpvue(某团)，taro(某东)，其它的一些不知名的框架就不列举了，据说某滴也开源了一款感兴趣的童鞋可以去了解一下。

上面说的都不是重点，重点是老夫一直是使用原生小程序语法进行开发。所以写这篇教程的时候，不知道是谁给老夫的勇气，大概是梁静茹吧！希望能支撑老夫将整个开发的过程完美呈现给各位童鞋面前。

为什么选择Taro？

因为老夫第一次接触的MVVM框架就是 React.js ，所以有一种莫名的亲切感，这只是其中一原因。

另一个原因是老夫看中 Taro 的多终端处理能力，请看以下官方介绍。

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。

使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。

不管官方吹嘘的有多牛逼，是骡子是马拉出来遛一遛！

01 项目结构

微信小程序的开发其实就是典型的前后端分离的具体表现，现在前端已经选择了 React.js (Taro)，那么后端我们采用 PHP 提供 API接口。

这里API接口我们采用 Phalapi 提供接口数据服务，其实老夫更擅长的是 YII2 。
一般的小程序采用上述的项目结构基本上已经能够满足了，当然一些大数据量、有高并发场景的小程序，后端服务是相当复杂的，这里就不说了。

02 开发工具

工欲善其事必先利其器！这里老夫使用 vscode 进行小程序的开发，使用 phpstorm 进行 php 的开发。

03 环境搭建

首先是 Taro 的环境的搭建，现在前端的很多项目都是基于 node.js 的 npm 进行包管理的，所以前提是安装 node.js，并且运行 npm 命令没有问题，由于一些众所周知的原因，一些开发包下载很慢，老夫一般使用 cnpm 进行包的安装，不懂的自行百度！

安装及使用

安装 Taro 开发工具 @tarojs/cli
使用 npm 或者 yarn 全局安装，或者直接使用npx

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

使用

使用命令创建模板项目

$ taro init myApp

微信小程序

选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包（去掉 --watch 将不会监听文件修改，并会对代码进行压缩打包）

# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

项目实际代码如下：

微信公众号:老夫撸代码

通过 taro 命令创建好项目后，用 vscode 打开项目 Miai, vscode的终端下面运行命令 npm run dev:weapp

微信公众号:老夫撸代码

当项目跑起来后，通过微信的开发工具打开 Miai，就能看到小程序跑起来了。

微信公众号:老夫撸代码

搜索微信公众号：老夫撸代码 回复数字 1001 获取完整教程以及代码仓库地址

关注微信公众号：老夫撸代码

老夫撸代码