According to the official document, I spent a little time to sort out the knowledge points that can be used in the project. For regular use, you can directly see the document. I just do a little tip here

Official address: taro-docs.jd.com/taro/docs/R…

configuration

Taro Document: taro-docs.jd.com/taro/docs/2…

Taro can introduce mock data via @tarojs/plugin-mock

const config = { plugins: ['@tarojs/plugin-mock', {mocks: {'/ API /user/1': {name: Judy, desc: 'getting guy'}}}], / / plug-in, introduced from the local absolute path, if you need any incoming parameters is also same as'/absulute/path/plugins/filename,]}Copy the code

style

Taro Address: taro-docs.jd.com/taro/docs/2…

In Taro, it is recommended to use px and %. By default, all units are converted. The writing size in Taro should be written in a 1:1 relationship, that is, if the length of the design is 100px, the writing size is 100px. When it is converted into a wechat mini program, the writing size will be converted to 100rpx by default, and when it is converted into H5, the writing size will be converted to the value in rem by default.

If you want some px units not to be converted to RPX or REM, the easiest way to do this is to add a capital letter to the px unit, such as px or PX, which will be ignored by the conversion plugin.

Combined with past development experience, the default size of Taro is 750px. If the design draft is not 750px as the standard, it needs to be set in the project configuration config/index.js. For example, the design draft size is 640px. Change designWidth to 640 in config/index.js:

const config ={
  projectName:'myProject',
  date:'2018-4-18',
  designWidth:640,
....
}
Copy the code

Currently Taro supports 750, 640 and 828 design drafts. Their conversion rules are as follows:

Const deviceRatio = {' 640 ': 2.34/2,' 750 ', 1, '828' : 1.81/2}Copy the code

When using Taro, it is recommended to use iPhone 6750px as the design size standard.

If your design is 375 and not one of the above, then you need to set designWidth to 375 and add the following conversion rule to deviceRatio:

{designWidth: 375, deviceRatio: {1/2, '375', '640' : 2.34/2, '750', 1, '828' : 1.81/2}}Copy the code

At compile time Taro will help you convert styles to size, but if you write inline styles in JS, it will not be able to do so at compile time. In this case Taro provides apitaro.pxTransform for runtime size conversion.

Tar.pxtransform (10)// Small program: RPX, H5: remCopy the code

debugging

If you want to debug an online problem locally, you can modify the configuration file locally to import online data

Method 1: Modify the imported file directly

Set NODE_ENV in config/dev.js to production manually

Method 2: Use the customEnv command on the CLI to dynamically import the response environment

Taro Address: taro-docs.jd.com/taro/docs/2…

Add in the scripts of the PKG file

“customEnv:weapp”: “cross-env CUSTOM_ENV=testProduction npm run dev:weapp”,

This is assisted by the introduction of the cross-env package, which simulates the toolkit for setting NODE environment variables

Then make the following changes in config/index.js

Module. Exports = function (merge) {if (process.env.CUSTOM_ENV === "testProduction") {// use online data to debug -- Return merge({}, config, require("./prod")); } if (process.env.NODE_ENV === "development") { return merge({}, config, require("./dev")); } if (process.argv.includes("testEnv")) { return merge({}, config, require("./test")); } return merge({}, config, require("./prod")); };Copy the code

! —

Direct build mode can also compile to online resources, and then request the online interface, but this mode does not have watch, which makes debugging inconvenient

– -!

compile

Taro compilation uses packages such as Uglify.js that compress code

Performance optimization

Taro Address: taro-docs.jd.com/taro/docs/2…

preload

In the micro channel small program, alipay small program and QQ light application, from the call Taro. NavigateTo or Taro. RedirectTo, to the page trigger componentWillMount will have a certain delay. So some network requests can be requested in advance of the jump.

Taro provides the componentWillPreload hook, which takes the page jump parameter as an argument. You can return the content that needs to be preloaded, and then after the page triggers componentWillMount, you can get the preloaded content through this.$preloadData.

Note: Absolute paths are required when calling jump methods; relative paths do not trigger this hook.

class Index extends Component { componentWillMount () { console.log('isFetching: ', this.isFetching) this.$preloadData .then(res => { console.log('res: ', res) this.isFetching = false }) } componentWillPreload (params) { return this.fetchData(params.url) } fetchData () { this.isFetching = true ... }}Copy the code

In small programs, you can use this.$preload to skip to the page

This is also the implementation of the preloading function, can the above preloading has the same effect, as to which method is up to the developer

Usage: this. $preload (key: String | Object, [the value: Any])

It is named $preload because it also preloads data.

If you think it is tedious to add the stringify parameter to the query string of the URL each time the page jump passes the parameter, you can use this.$preload to pass the parameter.

In addition, if the incoming data request promise for the next page, there is also the “preload” function mentioned in the previous point, also can bypass the componentWillMount delay. The main difference lies in code management, which developers can use at their discretion.

Example:

$preload this.$preload('key', 'val') tara.navigateto ({url: '/pages/B/B'}) // B = componentWillMount () { Console. log('preload: ', this.$router-preload.key)} // pass multiple parameters // A page this.$preload({x: 1, y: 1) 2}) tara.navigateto ({url: '/pages/B/B'}) // B componentWillMount () {console.log('preload: ') ', this.$router.preload) }Copy the code

Use the optimizations that come with React

Taro Address: taro-docs.jd.com/taro/docs/2…

shouldComponentUpdate

Taro.PureComponent

Taro.memo

Taro. Memo is a high-level component that is very similar to PureComponent. But it applies to functional components, not Class components.

If your function component renders the same result with the same props, then you can improve the performance of the component by memorizing the result by wrapping it in Taro. Memo. This means that in this case Taro will skip the operation of the render component and directly reuse the results of the most recent render.

By default, it only compares complex objects in a shallow way (the same way PureComponent behaves). If you want to control the comparison, pass in a custom comparison function as the second argument.

Function MyComponent(props) {/* props */} function areEqual(prevProps, NextProps) {/* Return true if passing nextProps to render returns the same result as passing prevProps to render, } export default Taro. Memo (MyComponent, areEqual);Copy the code

Note that, unlike the class component shouldComponentUpdate() method, areEqual returns true if props areEqual; If props are not equal, return false. This is the opposite of the value returned by the shouldComponentUpdate method.

Taro framework optimization

The Taro framework does some performance optimization work that developers can do without having to do it manually.

Small program data diff

Taro diff the state of the page or component and the data of the current page or component once before actually calling the setData method of the small program. Taro does the setData only for the data that needs to be updated. The developer does not need to manually optimize the data.

The diff logic:
  1. If yes => Skip
  2. Add a field => Use the new value
  3. If the type is different => Use a new value
  4. If the basic data type is the same => Use the new value
  5. If one is an array and the other is not => use the new value
  6. If the new array is shorter than the old array => use the new value
  7. If the length of the new array is greater than or equal to that of the old array => diff item by item and update by path
  8. If one is NULL and the other is not => Use the new value
  9. The new object lacks some properties of the old object => use the new value
  10. The new object has all the properties of the old object => Diff item by item, update by path
Const state = {a: 1, b: 22, d: 4, list: [1], arr: [1, 'a', true, null, 66], obj: {x: 5}, foo: {x: 8, y: Z: 0}} / / 10 and old value const data = {2, a: 1, b: c: 3, list: [1, 2, 3], arr: [1, 2, 3], obj: {x: 10, y: 8}, foo: {x: 'XXX', y: 10}} diff (data, state) / * * * diff results {b: 22, d: 4, list: [1], 'arr [1]' : 'a', 'arr [2]' : true, 'the arr [3]' : null, 'arr[4]': 66, obj: { x: 5 }, 'foo.x': 8, 'foo.z': 0 } */Copy the code