Taro recommended in this issue is an open cross-end cross-framework solution that supports the use of frameworks such as React/Vue/Nerv to develop applications such as wechat/Jingdong/Baidu/Alipay/Bytedance/QQ/Feishu applet/H5 / RN.

project context

Nowadays, the market has a variety of forms, and various terminals such as Web, React Native, and wechat mini programs are popular. When business requirements are required to perform at different ends at the same time, the cost of writing multiple sets of code for different ends is obviously very high, and the ability to write only one set of code can be adapted to multiple ends is extremely needed.

Installation and use

The Taro project is based on node. Please make sure that you have a newer node environment (>=12.0.0). It is recommended to use the node version management tool nvm to manage node, so that you can easily switch node versions and do not need to add sudo during global installation.

CLI Tool Installation

First, you need to install @tarojs/cli using npm or yarn globally, or use npx directly:

# use npm install CLI
$ npm install -g @tarojs/cli

# OR use yarn install CLI
$ yarn global add @tarojs/cli

# OR install cnpm，use cnpm install CLI
$ cnpm install -g @tarojs/cli

Taro version information can be found using npm info, where you can see the current version

npm info @tarojs/cli

Project initialization

Use commands to create template projects：

$ taro init myApp

npm 5.2+ can also use npx to create template projects without global installation:

$ npx @tarojs/cli init myApp

After the project is created, Taro will install the dependencies required by the project by default. The installation tools are used to detect the dependencies in the yarn > cnpm > npm order. In general, the dependency installation will be relatively smooth, but in some cases the installation may fail, in which case you can use the installation command in the project directory to install yourself:

# Go to the project root directory
$ cd myApp

# use yarn Installation dependency
$ yarn

# OR use cnpm Installation dependency
$ cnpm install

# OR use npm Installation dependency
$ npm install

compilation run

Use Taro’s build command to compile Taro code into different side code, and then view the effect in the corresponding development tool.

Taro compilation is divided into dev and build modes:

• dev mode (added –watch parameter) will listen for file modifications.
• build mode (without the –watch parameter) will not listen for file modifications and will compress and package the code.
• The files generated in dev mode are large. Setting the environment variable NODE_ENV to production can enable compression for easy preview, but the compilation speed will be reduced.

Example byte applet:

compile command

# yarn
$ yarn dev:tt
$ yarn build:tt

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

# Global installation only
$ taro build --type tt --watch
$ taro build --type tt

# npx It is also available to users
$ npx taro build --type tt --watch
$ npx taro build --type tt

# watch Simultaneous compression
$ set NODE_ENV=production && taro build --type tt --watch # Windows
$ NODE_ENV=production taro build --type tt --watch # Mac

Small program developer tools

Download and open the Bytedance applet Developer tool, and make sure the applet project configuration file project.tt.json is set. Then select the dist directory in the root of the project (the directory of the outputRoot setting in root config) to preview.

Note the project Settings of the developer tools:

• The ES6 to ES5 function needs to be disabled. If this function is enabled, an error may be reported
• You need to disable automatic style completion when uploading code. If enabled, an error may be reported
• You need to disable code compression upload. If this function is enabled, an error may be reported

Project progression and optimization

CSS instrument

In Taro, we can use CSS preprocessor and post-processor freely, and the method of using CSS is very simple, as long as the relevant plug-ins are added in the compilation configuration:

const config = {
  projectName: 'v2ex',
  date: '2018-8-3',
  designWidth: 750,
  sourceRoot: 'src',
  outputRoot: 'dist',
  plugins: [
    '@tarojs/plugin-sass', // use Sass
    // '@tarojs/plugin-less', // use Less
    // '@tarojs/plugin-stylus', // use Stylus
  ],
  defineConstants: {
  },
  mini: {

  },
  h5: {
    publicPath: '/',
    staticDirectory: 'static',
    module: {
      postcss: {
        autoprefixer: {
          enable: true
        }
      }
    }
  }
}

module.exports = function (merge) {
  if (process.env.NODE_ENV === 'development') {
    return merge({}, config, require('./dev'))
  }
  return merge({}, config, require('./prod'))
}

Multiterminal development

In some cases, the performance or business logic of different platforms is qualitatively different. In this case, we can not do “one set of code to go around the world”.

For example, we are implementing the V2EX forum application, and the current API cannot be called cross-domain in the browser, so we need to use another API on the H5 side. We can solve this with built-in environment variables:

- import api from '../../utils/api'
// We can introduce different apis depending on the API
+ let api
+ if (process.env.TARO_ENV === 'weapp') {
+  api = require('../../utils/api-weapp')
+ } else if (process.env.TARO_ENV === 'h5') {
+  api = require('../../utils/api-h5')
+ }

Taro also provides a unified interface of multi-terminal files, through different naming ways to find dependencies, in such cases, we can keep:

import api from '../../utils/api'

Modify our file structure by adding the name of the platform between the file name and the suffix:

.
└── utils
    ├── api.h5.js
    ├── api.weapp.js
    └── index.js