### [开发微信小程序，我为什么只使用 upData](https://www.prosaas.cn/article/16528)

**Published:** 2020-09-27T08:45:12

**Author:** 5201314

**Excerpt:** 鉴于在下使用微信小程序开发时使用 的蹩脚体验，开发了个库函数 ，项目上线之后，我把这个自用的库函数整理放到 G…

![](https://img.php.cn/upload/article/000/000/052/5f704fdeb38ee432.jpg)

鉴于在下使用微信小程序开发时使用 `setData` 的蹩脚体验，开发了个库函数 `wx-updata`，项目上线之后，我把这个自用的库函数整理放到 Github 上开源出来 wx-updata，这个库函数在开发的时候对我很有帮助，希望也可以帮到大家

如果大家在使用中遇到了问题，可以给我提 pr，提 issue，一起来改善小程序开发体验～

-   `wx-updata` 版本 0.0.10
    
-   Github 地址： github.com/SHERlocked9…
    
-   小程序代码片段预览地址： developers.weixin.qq.com/s/CcXdO1mc7…
    
-   小程序代码片段代码地址： github.com/SHERlocked9…
    

## 1\. setData 不方便的地方

你在使用 `setData` 的时候，是不是有时候觉得很难受，举个简单的例子：

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

如果要修改 `info.height` 为 155，使用 `setData` 要怎么做呢：

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

似乎并不太复杂，但如果 `data` 是个很大的对象，要把比较深且不同的对象、数组项挨个改变：

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

比如某个需求，需要把 `info.height` 改为 155，同时改变 `info.desc` 数组的第 0 项的 `age` 为 12，第 3 项的 `color` 为灰色呢？

// 先取出要改变的对象，改变数字后 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': '灰色'})复制代码

上面这两种方法，是我们平常小程序里经常用的，和其他 Web 端的框架相比，就很蹩脚，一种浓浓的半成品感扑面而来，有没有这样一个方法：

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

这个方法会帮我们深度改变嵌套对象里对应的属性值，跳过数组项里不想改变的，只设置我们提供了的属性值、数组项，岂不是省略了一大堆蹩脚的代码，而且可读性也极佳呢。

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

wx-updata 的原理其实很简单，举个例子：

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

原来这个转化工作是要我们自己手动来做，现在 wx-updata 帮我们做了，岂不美哉！

下面介绍一下 wx-updata 的优点和主要使用方法～

## 2\. wx-updata 的优点

1.  支持 `setData` 对象自动合并，不用写蹩脚的对象路径了
2.  支持对象中嵌套数组，数组中嵌套对象；
3.  如果数组的某个值你不希望覆盖，请使用数组空位来跳过这个数组项，比如 `[1,,3]` 这个数组中间就是数组空位；
4.  如果数组空位你的 `Eslint` 报错，可以使用 `wx-updata` 提供的 Empty 来代替： `[1, Empty, 3]`
5.  如果数组空位你不习惯，或者不乐意数逗号个数，可以试试数组的对象路径方式 `[1,,3]` -> `{'[0]': 1, '[2]': 3}`

## 3\. wx-updata 安装

> 你也可以直接把 `dist` 目录下的 `wx-updata.js` 拷贝到项目里使用

使用 `npm`、`yarn` 安装方式：

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

然后：

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

构建后成功生成 `miniprogram_npm` 文件夹就可以正常使用了

## 4\. wx-updata 使用方法

### 使用方式一

可以使用直接挂载到 `Page` 上的方式，这样就可以在 `Page` 实例中像使用 `setData` 一样使用 `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: '灰色' }\]\]
})复制代码

### 使用方式二

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

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

### 使用 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: '灰色' }\]\]
})复制代码

### 数组的对象路径方式

如果数组空位你不习惯，或者不乐意数逗号个数，可以试试数组的对象路径方式，需要传递 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 相关 API

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

1.  `data`： 你希望设置的 data
2.  `callback`： 跟 setData 第二个参数一样，引起界面更新渲染完毕后的回调函数

`updataInit(Page, config)`

1.  `Page`： 页面对象，需要在 `app.js` 中调用；
2.  `config` 配置
    -   配置参数 `{ debug: true }`，会将路径化后的 data 打印出来，帮助用户进行调试，默认 false 不开启；
    -   配置参数 `{ arrObjPath: true }`，会开启数组的对象路径方式功能，默认 false 不开启；

`objToPath(Object data, Object config)`

1.  `data`： 你希望设置的 data 对象
2.  `config` 配置
    -   配置参数 `{ arrObjPath: true }`，会开启数组的对象路径方式功能，默认 false 不开启；

> **更多相关免费学习推荐：****微信小程序开发**

以上就是开发微信小程序，我为什么只使用 upData的详细内容，更多请关注知企PROSAAS其它相关文章！

**Categories:** 后端开发

---