目录
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 功能,开启可能报错
- 需要设置关闭上传代码时样式自动补全,开启可能报错
- 需要设置关闭代码压缩上传,开启可能报错
如有帮助,记得点赞三连,谢谢~