微信小程序開發(fā)純數(shù)據(jù)字段
微信小程序可以使用純數(shù)據(jù)字段來提升頁面更新性能,本文將圍繞純數(shù)據(jù)字段展開討論。
組件中的純數(shù)據(jù)字段
在組件中,某些不需要展示在界面上的數(shù)據(jù)字段可以指定為純數(shù)據(jù)字段,它們只被記錄在this.data中并不參與任何界面渲染過程。通過在Component構造器的options定義段中指定pureDataPattern為正則表達式,合法命名的字段將成為純數(shù)據(jù)字段。
示例代碼:
Component({
options: {
pureDataPattern: /^_/ // 指定所有 _ 開頭的數(shù)據(jù)字段為純數(shù)據(jù)字段
},
data: {
a: true, // 普通數(shù)據(jù)字段
_b: true, // 純數(shù)據(jù)字段
},
methods: {
myMethod() {
this.data._b // 純數(shù)據(jù)字段可以在 this.data 中獲取
this.setData({
c: true, // 普通數(shù)據(jù)字段
_d: true, // 純數(shù)據(jù)字段
})
}
}
})
上述組件中的純數(shù)據(jù)字段不會出現(xiàn)在WXML中進行展示。
組件屬性中的純數(shù)據(jù)字段
除了在組件中定義外,屬性也可以使用純數(shù)據(jù)字段,但不能直接用于組件自身的 WXML 中,屬性監(jiān)聽器永遠不會觸發(fā)。從小程序基礎庫版本2.10.1開始,還可以在頁面或自定義組件的json文件中配置pureDataPattern,此時其值應當寫成字符串形式。
示例代碼:
Component({
options: {
pureDataPattern: /^_/
},
properties: {
a: Boolean,
_b: {
type: Boolean,
observer() {
// 不要這樣做!這個 observer 永遠不會被觸發(fā)
}
},
}
})
使用數(shù)據(jù)監(jiān)聽器監(jiān)聽純數(shù)據(jù)字段
通過使用數(shù)據(jù)監(jiān)聽器,可以對純數(shù)據(jù)字段進行監(jiān)聽并響應其變化改變界面表現(xiàn)。
示例代碼:
Component({
options: {
pureDataPattern: /^timestamp$/ // 將 timestamp 屬性指定為純數(shù)據(jù)字段
},
properties: {
timestamp: Number,
},
observers: {
timestamp: function () {
// timestamp 被設置時,將它展示為可讀時間字符串
var timeString = new Date(this.data.timestamp).toLocaleString()
this.setData({
timeString: timeString
})
}
}
})
<view>{{timeString}}</view>
-
B2B2C多用戶商城系統(tǒng)支持企業(yè)自營與商戶入駐模式共存 會員一站式精細化營銷工具 多用戶分銷,帶來爆發(fā)式增長
系統(tǒng)支持平臺自營+供應商店鋪共存的經(jīng)營模式(類天貓&京東模式),幫助企業(yè)打造生態(tài)級商業(yè)平臺為目的的電子商務系統(tǒng)。
免費試用系統(tǒng) -
B2B2B電商交易系統(tǒng)優(yōu)化供應鏈協(xié)作 授信及賬期支付 商品按照數(shù)量階梯設價
全渠道訂貨/采購及經(jīng)銷商管理數(shù)字化系統(tǒng),實現(xiàn)供應鏈整合和交易便捷化。
免費試用系統(tǒng) -
S2B2B電商交易系統(tǒng)供銷一體化,提高市場集中度 集團管控一體化,有效實現(xiàn)供需匹配 移動應用一體化,提高運營綜合效率
上下游資源整合數(shù)字化解決方案,賦能產(chǎn)業(yè)供應鏈,構建產(chǎn)業(yè)互聯(lián)網(wǎng)生態(tài)體系。
免費試用系統(tǒng)
