全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[云南网站seo优化公司]开发微信小程序,我为什么只使用 upData

  鉴于在下使用微信小程序开发时使用 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○◆▷,[云南网站seo优化公司]使用 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 拷贝到项目里使用

  

 

  使用 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.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 配置

 

  objToPath(Object data, Object config)

  

  1. data: 你希望设置的 data 对象
  2. config 配置
    • 配置参数 { arrObjPath: true },会开启数组的对象路径方式功能……,默认 false 不开启;

 

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

  

 

  以上就是开发微信小程序,我为什么只使用 upData的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[云南网站seo优化公司]开发微信小程序,我为什么只使用 upData

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。