Home >WeChat Applet >Mini Program Development >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~
Version 0.0.10
? 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 nested arrays within objects, and nested objects within arrays;
If your
Eslint 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]
3. wx-updata installationin 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 moduleClick the
Tools on the WeChat Developer Tool Panel toolbar - Build npm
After the build, the 4. How to use wx-updata
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 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 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// 页面代码中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
data
: The data you want to setcallback
: Same as the second parameter of setData, it causes the callback function after the interface is updated and rendered. updataInit(Page, config)
: Page object, needs to be in
app.js Called in;
Configuration
will print out the pathed data, help For user debugging, the default value is false and is not enabled;
will enable the object path mode function of the array. The default value is false and is not enabled;
objToPath(Object data, Object config)
: The data object you want to set
Configuration
, 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!