The paper

Recently, I learned Taro, and developed a small program project of Alipay with my company partners, and gained some experience in using it. Generally speaking, Taro is a flexible framework with high development efficiency, suitable for front-end personnel engaged in React development to start quickly (it can be started quickly in one or two days with low learning cost)

First, the project template was generated based on the Taro initialization scaffolding. Then, dVA and other React state management library plug-ins were configured by themselves. The development mode was similar to the usual React + DVA + UMI project, and the directory structure was similar

Config / / taro configuration directory dist / / package directory compiled SRC | - | - components / / assets / / static resources common components directory | - | - models / / config / / public configuration globally Models, Page model need to be here introduce configuration | - services/store/public API | - | - the main pages / / container components/containers/business May not have any capital letters | | -- - components / / business component Models / / business model API | | - services / / business -- index. Js / / business entry Entry file identification index only. Js suffix must be js | -- MainPage. Js / / | - business logic actual page entry MainPage. Less style | -- MapProps. / / js / / mapStateToProps, mapDispatchToProps | | - utils / / tools -- app. | - JSX / / global entry App. Less global style / / | -- index. HTML / / h5 need HTML. Eslintrc. Js/configuration/eslint gitignore package. The json README, md

Speaking of the advantages, it must be said that multi-terminal development, one coding, multi-terminal use, currently Taro 3 can support conversion to wechat/JINGdong/Baidu/Alipay/Bytedance /QQ small programs and H5 terminal

Speaking of drawbacks, developing simple pages is ok, but there is great compatibility when dealing with native related content or Taro apis (such as uploading videos and audio). Many apis cannot be supported uniformly among different mobile terminals, which requires coordination and assistance from native developers of corresponding mobile terminals or internal staff of small programs. This is often criticized in the technology community, which is also the reason why many mobile terminal products directly abandon Taro when selecting technology

Part of the screenshot



The installation

First, ensure the Node environment (>=8.0.0) and install the CLI tool

# Install the CLI using YARN
$ yarn global add @tarojs/cli
Install CLI using CNPM
$ cnpm install -g @tarojs/cli
Copy the code

Project initialization

Use the command to create the template project or directly use the taro-demo project I gave you

$taro Init Project nameCopy the code

After creating the project, Taro will start installing the required dependencies by default. If the installation fails, you can use the installation command to install them yourself in the project directory

$ yarn or cnpm install
Copy the code

Keep the @tarojs/cli version consistent with the taro version that the project relies on, otherwise problems will result in compile failures

Run and pack at each end

Taro needs to run different commands to compile the Taro code into different ends of the code, and then view the effect in the corresponding development tools, now support H5, RN, Alipay small program, wechat small program and other small programs, here are a few examples

To run in wechat mini program mode, you need to download and open wechat developer tools by yourself, and then select the project root directory for preview and package after the project is compiled (as follows)

# yarn
$ yarn dev:weapp
$ yarn build:weapp
# Global install only
$ taro build --type weapp --watch
$ taro build --type weapp
Copy the code

To run alipay mini program mode, you need to download and open the Developer tool of Alipay mini program by yourself, and then select dist directory under the root directory of the project for preview and packaging after the compilation of the project (as shown below)

# yarn
$ yarn dev:alipay
$ yarn build:alipay
# Global install only
$ taro build --type alipay --watch
$ taro build --type alipay
Copy the code

H5 mode running, no specific developer tools, after executing the following command can automatically preview and package through the browser

# yarn
$ yarn dev:h5
$ yarn build:h5
# Global install only
$ taro build --type h5 --watch
$ taro build --type h5
Copy the code

update

Update the Taro CLI tool and project Taro related dependencies assuming current 2.0.5 is the latest version, as shown in

Update the Taro CLI tool$YARN Global upgrade @tarojs/[email protected]# Taro related dependencies in more detailed projects$taro Update Project 2.0.5Copy the code

Some commands

  • Taro version environment and dependency detection$ taro info
  • Diagnose project dependencies, setup, structure, and code specification issues$ Taro Doctor
  • For other commands, see$ taro --help

Taro development FAQ

  1. The Taro syntax is similar to the React syntax, including componentization, component lifecycle, JSX, Hooks, etc
  2. Taro’s project file architecture is also similar to dVA + UMI’s, with the default entry file beingsrcIn the directoryapp.js
  3. Taro will convert all units by default, so you don’t need to worry about pixel units on mobile devices. Size units are recommendedpxPercentage,%
  4. Component and reference component page CSS selectors should not use id selectors (#a), attribute selectors ([a]), tag name selectors, and child selectors (.a.b). It is better to use class selectors altogether
  5. Route, cache API more look, compare the difference
  6. Taro provides its own component library, as well as a richer Taro UI library based on the development of Taro. It is generally recommended to use the Taro Api for functions, but the compatibility of the Taro UI library functions is low, such as loading
  7. In Taro can be likewebpackTo reference static resources, you do not need to install Loaders, directly through ES6importSyntax to reference files. Files are recommended to be placed on static servers to reduce package size
  8. Taro provides a wide range of apis, such as caching, routing, taking photos, and video. However, the compatibility problem is very big, and many of the apis between different mobile devices can not reach the unified support. However, this can not be blamed on Taro
  9. Taro can also support mixing with native applets, and can use native third-party components or plug-ins

Taro project based on Taro+Taro- UI + DVA

awesome-taro

At present, we see that Taro has been updated to 3.x, teh teh technology, it seems that we can only advance or go back