建站
咨詢
售后
建站咨詢
新聞中心
本文轉(zhuǎn)載自微信公眾號「前端下午茶」，作者SHERlocked93 。轉(zhuǎn)載本文請聯(lián)系前端下午茶公眾號。
專注于為中小企業(yè)提供網(wǎng)站設計、成都網(wǎng)站建設服務,電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)邢臺縣免費做網(wǎng)站提供優(yōu)質(zhì)的服務。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
鑒于在下使用微信小程序開發(fā)時使用 setData 的蹩腳體驗，開發(fā)了個庫函數(shù) wx-updata，項目上線之后，我把這個自用的庫函數(shù)整理放到 Github 上開源出來 wx-updata，這個庫函數(shù)在開發(fā)的時候?qū)ξ液苡袔椭?，希望也可以幫到大???
如果大家在使用中遇到了問題，可以給我提 pr，提 issue，一起來改善小程序開發(fā)體驗加油～
- 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 的時候，是不是有時候覺得很難受，舉個簡單的例子：
- // 你的 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 是個很大的對象，要把比較深且不同的對象、數(shù)組項挨個改變：
- data: {
- name: '蠟筆小新',
- info: {
- height: 140, color: '黃色',
- desc: [{ age: 8 }, '最喜歡大象之歌', '靚仔', { dog: '小白', color: '白色' }]
- }
- }
比如某個需求，需要把 info.height 改為 155，同時改變 info.desc 數(shù)組的第 0 項的 age 為 12，第 3 項的 color 為灰色呢?
- // 先取出要改變的對象，改變數(shù)字后 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': '灰色'
- })
上面這兩種方法，是我們平常小程序里經(jīng)常用的，和其他 Web 端的框架相比，就很蹩腳，一種濃濃的半成品感撲面而來，有沒有這樣一個方法：
- this.upData({
- info: {
- height: 155,
- desc: [{ age: 12 }, , , { color: '灰色' }]
- }
- })
這個方法會幫我們深度改變嵌套對象里對應的屬性值，跳過數(shù)組項里不想改變的，只設置我們提供了的屬性值、數(shù)組項，豈不是省略了一大堆蹩腳的代碼，而且可讀性也極佳呢。
這就是為什么我在上線的項目中使用 wx-updata，而不是 setData
2. wx-updata 的優(yōu)點
- 支持 setData 對象自動合并，不用寫蹩腳的對象路徑了 ??
- 支持對象中嵌套數(shù)組，數(shù)組中嵌套對象;
- 如果數(shù)組的某個值你不希望覆蓋，請使用數(shù)組空位來跳過這個數(shù)組項，比如 [1,,3] 這個數(shù)組中間就是數(shù)組空位;
- 如果數(shù)組空位你的 Eslint 報錯，可以使用 wx-updata 提供的 Empty 來代替：[1, Empty, 3]
3. wx-updata 安裝
你也可以直接把 dist 目錄下的 wx-updata.js 拷貝到項目里使用
使用 npm、yarn 安裝方式：
- $ npm i -S wx-updata
- # or
- $ yarn add wx-updata
然后：
把微信開發(fā)者工具面板右側(cè)的 詳情 - 本地設置 - 使用npm模塊 按鈕打開;
點擊微信開發(fā)者工具面板工具欄的 工具 - 構(gòu)建npm;
構(gòu)建后成功生成 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))
- },
- // 你的方法中或生命周期函數(shù)
- yourMethod() {
- this.upData({ a: { b: 7}, c: [8,,9]})
- }
- })
使用 Empty 代替數(shù)組空位
可以使用 wx-updata 提供的 Empty 來代替數(shù)組空位，由于 Empty 本質(zhì)上是一個 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)
- data：你希望設置的 data
- callback：跟 setData 第二個參數(shù)一樣，引起界面更新渲染完畢后的回調(diào)函數(shù)
updataInit(Page, config)
- Page：頁面對象，需要在 app.js 中調(diào)用;
- config：若提供配置參數(shù) { debug: true }，會將路徑化后的 data 打印出來，幫助用戶進行調(diào)試;
objToPath(Object data)
- data：你希望設置的 data 對象
原文鏈接：https://mp.weixin.qq.com/s/QwCnT335M2P_3NIQhY8XZg
網(wǎng)站欄目：開發(fā)微信小程序，我為什么放棄setData，使用upData
網(wǎng)址分享：http://www.5511xx.com/article/cdggpse.html
