小程序开发之Taro环境搭建

目录

1.node环境安装

2.CLI 工具安装

3.项目初始化

4.编译运行

5.微信小程序编译打包命令：

6.小程序开发者工具预览、上传

---

1.node环境安装

Taro 项目基于 node，请确保已具备较新的 node 环境（>=12.0.0），下载地址：http://nodejs.cn/download/，根据自身使用系统去下载对应版本，一般下载最新版本即可，安装完成使用node -v 查看安装的版本是否符合，windows系统还需设置全局变量(此处不再赘述)。

node -v

2.CLI 工具安装

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli

安装完成查看 Taro 全部版本信息：

npm info @tarojs/cli

3.项目初始化

使用命令创建模板项目：

taro init myApp

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖。一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装：

# 进入项目根目录
$ cd myApp

# 使用 yarn 安装依赖
$ yarn

# OR 使用 cnpm 安装依赖
$ cnpm install

# OR 使用 npm 安装依赖
$ npm install

4.编译运行

使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。

Taro 编译分为 dev 和 build 模式：

• dev 模式（增加 --watch 参数） 将会监听文件修改。
• build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。
• dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。

项目中config配置文件中，默认包含dev与prod环境，代码中可以通过

process.env.NODE_ENV === 'development'或process.env.NODE_ENV === 'production'来区分不同环境，比如用于区分不同环境下的BaseUrl，同时可以在dev.js或prod.js中做不同的逻辑处理。

5.微信小程序编译打包命令：

在package.json中的scripts中添加如下命令：

打dev环境下的build包：

"build:weapp-dev": "taro build --type weapp --env development"

# yarn
# 打包dev环境，未压缩，文件较大，自带watch监听文件改变
yarn dev:weapp

# 打包build模式，生成的dist文件为已压缩状态
yarn build:weapp

# 打包build模式下的dev环境的dist文件，已压缩
yarn build:weapp-dev

# npm script同理
npm run dev:weapp

npm run build:weapp

npm run build:weapp-dev

6.小程序开发者工具预览、上传

下载并打开微信开发者工具，然后选择项目根目录进行预览。

需要注意开发者工具的项目设置：

• 需要设置关闭 ES6 转 ES5 功能，开启可能报错
• 需要设置关闭上传代码时样式自动补全，开启可能报错
• 需要设置关闭代码压缩上传，开启可能报错

如有帮助，记得点赞三连，谢谢~