【移動(dòng)應(yīng)用開(kāi)發(fā)技術(shù)】開(kāi)發(fā)微信小程序?yàn)槭裁粗皇褂胾pData

這篇文章主要介紹了開(kāi)發(fā)微信小程序?yàn)槭裁粗皇褂胾pData，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。鑒于在下使用微信小程序開(kāi)發(fā)時(shí)使用setData的蹩腳體驗(yàn)，開(kāi)發(fā)了個(gè)庫(kù)函數(shù)wx-updata，項(xiàng)目上線之后，我把這個(gè)自用的庫(kù)函數(shù)整理放到Github上開(kāi)源出來(lái)wx-updata，這個(gè)庫(kù)函數(shù)在開(kāi)發(fā)的時(shí)候?qū)ξ液苡袔椭?，希望也可以幫到大家如果大家在使用中遇到了?wèn)題，可以給我提pr，提issue，一起來(lái)改善小程序開(kāi)發(fā)體驗(yàn)～wx-updata版本0.0.10Github地址：/SHERlocked9…小程序代碼片段預(yù)覽地址：/s/CcXdO1mc7…小程序代碼片段代碼地址：/SHERlocked9…1.setData不方便的地方你在使用setData的時(shí)候，是不是有時(shí)候覺(jué)得很難受，舉個(gè)簡(jiǎn)單的例子：//

你的

datadata:

{

name:

'蠟筆小新',

info:

{

height:

140,

color:

'黃色'

}

}復(fù)制代碼如果要修改info.height為155，使用setData要怎么做呢：//

這樣會(huì)把

info

里其他屬性整不見(jiàn)了this.setData({

info:

{

height:

155

}

})//

你需要取出

info

對(duì)象，修改后整個(gè)

setDataconst

{

info

}

=

this.data

info.height

=

155this.setData({

info

})復(fù)制代碼似乎并不太復(fù)雜，但如果data是個(gè)很大的對(duì)象，要把比較深且不同的對(duì)象、數(shù)組項(xiàng)挨個(gè)改變：data:

{

name:

'蠟筆小新',

info:

{

height:

140,

color:

'黃色',

desc:

[{

age:

8

},

'最喜歡大象之歌',

'靚仔',

{

dog:

'小白',

color:

'白色'

}]

}

}復(fù)制代碼比如某個(gè)需求，需要把info.height改為155，同時(shí)改變info.desc數(shù)組的第0項(xiàng)的age為12，第3項(xiàng)的color為灰色呢？//

先取出要改變的對(duì)象，改變數(shù)字后

setData

回去const

{

info

}

=

this.data

info.height

=

155info.desc[0].age

=

12info.desc[3].color

=

'灰色'this.setData({

info

})//

或者像某些文章里介紹的，這樣可讀性差，也不太實(shí)用this.setData({

'info.height':

155,

'info.desc[0].age':

12,

'info.desc[3].color':

'灰色'})復(fù)制代碼上面這兩種方法，是我們平常小程序里經(jīng)常用的，和其他Web端的框架相比，就很蹩腳，一種濃濃的半成品感撲面而來(lái)，有沒(méi)有這樣一個(gè)方法：this.upData({

info:

{

height:

155,

desc:

[{

age:

12

},

,

,

{

color:

'灰色'

}]

}

})復(fù)制代碼這個(gè)方法會(huì)幫我們深度改變嵌套對(duì)象里對(duì)應(yīng)的屬性值，跳過(guò)數(shù)組項(xiàng)里不想改變的，只設(shè)置我們提供了的屬性值、數(shù)組項(xiàng)，豈不是省略了一大堆蹩腳的代碼，而且可讀性也極佳呢。這就是為什么我在上線的項(xiàng)目中使用wx-updata，而不是setDatawx-updata的原理其實(shí)很簡(jiǎn)單，舉個(gè)例子：this.upData({

info:

{

height:

155,

desc:

[{

age:

12

}]

}

})//

