Why do I give up setData and use upData to develop small programs for wechat

In view of my poor experience of using setData in the development of wechat applets, I developed a library function wX-Updata. After the project was launched, I sorted out this self-used library function and put it on Github to open source wX-Updata. This library function was very helpful to me during the development. I hope I can help you 👏

If you encounter problems in use, you can give me pr, issue, together to improve the small program development experience ~

1. wx-updataVersion 0.0.10
2. Github address: github.com/SHERlocked9…
3. Small program code fragments preview address: developers.weixin.qq.com/s/CcXdO1mc7…
4. Small program code snippet code address: github.com/SHERlocked9…

1. Inconvenient aspects of setData

Do you sometimes feel uncomfortable using setData? Here’s a simple example:

/ / your data
data: {
    name: 'Crayon Shin'.info: { height: 140.color: 'yellow'}}Copy the code

If you want to change info.height to 155, what do you do with setData?

// This will remove all other attributes in info
this.setData({ info: { height: 155}})// You need to take out the info object and modify the entire setData
const { info } = this.data
info.height = 155
this.setData({ info })
Copy the code

It doesn’t seem too complicated, but if data is a large object, change the deeper and different objects and the array items one by one:

data: {
    name: 'Crayon Shin'.info: {
        height: 140.color: 'yellow'.desc: [{ age: 8 }, 'Favorite elephant song'.'handsome', { dog: 'white'.color: 'white'}}}]Copy the code

How about changing info.height to 155 and info.desc to age 12 and color gray?

// First fetch the object to be changed, change the number of setData back
const { info } = this.data
info.height = 155
info.desc[0].age = 12
info.desc[3].color = 'grey'
this.setData({ info })

// Or, as some articles say, it's not very readable or practical
this.setData({
    'info.height': 155.'info.desc[0].age': 12.'info.desc[3].color': 'grey'
})
Copy the code

The above two methods are often used in our ordinary small programs, compared with other Web end frameworks, it is very lame, a thick sense of semi-finished products, there is no such a method:

this.upData({
    info: {
        height: 155.desc: [{ age: 12}, {color: 'grey'}]}})Copy the code

This method allows us to deeply change the value of the corresponding property in the nested object. It skips the value of the property in the array and only sets the value of the property in the array. This method saves a lot of bad code and is very readable.

Is that why I use WX-upData instead of setData for live projects

The principle of WX-UpData is actually very simple, for example:

this.upData({
    info: {
        height: 155.desc: [{ age: 12}]}})// is automatically converted to the following format,
// this.setData({
// 'info.height': 155,
// 'info.desc[0].age': 12,
// })
Copy the code

Wx-updata does it for us, isn’t it beautiful?

Here are the advantages and main usage methods of WX-updata

2. Advantages of WX-Updata

1. supportsetDataObject automatic merge, no need to write crappy object path 🥳
2. Supports nested arrays in objects, nested objects in arrays;
3. If you do not want a value of the array to be overridden, use array Spaces to skip the array entry, for example[1,,3]The middle of this array is the array space;
4. If the array is empty yourEslintError, can be usedwx-updataProvide Empty instead:[1, Empty, 3]
5. If you’re not comfortable with, or not comfortable with, counting commas, try object paths for arrays[1,,3] -> {' [0] : 1, '[2] : 3}

3. Wx – updata installation

You can also copy wX-updata. js from the dist directory directly into your project

NPM or YARN installation mode:

$ npm i -S wx-updata
# or
$ yarn add wx-updata
Copy the code

And then:

1. Put the wechat developer tools panel on the rightDetails - Local Settings - use the NPM moduleButton open;
2. Click on the toolbar of the wechat Developer tool panelTools - Build NPM;

After the build, the miniprogram_npm folder can be used normally

4. How to use WX-updata

Mode of use 1

You can mount upData directly to the Page, so you can use upData in the Page instance just as you would use setData

// app.js
import { updataInit } from './miniprogram_npm/wx-updata/index'  // Your library file path

App({
    onLaunch() {
        Page = updataInit(Page, { debug: true})}})Copy the code

// in the page code

this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, 'handsome boy'].family: [,, [,, {color: 'grey'}}]])Copy the code

Mode of use 2

Some frameworks may have further modifications on the Page object, which may not be a good way to replace the Page directly. Wx-updata also exposes utility methods, which users can use directly in the Page code:

// in the page code

import { objToPath } from './miniprogram_npm/wx-updata/index'  // Your library file path

Page({
    data: { a: { b: 2}, c: [3.4.5]},

    // Wrap it yourself
    upData(data) {
        return this.setData(objToPath(data))
    },

    // Your method or lifecycle function
    yourMethod() {
        this.upData({ a: { b: 7}, c: [8.9]})}})Copy the code

Use Empty instead of an array Empty

You can use the Empty provided by WX-updata to replace the array Empty. Since Empty is essentially a Symbol, it can only be exported using WX-updata, rather than created by itself.

// in the page code
import { Empty } from './miniprogram_npm/wx-updata/index'

this.upData({
    info: { height: 155 },
    desc: [{ age: 13 }, 'handsome boy'].family: [Empty, Empty, [Empty, Empty, Empty, { color: 'grey'}}]])Copy the code

Array object path mode

If you are not comfortable with, or are not comfortable with, counting commas, try the array object path method, passing the config {arrObjPath: true} configuration.

// in the page code
import { Empty } from './miniprogram_npm/wx-updata/index'

// The original way
this.upData({
    info: { height: 155 },
    desc: [.'handsome'].family: [,, [,, {color: 'grey'}}]])// Use array paths
this.upData({
    info: { height: 155 },
    desc: {'[1]': 'handsome'},
    family: { '[2]': { '[3]': { color: 'grey'}})Copy the code

5. Wx-updata related API

Page.prototype.upData(Object data, Function callback)

1. data: The data you want to set
2. callback: withsetDataThe second argument, as well, causes the interface to update after rendering the callback function

updataInit(Page, config)

1. Page: page object that needs to be inapp.jsIn the call;
2. configconfiguration
   • Configuration parameters{ debug: true }, will print the path-based data to help users debug. The default value is false.
   • Configuration parameters{ arrObjPath: true }, will enable array object path mode function, default false not to enable;

objToPath(Object data, Object config)

1. data: The data object you want to set
2. configconfiguration
   • Configuration parameters{ arrObjPath: true }, will enable array object path mode function, default false not to enable;

---

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference Documents:

1. Small program development practical tips – expand Page Page object – nuggets

PS: MY blog address is Github – SHERlocked93/blog, also welcome to follow my public account [front end afternoon tea], together with cheer ~

In addition, you can join the “front-end afternoon tea Communication Group” wechat group, long press to identify the qr code below to add my friend, I will pull you into the group ~