乐趣区

关于前端:开发微信小程序我为什么放弃-setData使用-upData

鉴于在下应用微信小程序开发时应用 setData 的糟糕体验,开发了个库函数 wx-updata,我的项目上线之后,我把这个自用的库函数整顿放到 Github 上开源进去 wx-updata,这个库函数在开发的时候对我很有帮忙,心愿也能够帮到大家 ????

如果大家在应用中遇到了问题,能够给我提 pr,提 issue,一起来改善小程序开发体验加油~

  1. wx-updata 版本 0.0.10
  2. Github 地址:https://github.com/SHERlocked…
  3. 小程序代码片段预览地址:https://developers.weixin.qq….
  4. 小程序代码片段代码地址:https://github.com/SHERlocked…

1. setData 不不便的中央

你在应用 setData 的时候,是不是有时候感觉很好受,举个简略的例子:

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

如果要批改 info.height 为 155,应用 setData 要怎么做呢:

// 这样会把 info 里其余属性整不见了
this.setData({info: { height: 155} })

// 你须要取出 info 对象,批改后整个 setData
const {info} = this.data
info.height = 155
this.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 = 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-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 拷贝到我的项目里应用

应用 npmyarn 装置形式:

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

而后:

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

构建后胜利生成 miniprogram_npm 文件夹就能够失常应用了

4. wx-updata 应用办法

应用形式一

能够应用间接挂载到 Page 上的形式,这样就能够在 Page 实例中像应用 setData 一样应用 upData

// 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-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: '灰色'}]]
})

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 对象

网上的帖子大多深浅不一,甚至有些前后矛盾,在下的文章都是学习过程中的总结,如果发现错误,欢送留言指出~

参考文档:

  1. 小程序开发实用技巧——扩大 Page 页面对象 – 掘金

PS:自己博客地址 Github – SHERlocked93/blog,也欢送大家关注我的公众号【前端下午茶】,一起加油吧~

另外能够退出「前端下午茶交换群」微信群,长按辨认上面二维码即可加我好友,备注 加群,我拉你入群~

退出移动版