會(huì)被自動(dòng)轉(zhuǎn)化為下面這種格式，//

this.setData({//

'info.height':

155,//

'info.desc[0].age':

12,//

})復(fù)制代碼原來(lái)這個(gè)轉(zhuǎn)化工作是要我們自己手動(dòng)來(lái)做，現(xiàn)在wx-updata幫我們做了，豈不美哉！下面介紹一下wx-updata的優(yōu)點(diǎn)和主要使用方法～2.wx-updata的優(yōu)點(diǎn)支持setData對(duì)象自動(dòng)合并，不用寫(xiě)蹩腳的對(duì)象路徑了支持對(duì)象中嵌套數(shù)組，數(shù)組中嵌套對(duì)象；如果數(shù)組的某個(gè)值你不希望覆蓋，請(qǐng)使用數(shù)組空位來(lái)跳過(guò)這個(gè)數(shù)組項(xiàng)，比如[1,,3]這個(gè)數(shù)組中間就是數(shù)組空位；如果數(shù)組空位你的Eslint報(bào)錯(cuò)，可以使用wx-updata提供的Empty來(lái)代替：[1,Empty,3]如果數(shù)組空位你不習(xí)慣，或者不樂(lè)意數(shù)逗號(hào)個(gè)數(shù)，可以試試數(shù)組的對(duì)象路徑方式[1,,3]->{'[0]':1,'[2]':3}3.wx-updata安裝你也可以直接把dist目錄下的wx-updata.js拷貝到項(xiàng)目里使用你也可以直接把dist目錄下的wx-updata.js拷貝到項(xiàng)目里使用使用npm、yarn安裝方式：$

npm

i

-S

wx-updata#

or$

yarn

add

wx-updata復(fù)制代碼然后：把微信開(kāi)發(fā)者工具面板右側(cè)的詳情-本地設(shè)置-使用npm模塊按鈕打開(kāi)；點(diǎn)擊微信開(kāi)發(fā)者工具面板工具欄的工具-構(gòu)建npm；構(gòu)建后成功生成miniprogram_npm文件夾就可以正常使用了4.wx-updata使用方法使用方式一可以使用直接掛載到Page上的方式，這樣就可以在Page實(shí)例中像使用setData一樣使用upData了//

app.jsimport

{

updataInit

}

from

'./miniprogram_npm/wx-updata/index'

//

你的庫(kù)文件路徑App({

onLaunch()

{

Page

=

updataInit(Page,

{

debug:

true

})

}

})復(fù)制代碼//

頁(yè)面代碼中this.upData({

info:

{

height:

155

},

desc:

[{

age:

13

},

'帥哥'],

family:

[,

,

[,

,

,

{

color:

'灰色'

}]]

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

頁(yè)面代碼中import

{

objToPath

}

from

'./miniprogram_npm/wx-updata/index'

//

你的庫(kù)文件路徑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來(lái)代替數(shù)組空位，由于Empty本質(zhì)上是一個(gè)Symbol，所以只能使用wx-updata導(dǎo)出的，而不能自己新建。//

頁(yè)面代碼中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ù)組的對(duì)象路徑方式如果數(shù)組空位你不習(xí)慣，或者不樂(lè)意數(shù)逗號(hào)個(gè)數(shù)，可以試試數(shù)組的對(duì)象路徑方式，需要傳遞config的配置{arrObjPath:true}//

頁(yè)面代碼中import

{

Empty

}

from

'./miniprogram_npm/wx-updata/index'//

原來(lái)的方式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)APIPtotype.upData(Objectdata,Functioncallback)data：你希望設(shè)置的datacallback：跟setData第二個(gè)參數(shù)一樣，引起界面更新渲染完畢后的回調(diào)函數(shù)updataInit(Page,config)Page：頁(yè)面對(duì)象，需要在app.js中調(diào)用；config配置配置參數(shù){debug:true}，會(huì)將路徑化