


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: <pre class='brush:php;toolbar:false;'>// 你的 datadata: { name: &#39;蜡笔小新&#39;, info: { height: 140, color: &#39;黄色&#39; }
}复制代码</pre>
If you want to modify
to 155, use How to do setData
: <pre class='brush:php;toolbar:false;'>// 这样会把 info 里其他属性整不见了this.setData({ info: { height: 155 } })// 你需要取出 info 对象,修改后整个 setDataconst { info } = this.data
info.height = 155this.setData({ info })复制代码</pre>
does not seem too complicated, but if
is a large object, deep and different objects and array items must be changed one by one. : <pre class='brush:php;toolbar:false;'>data: { name: &#39;蜡笔小新&#39;, info: { height: 140, color: &#39;黄色&#39;, desc: [{ age: 8 }, &#39;最喜欢大象之歌&#39;, &#39;靓仔&#39;, { dog: &#39;小白&#39;, color: &#39;白色&#39; }]
}
}复制代码</pre>
For example, for a certain requirement, you need to change
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
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 - [1,,3] The middle of this array is the array empty space;
-
If your
Eslint reports an error if the array is empty, you can use - 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] -> - {'[0]': 1, '[2]': 3}
You can also directly copy the
wx-updata.jsin the,dist
npmdirectory to the project for use
Use
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;
-
Click the
Tools on the WeChat Developer Tool Panel toolbar - Build npm ; -
After the build, the
miniprogram_npm
4. How to use wx-updata
Page
, so that you can useupData 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 ofPage 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 usingwx-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)
-
data
: The data you want to set -
callback
: Same as the second parameter of setData, it causes the callback function after the interface is updated and rendered.
updataInit(Page, config)
- ##Page
: Page object, needs to be in
app.jsCalled in;
- 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;
- { debug: true }
objToPath(Object data, Object config)
- data
: The data object you want to set
- 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;
- { arrObjPath: true }
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

SecLists
SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

WebStorm Mac version
Useful JavaScript development tools

Atom editor mac version download
The most popular open source editor

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software