转载本文请联系前端下午茶公众号。鉴于开发微信小程序时使用setData的蹩脚体验，我开发了一个库函数wx-updata。项目上线后，我整理了这个库函数供自己使用，放在Github上开源wx-updata。这个库函数正在开发中，在我使用的时候对我很有帮助，希望对你也有帮助？如果你在使用中遇到问题，可以给我提个pr，提个issue，我们一起提升小程序开发体验吧~wx-updata0.0.10版本Github地址：https://github.com/SHERlocked93/wx-updata小程序代码片段预览地址：https://developers.weixin.qq.com/s/CcXdO1mc73jD小程序代码片段代码地址：https://github.com/SHERlocked93/wx-updata-demo1。setData不方便的地方你在使用setData的时候，是不是有时候会觉得不舒服，举个简单的例子：//yourdatadata:{name:'CrayonShinchan',info:{height:140,color:'yellow'}}如果你想修改info.height为155，如何使用setData//这会使info中的其他属性消失this.setData({info:{height:155}})//需要把info对象取出来。修改后，整个setDataconst{info}=this.datainfo.height=155this.setData({info})看起来并没有太复杂，但是如果数据是非常大的对象，就需要更改更深更不同的对象和数组一项一项：data:{name:'蜡笔小新',info:{height:140,color:'yellow',desc:[{age:8},'最喜欢的大象歌','美少年',{dog:'小白',color:'white'}]}}比如某个需求，需要将info.height修改为155，同时需要修改info.desc数组的age第0项为12，第3项颜色为灰色？//先取出要改变的对象，改变数字后setData返回const{info}=this.datainfo.height=155info.desc[0].age=12info.desc[3].color='gray'this.setData({info})//或者像某些文章介绍的那样，这样可读性差，不太实用this.setData({'info.height':155,'info.desc[0].age':12,'info.desc[3].color':'gray'})以上两种方法在我们普通的小程序中经常会用到。和其他的web端框架相比，很鸡肋，半成品感很强。有没有这样一个方法：this.upData({info:{height:155,desc:[{age:12},,,{color:'gray'}]}})这个方法会帮助我们深度改变相应的属性嵌套对象中的value，跳过我们不想改变的数组项，只设置我们提供的属性值和数组项。岂不是省去了很多烂代码，可读性也极好这就是为什么我在在线项目中使用wx-updata而不是setData2的原因。wx-updata的优点是支持自动合并setData对象，不用写蹩脚的对象路径？？支持对象嵌套数组，数组嵌套对象；如果不想覆盖数组中的某个值，请使用数组槽跳过该数组项，例如[1,,3]是数组中间的数组槽；如果arrayslot为空，你的Eslint报错，可以使用wx-updataProvidedEmpty代替：[1,Empty,3]3.wx-updata安装也可以直接copydist目录下的wx-updata.js到项目中使用npm，yarn安装方法：$npmi-Swx-updata#or$yarnaddwx-updata然后：把详情放在微信开发者工具面板右侧-本地设置-使用npm模块按钮打开；点击微信开发者工具面板工具栏中的工具-构建npm；构建成功后生成miniprogram_npm文件夹可以正常使用4.wx-updata的使用方法1可以直接挂载到Page上，这样就可以像使用setData一样在Page实例中使用upData//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:'gray'}]]})第二种使用方法可能是在Page对象上做了进一步的修改，直接替换Page的方法可能不是很好。wx-updata也对外暴露了工具方法，用户可以直接在页面代码中使用工具方法进行处理：//页面代码中import{objToPath}from'./miniprogram_npm/wx-updata/index'//你的库文件路径Page({data:{a:{b:2},c:[3,4,5]},//自己封装upData(data){returnthis.setData(objToPath(data))},//在你的方法或生命周期函数中yourMethod(){this.upData({a:{b:7},c:[8,,9]})}})用Empty代替数组空间。可以使用wx-updata提供的Empty来代替数组空间。由于Empty本质上是一个Symbol，所以只能通过wx-updata导出，不能在页面代码中自己新建//import{Empty}from'./miniprogram_npm/wx-updata/index'this.upData({info:{height:155},desc:[{age:13},'帅哥'],family:[Empty,Empty,[Empty,Empty,Empty,{color:'gray'}]]})5.wx-updata相关的APIPage.prototype.upData(Objectdata,Functioncallback)data：你要设置的数据callback：setData的第二个参数同理，导致接口的回调函数updataInit(Page,config)渲染完成后更新Page：页面对象，需要在app.js中调用；config：如果提供了配置参数{debug:true}，会将路由的数据打印出来，帮助用户调试；objToPath(Objectdata)data：你要设置的数据对象原文链接：https://mp.weixin.qq.com/s/QwCnT335M2P_3NIQhY8XZg
