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

更新時間：2017年10月12日 11:24:09 作者：京雒塵

這篇文章主要介紹了詳解微信小程序中的頁面代碼中的模板的封裝的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下

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

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

在微信小程序中的文件名都帶有wxml等樣式，在wxml中提供了模板，即可以在模板中定義代碼片段，然后可以在頁面中的不同位置進行調用，模板的定義：

<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主要就是給封裝好的模板進行命名，因為可能模板文件中不一定就只存在這一個模板，所以命名化可以方便區(qū)分哪個是要引入的模板。

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

模板的導入：

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

模板的使用：

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

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

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

這里面就是出現(xiàn)一個問題，由于你的模板文件中的數(shù)組是寫死的，使用的是productData，那么在你引入模板之后對里面的數(shù)據(jù)進行賦值使用的時候可能會出現(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ù)組進行重新賦值
可以在新的頁面js中對productsData數(shù)組進行空的初始化，然后在onLoad第一次進行頁面，進行加載頁面的時候給予賦值，data.kind_products是這個頁面要使用到的數(shù)組對象

1）js文件中的data{productsData:null}
2）第一次進入頁面的時候

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

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

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

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具