开发微信小程序，我为什么放弃setData，使用upData

本文转载自微信公众号「前端下午茶」，作者SHERlocked93 。转载本文请联系前端下午茶公众号。 

专注于为中小企业提供网站设计、成都网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业邢台县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了1000多家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

  • wx-updata 版本 0.0.10
  • Github 地址：https://github.com/SHERlocked93/wx-updata
  • 小程序代码片段预览地址：https://developers.weixin.qq.com/s/CcXdO1mc73jD
  • 小程序代码片段代码地址：https://github.com/SHERlocked93/wx-updata-demo

1. setData 不方便的地方

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

 
 
 
    
  
  
  
  1. // 你的 data 
    2. 
  
  
  
  2. data: { 
    3. 
  
  
  
  3.     name: '蜡笔小新', 
    4. 
  
  
  
  4.     info: { height: 140, color: '黄色' } 
    5. 
  
  
  
  5. } 
    6.

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

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

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

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

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

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

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

 
 
 
    
  
  
  
  1. this.upData({ 
    2. 
  
  
  
  2.     info: { 
    3. 
  
  
  
  3.         height: 155, 
    4. 
  
  
  
  4.         desc: [{ age: 12 }, , , { color: '灰色' }] 
    5. 
  
  
  
  5.     } 
    6. 
  
  
  
  6. }) 
    7.

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

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

2. wx-updata 的优点

  1. 支持 setData 对象自动合并，不用写蹩脚的对象路径了 ??
  2. 支持对象中嵌套数组，数组中嵌套对象;
  3. 如果数组的某个值你不希望覆盖，请使用数组空位来跳过这个数组项，比如 [1,,3] 这个数组中间就是数组空位;
  4. 如果数组空位你的 Eslint 报错，可以使用 wx-updata 提供的 Empty 来代替：[1, Empty, 3]

3. wx-updata 安装

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

使用 npm、yarn 安装方式：

 
 
 
    
  
  
  
  1. $ npm i -S wx-updata 
    2. 
  
  
  
  2. # or 
    3. 
  
  
  
  3. $ yarn add wx-updata 
    4.

然后：

把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;

点击微信开发者工具面板工具栏的 工具 - 构建npm;

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

4. wx-updata 使用方法

使用方式一

可以使用直接挂载到 Page 上的方式，这样就可以在 Page 实例中像使用 setData 一样使用 upData 了

 
 
 
    
  
  
  
  1. // app.js 
    2. 
  
  
  
  2. import { updataInit } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径 
    3. 
  
  
  
  3.  
    4. 
  
  
  
  4. App({ 
    5. 
  
  
  
  5.     onLaunch() { 
    6. 
  
  
  
  6.         Page = updataInit(Page, { debug: true }) 
    7. 
  
  
  
  7.     } 
    8. 
  
  
  
  8. }) 
    9. 
  
  
  
  9. // 页面代码中 
    10. 
  
  
  
  10.  
    11. 
  
  
  
  11. this.upData({ 
    12. 
  
  
  
  12.     info: { height: 155 }, 
    13. 
  
  
  
  13.     desc: [{ age: 13 }, '帅哥'], 
    14. 
  
  
  
  14.     family: [, , [, , , { color: '灰色' }]]
    15. 
  
  
  
  15. }) 
    16.

使用方式二

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

 
 
 
    
  
  
  
  1. // 页面代码中 
    2. 
  
  
  
  2.  
    3. 
  
  
  
  3. import { objToPath } from './miniprogram_npm/wx-updata/index'  // 你的库文件路径 
    4. 
  
  
  
  4.  
    5. 
  
  
  
  5. Page({ 
    6. 
  
  
  
  6.     data: { a: { b: 2}, c: [3,4,5]}, 
    7. 
  
  
  
  7.  
    8. 
  
  
  
  8.     // 自己封装一下 
    9. 
  
  
  
  9.     upData(data) { 
    10. 
  
  
  
  10.         return this.setData(objToPath(data)) 
    11. 
  
  
  
  11.     }, 
    12. 
  
  
  
  12.  
    13. 
  
  
  
  13.     // 你的方法中或生命周期函数 
    14. 
  
  
  
  14.     yourMethod() { 
    15. 
  
  
  
  15.         this.upData({ a: { b: 7}, c: [8,,9]}) 
    16. 
  
  
  
  16.     } 
    17. 
  
  
  
  17. }) 
    18.

使用 Empty 代替数组空位

可以使用 wx-updata 提供的 Empty 来代替数组空位，由于 Empty 本质上是一个 Symbol，所以只能使用 wx-updata 导出的，而不能自己新建。

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

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 打印出来，帮助用户进行调试;

objToPath(Object data)

  1. data：你希望设置的 data 对象

原文链接：https://mp.weixin.qq.com/s/QwCnT335M2P_3NIQhY8XZg

网站题目：开发微信小程序，我为什么放弃setData，使用upData
网页地址：http://www.mswzjz.cn/qtweb/news7/503707.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

全网营销推广知识

同城分类信息

四川德阳主机托管　　 　簇桥薇薇新娘　　 　成都网站制作　　 　成都网站推广　　 　移动服务器托管　　 　腾讯云免备案主机　　 　网络口碑营销　　 　卖链接　　 　小程序　　 　虚拟主机　　 　温江电信机房　　 　交互设计　　 　高防服务器租用　　 　成都网站推广公司　　 　东电技服　　 　成都网站改版　　 　手机网站版本　　 　堡垒主机　　 　南充网站建设　　 　普能电气