When developing WeChat mini programs, why do I only use upData?

In view of the poor experience of using setData when developing WeChat applet, I developed a library function wx-updata. After the project was launched, , I compiled this self-used library function and put it on Github as open source wx-updata. This library function was very helpful to me during development. I hope it can also help everyone. If you encounter any problems during use, If you have a problem, you can submit a PR or an issue to me, and let’s work together to improve the mini program development experience~

• wx-updata

  Version 0.0.10

Github address: github.com/SHERlocked9…
Mini program code snippet preview address: developers.weixin.qq.com/s/CcXdO1mc7…
Mini program code snippet code address: github.com/SHERlocked9…
1. The inconvenient place of setData

You are using Do you sometimes feel uncomfortable when

setData

? Here is a simple example:

// 你的 datadata: {    name: '蜡笔小新',    info: { height: 140, color: '黄色' }
}复制代码

If you want to modify

info.height

to 155, use How to do setData:

// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象，修改后整个 setDataconst { info } = this.data
info.height = 155this.setData({ info })复制代码

does not seem too complicated, but if

data

is a large object, deep and different objects and array items must be changed one by one. :

data: {    name: '蜡笔小新',    info: {        height: 140, color: '黄色',        desc: [{ age: 8 }, '最喜欢大象之歌', '靓仔', { dog: '小白', color: '白色' }]
    }
}复制代码

For example, for a certain requirement, you need to change

info.height

to 155, and at the same time change the age# of the 0th item of the info.desc array. ## is 12, and the color of the third item is gray?

// 先取出要改变的对象，改变数字后 setData 回去const { info } = this.data
info.height = 155info.desc[0].age = 12info.desc[3].color = '灰色'this.setData({ info })// 或者像某些文章里介绍的，这样可读性差，也不太实用this.setData({    'info.height': 155,    'info.desc[0].age': 12,    'info.desc[3].color': '灰色'})复制代码

The above two methods are often used in our daily small programs. Compared with other web-side frameworks, they are very lame and have a strong sense of semi-finished products. Is there such a one? Method:

this.upData({    info: {        height: 155,        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})复制代码

This method will help us deeply change the corresponding attribute values ​​​​in the nested object, skip the array items that we do not want to change, and only set the attribute values ​​​​and array items we provided. Isn’t it omitted? A lot of crappy code that's extremely readable.

This is why I use wx-updata in the online project instead of

setData

The principle of wx-updata is actually very simple, for example:

this.upData({    info: {        height: 155,        desc: [{ age: 12 }]
    }
})// 会被自动转化为下面这种格式，// this.setData({//    'info.height': 155,//    'info.desc[0].age': 12,// })复制代码

Originally we had to do this conversion manually ourselves, but now wx-updata does it for us, isn’t it wonderful!

The following introduces the advantages and main usage methods of wx-updata~

2. Advantages of wx-updata

Supports

setData

objects Automatic merging, no need to write crappy object paths
1. Supports nested arrays within objects, and nested objects within arrays;
If you don’t want to overwrite a certain value in the array, please use the array space to skip this array item, such as
2. [1,,3]
The middle of this array is the array empty space;
3. If your Eslint
reports an error if the array is empty, you can use
4. wx-updata Provide Empty instead: [1, Empty, 3]If you are not used to empty spaces in the array, or are not willing to count commas, you can try Try the object path method of the array[1,,3]
->
5. {'[0]': 1, '[2]': 3} 3. wx-updata installation

You can also directly copy the

wx-updata.js

in the

dist directory to the project for useUse

npm

,

yarn Installation method:

$ npm i -S wx-updata# or$ yarn add wx-updata复制代码

Then:

Install the WeChat developer tools

Details on the right side of the panel - Local Settings - Use the npm module

button to open;
1. Click the Tools on the WeChat Developer Tool Panel toolbar - Build npm
;
2. After the build, the
miniprogram_npm

folder is successfully generated and can be used normally.

4. How to use wx-updata

Usage method one

You can use the method of mounting directly to

Page

, so that you can use

upData in the Page instance just like setData

// app.jsimport { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径App({
    onLaunch() {
        Page = updataInit(Page, { debug: true })
    }
})复制代码

// 页面代码中this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [, , [, , , { color: '灰色' }]]
})复制代码

Usage method two

Some frameworks may have further modifications on the

Page

object, and direct replacement of

Page may not be possible. Great, wx-updata also exposes tool methods. Users can use tool methods directly in the page code for processing:

// 页面代码中import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径Page({    data: { a: { b: 2}, c: [3,4,5]},    // 自己封装一下
    upData(data) {        return this.setData(objToPath(data))
    },    // 你的方法中或生命周期函数
    yourMethod() {        this.upData({ a: { b: 7}, c: [8,,9]})
    }
})复制代码

Use Empty to replace array empty spaces

You can use the Empty provided by

wx-updata

to replace the array empty position. Since Empty is essentially a Symbol, it can only be exported using

wx-updata and cannot be created by yourself.

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帅哥'],    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色' }]]
})复制代码

Object path method of array

If you are not used to empty spaces in the array, or are not willing to count commas, you can try the object path method of array, and you need to pass the configuration of config

{arrObjPath: true}

// 页面代码中import { Empty } from './miniprogram_npm/wx-updata/index'// 原来的方式this.upData({    info: { height: 155 },    desc: [, '靓仔'],    family: [, , [, , , { color: '灰色' }]]
})// 使用数组路径方式this.upData({    info: { height: 155 },    desc: {'[1]': '靓仔'},    family: { '[2]': { '[3]': { color: '灰色' }
})复制代码

5. wx-updata related API

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

1. data: The data you want to set
2. callback: Same as the second parameter of setData, it causes the callback function after the interface is updated and rendered.

updataInit(Page, config)

1. ##Page: Page object, needs to be in app.js Called in;
2. config Configuration
   Configuration parameters
   • { debug: true } will print out the pathed data, help For user debugging, the default value is false and is not enabled;
   Configuration parameters
   • { arrObjPath: true } will enable the object path mode function of the array. The default value is false and is not enabled;

objToPath(Object data, Object config)

1. data: The data object you want to set
2. config Configuration
   Configuration parameters
   • { arrObjPath: true }, will enable the object path mode function of the array, the default is false and will not be enabled;

More related free learning recommendations: WeChat Mini Program Development

The above is the detailed content of When developing WeChat mini programs, why do I only use upData?. For more information, please follow other related articles on the PHP Chinese website!