[Taro] Build Taro project to WeChat Mini Program

Taro Getting Started - WeChat Mini Program

Taro is an open cross-terminal and cross-framework solution that supports the use of React/Vue/Nerv and other frameworks to develop applications such as WeChat/JD/Baidu/Alipay/ByteDance/QQ applet/H5.

WeChat Mini Program is a new open capability, and developers can quickly develop a Mini Program. Mini programs can be easily acquired and disseminated in WeChat, and have an excellent user experience.

Prerequisites

Taro depends on the Node.js environment, so you must download and install the Node.js environment on your machine from the following:

• Node.js - https://nodejs.org/en/

  Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.

  For more information about installing and using Node.js, see the Node.js - https://nodejs.org/en/

• (Recommend)GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - https://github.com/nvm-sh/nvm

  nvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-compliant shell (sh, dash, ksh, zsh, bash), in particular on these platforms: unix, macOS, and windows WSL.

• (Recommend)GitHub - asdf-vm/asdf-nodejs: Node.js plugin for asdf version manager - https://github.com/asdf-vm/asdf-nodejs

  asdf-nodejs is a Node.js plugin for asdf version manager.

• The Missing Package Manager for macOS (or Linux) - https://formulae.brew.sh/formula/node

  Homebrew installs the stuff you need that Apple (or your Linux system) didn’t.

WeChat Mini Program need a development and debugging tools, so you need download and install WeChat Developer Tools from the following:

• WeChat Developer Tools - https://developers.weixin.qq.com/miniprogram/en/dev/devtools/download.html

  WeChat Developer Tools is a web debugging tools to help developers develop and debug Weixin Mini Programs more simply and efficiently based on the original Official Account.

Installation

$ npm i @tarojs/cli

(Optinal) Upgrade Taro

$ taro update self

Taro Init

Run taro init [project name] to create a new project.

$ taro init col-taro-example
👽 Taro v3.2.4

Taro 即将创建一个新项目!
Need help? Go and open issue: https://tls.jd.com/taro-issue-helper

? 请输入项目介绍！ Rational Investment
? 请选择框架 React
? 是否需要使用 TypeScript ？ Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Sass
? 请选择模板源 Github（最新）
✔ 拉取远程模板仓库成功！
? 请选择模板 taro-ui（使用 taro-ui 的模板）
...

创建项目 col-taro-example 成功！
请进入项目目录 col-taro-example 开始工作吧！😝

Check Taro information.

$ taro
👽 Taro v3.2.4

$ cd col-taro-example

$ tree -L 1
.
├── babel.config.js
├── config
├── node_modules
├── package-lock.json
├── package.json
├── project.config.json
├── project.tt.json
└── src

3 directories, 5 files

$ taro info
👽 Taro v3.2.4


  Taro CLI 3.2.4 environment info:
    System:
      OS: macOS 11.2.3
      Shell: 5.8 - /bin/zsh
    Binaries:
      Node: 14.8.0 - ~/.asdf/installs/nodejs/14.8.0/bin/node
      npm: 6.14.7 - ~/.asdf/installs/nodejs/14.8.0/bin/npm
    npmPackages:
      @tarojs/cli: 3.2.4 => 3.2.4
      @tarojs/components: 3.2.4 => 3.2.4
      @tarojs/mini-runner: 3.2.4 => 3.2.4
      @tarojs/react: 3.2.4 => 3.2.4
      @tarojs/runtime: 3.2.4 => 3.2.4
      @tarojs/taro: 3.2.4 => 3.2.4
      @tarojs/webpack-runner: 3.2.4 => 3.2.4
      babel-preset-taro: 3.2.4 => 3.2.4
      eslint-config-taro: 3.2.4 => 3.2.4
      react: ^17.0.0 => 17.0.2
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.10
    npmGlobalPackages:
      typescript: 4.1.3

WeChat Mini Program

Use the following commands to compile Taro project to WeChat Mini Program.

# yarn
$ yarn dev:weapp
$ yarn build:weapp

# npm script
$ npm run dev:weapp
$ npm run build:weapp

# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp

# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type weapp --watch # Windows
$ NODE_ENV=production taro build --type weapp --watch # Mac

Mini Program Developer Tools

Download and open the WeChat Developer Tools - https://developers.weixin.qq.com/miniprogram/en/dev/devtools/download.html, and then select col-taro-example/dist directory as the project root directory to preview.

Need to pay attention to the project settings of the developer tools:

• You need to set to turn off the ES6 to ES5 function, and it may report an error if it is turned on

• You need to set to turn off the automatic completion of the style when uploading the code, and an error may be reported

• You need to set the code compression upload to be disabled, and an error may be reported when it is enabled

References

[1] 安装及使用 | Taro 文档 - https://taro-docs.jd.com/taro/docs/GETTING-STARTED

[2] Taro | 多端统一开发解决方案 - https://taro.jd.com/

[3] GitHub - NervJS/taro: 开放式跨端跨框架解决方案，支持使用 React/Vue/Nerv 等框架来开发微信/京东/百度/支付宝/字节跳动/ QQ 小程序/H5/React Native 等应用。 https://taro.zone/ - https://github.com/nervjs/taro

[4] WeChat Developer Tools - https://developers.weixin.qq.com/miniprogram/en/dev/devtools/download.html

[5] 微信小程序 - https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN