您好,登錄后才能下訂單哦!
詳解微信小程序中的頁面代碼中的模板的封裝
最近在進(jìn)行微信小程序中的頁面開發(fā),其實在c++或者說是js中都會出現(xiàn)這種情況,就是相同的代碼會反復(fù)出現(xiàn),這就是進(jìn)行一定的封裝,封裝的好處就是可以是程序中在于減少一定的代碼量,并且可是使代碼結(jié)構(gòu)更加清晰。那今天所要記錄的就是關(guān)于微信小程序中的頁面的模板封裝。
在微信小程序中的文件名都帶有wxml等樣式,在wxml中提供了模板,即可以在模板中定義代碼片段,然后可以在頁面中的不同位置進(jìn)行調(diào)用,模板的定義:
<templatename="products"> <blockwx:for="{{productsData}}"> <view class="product-desc"> <view class="product-cun">有貨</view> <view class="product-name">{{item.name}}</view> <view class="product-price">¥{{item.price}}</view> </view> </block> </template>
name主要就是給封裝好的模板進(jìn)行命名,因為可能模板文件中不一定就只存在這一個模板,所以命名化可以方便區(qū)分哪個是要引入的模板。
wx:for就是微信小程序中的循環(huán),里面就是要循環(huán)的數(shù)組數(shù)據(jù),這個值是可以在引入模板的時候進(jìn)行引入賦值的。
模板的導(dǎo)入:
<import src=""/>---要找到要引入的模板文件路徑,這里面的路徑寫相對路徑會很方便
模板的使用:
<template is="products" data="{{productsData}}"/>
is的作用就是在模板文件中選擇要使用的具體是哪個模板
data主要就是模板中要使用的數(shù)組數(shù)據(jù)
這里面就是出現(xiàn)一個問題,由于你的模板文件中的數(shù)組是寫死的,使用的是productData,那么在你引入模板之后對里面的數(shù)據(jù)進(jìn)行賦值使用的時候可能會出現(xiàn)
VM1171:2 ./pages/theme/theme.wxml Bad attr 'data' with message 6 | </view> 7 | <view class="theme-products"> > 8 | <template is="products" data="{{theme_products[themeid]}}"/> | ^ 9 | </view> 10 | </view> 11 |
像這種在模板中的數(shù)據(jù)被定義死的話,也是可以有解決辦法的,我所使用的辦法就是給已經(jīng)被賦值好的數(shù)組進(jìn)行重新賦值
可以在新的頁面js中對productsData數(shù)組進(jìn)行空的初始化,然后在onLoad第一次進(jìn)行頁面,進(jìn)行加載頁面的時候給予賦值,data.kind_products是這個頁面要使用到的數(shù)組對象
1)js文件中的data{productsData:null}
2)第一次進(jìn)入頁面的時候
onLoad: function (options) { this.setData({ productsData: this.data.kind_products[0]}); }
setData的作用就是用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層也就是頁面上,同時改變this.data的值
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。