鉴于我开发微信小程序时的糟糕体验，我开发了一个库函数wx-.项目上线后，我编译了这个自用的库函数，放到了开源的wx-.这个库函数对我的开发过程非常有帮助。很有帮助，希望也能帮助到大家

如果您在使用过程中遇到问题，可以给我发PR，提及，我们一起努力提升小程序开发体验~

wx-版本0.0。地址：小程序代码片段预览地址：小程序代码片段代码地址：1.不方便的地方

您在使用过程中有时会感到不舒服吗？这是一个简单的例子：

// 你的 data data: { name: '蜡笔小新', info: { height: 140, color: '黄色' } }

如果你想修改信息。到155，怎么做：

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

看起来并不算太复杂，但是如果数据是一个大对象，深度不同的对象和数组项就必须一一改变：

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

例如，对于某个需求，您需要更改信息。到155，同时将info.desc数组的第0项的年龄更改为12，将第3项的年龄更改为灰色？

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

以上两种方式是我们日常小程序中经常使用的。与其他Web端框架相比，它们非常蹩脚，半成品感很强。有没有这样的方法：

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

该方法将帮助我们深入改变嵌套对象中对应的属性值，跳过我们不想改变的数组项，只设置我们提供的属性值和数组项。岂不是省略了很多蹩脚的代码，而且可读性也很强。

这就是为什么我在上线的项目中使用 wx-，而不是

2、wx-的优点：支持对象自动合并，不用写蹩脚的对象路径。支持对象中嵌套数组以及数组中嵌套对象；如果不想覆盖数组中的某个值，请使用数组间隙来跳过此数组项，例如[1,,3]，数组中有一个空格。如果数组为空时出现错误，可以使用 wx- 提供的：[1, , 3]3。 wx-安装

也可以直接将dist目录下的wx-.js复制到项目中使用。

使用npm、yarn安装方法：

$ npm i -S wx-updata # or $ yarn add wx-updata

然后：

在微信开发者工具面板右侧-本地设置-使用npm模块按钮打开详情；点击微信开发者工具面板工具栏-构建npm；

构建完成后，文件夹成功生成，可以正常使用。

4.wx-使用方法一

可以采用直接挂载到Page的方法，这样就可以在Page实例中使用像

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

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

使用方法二

有些框架可能对Page对象做了进一步的修改，直接替换Page可能不太好。 wx-还暴露了工具方法，用户可以直接在页面代码中使用工具方法进行处理：

// 页面代码中 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]}) } })

使用数组空间代替

可以使用wx-提供的来替换数组空间。由于本质上是一个，所以你只能使用wx-导出的，而不能自己创建一个新的。

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

5.wx相关API

页..（数据，）

data：要设置的内容：与第二个参数相同，引起界面更新渲染后的回调函数。

（页， ）

Page：页面对象，需要在app.js中调用；：如果提供配置参数{:true}，则会打印出路径数据，方便用户调试；

（数据）

data：要设置的数据对象。如果您觉得文章不错，请转发并关注。小编也为大家准备了一些资料。您可以通过发送带有“信息”的私信来获取。