开发微信小程序,我为什么只使用 upData

发布时间:2024-03-10 点击:147
鉴于在下使用微信小程序开发时使用 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.datainfo.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.datainfo.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 的优点支持 setdata 对象自动合并,不用写蹩脚的对象路径了 支持对象中嵌套数组,数组中嵌套对象;如果数组的某个值你不希望覆盖,请使用数组空位来跳过这个数组项,比如 [1,,3] 这个数组中间就是数组空位;如果数组空位你的 eslint 报错,可以使用 wx-updata 提供的 empty 来代替: [1, empty, 3]如果数组空位你不习惯,或者不乐意数逗号个数,可以试试数组的对象路径方式 [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复制代码然后:
把微信开发者工具面板右侧的 详情 - 本地设置 - 使用npm模块 按钮打开;点击微信开发者工具面板工具栏的 工具 - 构建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]&

域名解析报错-域名及账户问题
这边提升后还是超负荷达到百分之
这是啥意思啊客服-域名及账户问题
安畅程小中:搏浪云时代,做全球顶尖云管理服务商
在阿里云购买的服务器在哪里找到
阿里云轻量服务器添加其他网站
服务器蓝屏,-云服务器问题
linux redhat7.0 zabbix4.0的安装和部署