小程序开发之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

npm info @tarojs/cli screenshot

3.项目初始化

使用命令创建模板项目:

taro init myApp

taro init myApp command screenshot在创建完项目之后,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 功能,开启可能报错
  • 需要设置关闭上传代码时样式自动补全,开启可能报错
  • 需要设置关闭代码压缩上传,开启可能报错

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

猜你喜欢

转载自blog.csdn.net/qq_33539839/article/details/119299129