詳解微信小程序中的頁(yè)面代碼中的模板的封裝

黃陵網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,黃陵網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為黃陵上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的黃陵做網(wǎng)站的公司定做！

    最近在進(jìn)行微信小程序中的頁(yè)面開(kāi)發(fā)，其實(shí)在c++或者說(shuō)是js中都會(huì)出現(xiàn)這種情況，就是相同的代碼會(huì)反復(fù)出現(xiàn)，這就是進(jìn)行一定的封裝，封裝的好處就是可以是程序中在于減少一定的代碼量，并且可是使代碼結(jié)構(gòu)更加清晰。那今天所要記錄的就是關(guān)于微信小程序中的頁(yè)面的模板封裝。

         在微信小程序中的文件名都帶有wxml等樣式，在wxml中提供了模板，即可以在模板中定義代碼片段，然后可以在頁(yè)面中的不同位置進(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)行命名，因?yàn)榭赡苣０逦募胁灰欢ň椭淮嬖谶@一個(gè)模板，所以命名化可以方便區(qū)分哪個(gè)是要引入的模板。

wx:for就是微信小程序中的循環(huán)，里面就是要循環(huán)的數(shù)組數(shù)據(jù)，這個(gè)值是可以在引入模板的時(shí)候進(jìn)行引入賦值的。

模板的導(dǎo)入：

<import src=""/>---要找到要引入的模板文件路徑，這里面的路徑寫(xiě)相對(duì)路徑會(huì)很方便

模板的使用：

<template 
is="products" 
data="{{productsData}}"/>

is的作用就是在模板文件中選擇要使用的具體是哪個(gè)模板

data主要就是模板中要使用的數(shù)組數(shù)據(jù)

這里面就是出現(xiàn)一個(gè)問(wèn)題，由于你的模板文件中的數(shù)組是寫(xiě)死的，使用的是productData，那么在你引入模板之后對(duì)里面的數(shù)據(jù)進(jìn)行賦值使用的時(shí)候可能會(huì)出現(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ù)被定義死的話(huà)，也是可以有解決辦法的，我所使用的辦法就是給已經(jīng)被賦值好的數(shù)組進(jìn)行重新賦值
可以在新的頁(yè)面js中對(duì)productsData數(shù)組進(jìn)行空的初始化，然后在onLoad第一次進(jìn)行頁(yè)面，進(jìn)行加載頁(yè)面的時(shí)候給予賦值，data.kind_products是這個(gè)頁(yè)面要使用到的數(shù)組對(duì)象

1）js文件中的data{productsData:null}
2）第一次進(jìn)入頁(yè)面的時(shí)候

onLoad: function (options) {
  this.setData({ productsData: this.data.kind_products[0]});
}

setData的作用就是用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層也就是頁(yè)面上，同時(shí)改變this.data的值

如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

網(wǎng)頁(yè)標(biāo)題：詳解微信小程序中的頁(yè)面代碼中的模板的封裝
網(wǎng)頁(yè)網(wǎng)址：http://chinadenli.net/article26/gjcgjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)公司、外貿(mào)網(wǎng)站建設(shè)、Google、商城網(wǎng)站

廣告

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