開發(fā)微信小程序，我為什么只使用upData

鑒于在下使用微信小程序開發(fā)時使用 setData的蹩腳體驗，開發(fā)了個庫函數(shù) wx-updata，項目上線之后，我把這個自用的庫函數(shù)整理放到 Github 上開源出來 wx-updata，這個庫函數(shù)在開發(fā)的時候?qū)ξ液苡袔椭?，希望也可以幫到大?/p>

創(chuàng)新互聯(lián)長期為千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為蔡甸企業(yè)提供專業(yè)的網(wǎng)站設(shè)計制作、做網(wǎng)站，蔡甸網(wǎng)站改版等技術(shù)服務(wù)。擁有10多年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

如果大家在使用中遇到了問題，可以給我提 pr，提 issue，一起來改善小程序開發(fā)體驗～

wx-updata版本 0.0.10

Github 地址： github.com/SHERlocked9…

小程序代碼片段預(yù)覽地址： developers.weixin.qq.com/s/CcXdO1mc7…

小程序代碼片段代碼地址： github.com/SHERlocked9…

1. setData 不方便的地方

你在使用 setData的時候，是不是有時候覺得很難受，舉個簡單的例子：

// 你的 datadata: {    name: '蠟筆小新',    info: { height: 140, color: '黃色' }
}復(fù)制代碼

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

// 這樣會把 info 里其他屬性整不見了this.setData({ info: { height: 155 } })// 你需要取出 info 對象，修改后整個 setDataconst { info } = this.data
info.height = 155this.setData({ info })復(fù)制代碼

似乎并不太復(fù)雜，但如果 data是個很大的對象，要把比較深且不同的對象、數(shù)組項挨個改變：

data: {    name: '蠟筆小新',    info: {        height: 140, color: '黃色',        desc: [{ age: 8 }, '最喜歡大象之歌', '靚仔', { dog: '小白', color: '白色' }]
    }
}復(fù)制代碼

比如某個需求，需要把 info.height改為 155，同時改變 info.desc數(shù)組的第 0 項的 age為 12，第 3 項的 color為灰色呢？

// 先取出要改變的對象，改變數(shù)字后 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': '灰色'})復(fù)制代碼

上面這兩種方法，是我們平常小程序里經(jīng)常用的，和其他 Web 端的框架相比，就很蹩腳，一種濃濃的半成品感撲面而來，有沒有這樣一個方法：

this.upData({    info: {        height: 155,        desc: [{ age: 12 }, , , { color: '灰色' }]
    }
})復(fù)制代碼

這個方法會幫我們深度改變嵌套對象里對應(yīng)的屬性值，跳過數(shù)組項里不想改變的，只設(shè)置我們提供了的屬性值、數(shù)組項，豈不是省略了一大堆蹩腳的代碼，而且可讀性也極佳呢。

這就是為什么我在上線的項目中使用 wx-updata，而不是 setData

wx-updata 的原理其實很簡單，舉個例子：

this.upData({    info: {        height: 155,        desc: [{ age: 12 }]
    }
})// 會被自動轉(zhuǎn)化為下面這種格式，// this.setData({//    'info.height': 155,//    'info.desc[0].age': 12,// })復(fù)制代碼

原來這個轉(zhuǎn)化工作是要我們自己手動來做，現(xiàn)在 wx-updata 幫我們做了，豈不美哉！

下面介紹一下 wx-updata 的優(yōu)點和主要使用方法～

2. wx-updata 的優(yōu)點支持 setData對象自動合并，不用寫蹩腳的對象路徑了支持對象中嵌套數(shù)組，數(shù)組中嵌套對象；如果數(shù)組的某個值你不希望覆蓋，請使用數(shù)組空位來跳過這個數(shù)組項，比如 [1,,3]這個數(shù)組中間就是數(shù)組空位；如果數(shù)組空位你的 Eslint報錯，可以使用 wx-updata提供的 Empty 來代替： [1, Empty, 3]如果數(shù)組空位你不習(xí)慣，或者不樂意數(shù)逗號個數(shù)，可以試試數(shù)組的對象路徑方式 [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復(fù)制代碼

然后：

把微信開發(fā)者工具面板右側(cè)的 詳情 - 本地設(shè)置 - 使用npm模塊按鈕打開；點擊微信開發(fā)者工具面板工具欄的 工具 - 構(gòu)建npm；

構(gòu)建后成功生成 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 })
    }
})復(fù)制代碼

// 頁面代碼中this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帥哥'],    family: [, , [, , , { color: '灰色' }]]
})復(fù)制代碼

使用方式二

有的框架可能在 Page對象上進(jìn)行了進(jìn)一步修改，直接替換 Page的方式可能就不太好了，wx-updata同樣暴露了工具方法，用戶可以在頁面代碼中直接使用工具方法進(jìn)行處理：

// 頁面代碼中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]})
    }
})復(fù)制代碼

使用 Empty 代替數(shù)組空位

可以使用 wx-updata提供的 Empty 來代替數(shù)組空位，由于 Empty 本質(zhì)上是一個 Symbol，所以只能使用 wx-updata導(dǎo)出的，而不能自己新建。

// 頁面代碼中import { Empty } from './miniprogram_npm/wx-updata/index'this.upData({    info: { height: 155 },    desc: [{ age: 13 }, '帥哥'],    family: [Empty, Empty, [Empty, Empty, Empty, { color: '灰色' }]]
})復(fù)制代碼

數(shù)組的對象路徑方式

如果數(shù)組空位你不習(xí)慣，或者不樂意數(shù)逗號個數(shù)，可以試試數(shù)組的對象路徑方式，需要傳遞 config 的配置 {arrObjPath: true}

// 頁面代碼中import { Empty } from './miniprogram_npm/wx-updata/index'// 原來的方式this.upData({    info: { height: 155 },    desc: [, '靚仔'],    family: [, , [, , , { color: '灰色' }]]
})// 使用數(shù)組路徑方式this.upData({    info: { height: 155 },    desc: {'[1]': '靚仔'},    family: { '[2]': { '[3]': { color: '灰色' }
})復(fù)制代碼

5. wx-updata 相關(guān) API

Page.prototype.upData(Object data, Function callback)

data：你希望設(shè)置的 datacallback：跟 setData 第二個參數(shù)一樣，引起界面更新渲染完畢后的回調(diào)函數(shù)

updataInit(Page, config)

Page：頁面對象，需要在 app.js中調(diào)用；config配置配置參數(shù) { debug: true }，會將路徑化后的 data 打印出來，幫助用戶進(jìn)行調(diào)試，默認(rèn) false 不開啟；配置參數(shù) { arrObjPath: true }，會開啟數(shù)組的對象路徑方式功能，默認(rèn) false 不開啟；

objToPath(Object data, Object config)

data：你希望設(shè)置的 data 對象config配置配置參數(shù) { arrObjPath: true }，會開啟數(shù)組的對象路徑方式功能，默認(rèn) false 不開啟；

更多相關(guān)免費學(xué)習(xí)推薦：微信小程序開發(fā)

網(wǎng)站名稱：開發(fā)微信小程序，我為什么只使用upData
鏈接分享：http://muchs.cn/article26/cghgcg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、虛擬主機、品牌網(wǎng)站設(shè)計、網(wǎng)站內(nèi)鏈、App開發(fā)、網(wǎng)站收錄

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

開發(fā)微信小程序，我為什么只使用upData

開發(fā)微信小程序，我為什么只使用upData