詳解微信小程序中的頁面代碼中的模板的封裝
詳解微信小程序中的頁面代碼中的模板的封裝
最近在進行微信小程序中的頁面開發(fā)，其實在c++或者說是js中都會出現(xiàn)這種情況，就是相同的代碼會反復(fù)出現(xiàn)，這就是進行一定的封裝，封裝的好處就是可以是程序中在于減少一定的代碼量，并且可是使代碼結(jié)構(gòu)更加清晰。那今天所要記錄的就是關(guān)于微信小程序中的頁面的模板封裝。
在微信小程序中的文件名都帶有wxml等樣式，在wxml中提供了模板，即可以在模板中定義代碼片段，然后可以在頁面中的不同位置進行調(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主要就是給封裝好的模板進行命名，因為可能模板文件中不一定就只存在這一個模板，所以命名化可以方便區(qū)分哪個是要引入的模板。
wx:for就是微信小程序中的循環(huán)，里面就是要循環(huán)的數(shù)組數(shù)據(jù)，這個值是可以在引入模板的時候進行引入賦值的。
模板的導(dǎo)入：
<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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)前端緩存的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
JavaScript canvas實現(xiàn)帶有陰影的圖形和文字
這篇文章主要為大家詳細介紹了JavaScript canvas實現(xiàn)帶有陰影的圖形和文字，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了javascript實現(xiàn)點擊文本框顯示日期選擇器特效，提高了工作效率，推薦給大家，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
JavaScript 網(wǎng)頁中實現(xiàn)一個計算當(dāng)年還剩多少時間的倒數(shù)計時程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實現(xiàn)一個計算當(dāng)年還剩多少時間的倒數(shù)計時程序,需要的朋友可以參考下2017-01-01
今天小編就為大家分享一篇layui 解決form表單點擊無反應(yīng)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
如何用JavaScript實現(xiàn)動態(tài)修改CSS樣式表
如何用JavaScript實現(xiàn)動態(tài)修改CSS樣式表？下面小編就為大家?guī)硪黄狫avaScript實現(xiàn)動態(tài)修改CSS樣式表的方法。希望對大家有所幫助。一起跟隨小編過來看看吧2016-05-05
剛才一個朋友告訴我他的blog友情鏈接太多了，所以把所有鏈接放到一個DIV中，加了個滾動條，可是他又不想每次別人來看，看到的都是前面幾個鏈接，于是問我有沒有什么辦法，想了一個，呵呵，正好有個辦法2008-11-11
JS操作圖片(增,刪,改) 例子，需要的朋友可以參考一下2013-04-04
javascript中內(nèi)置對象Math的介紹及用法案例
Math對象是一個內(nèi)置對象,具有數(shù)學(xué)常數(shù)和函數(shù)的屬性和方法,不是一個函數(shù)對象,下面這篇文章主要給大家介紹了關(guān)于javascript中內(nèi)置對象Math的介紹及用法案例的相關(guān)資料,需要的朋友可以參考下2022-03-03
javascript字符串替換函數(shù)如何一次性全部替換掉
這篇文章主要介紹了JS字符串替換函數(shù)replace如何一次性全部替換的相關(guān)資料,需要的朋友可以參考下2015-10-10