詳解微信小程序中的頁(yè)面代碼中的模板的封裝
詳解微信小程序中的頁(yè)面代碼中的模板的封裝
最近在進(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ì)本站的支持！
相關(guān)文章
微信小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
本文給大家分享的常用腳本有通過(guò)數(shù)組，拓展字符串拼接容易導(dǎo)致性能的問(wèn)題、頁(yè)面 視口 滾動(dòng)條的位置的輔助函數(shù)、調(diào)節(jié)元素透明度的函數(shù)、獲取鼠標(biāo)位置的幾個(gè)通用的函數(shù)、使用cssdisplay屬性來(lái)切換元素可見(jiàn)性的一組函數(shù)、樣式相關(guān)的通用函數(shù)、獲取元素當(dāng)前的高度和寬度。2015-03-03
layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能）
這篇文章主要介紹了layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能，以搜索功能為例進(jìn)行講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了使用zrender.js繪制體溫單效果,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-10-10
JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法
json數(shù)據(jù)在ajax實(shí)現(xiàn)異步交互時(shí)起到了很重要的作用，他可以返回請(qǐng)求的數(shù)據(jù)，然后利用客戶(hù)端的js進(jìn)行解析，這一點(diǎn)體現(xiàn)出js的強(qiáng)大，本文介紹JS解析json數(shù)據(jù)并將json字符串轉(zhuǎn)化為數(shù)組的實(shí)現(xiàn)方法，需要了解的朋友可以參考下2012-12-12
2006-09-09
原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果詳解
這篇文章主要介紹了原生JS實(shí)現(xiàn)逼真的圖片3D旋轉(zhuǎn)效果,結(jié)合實(shí)例形式詳細(xì)分析了javascript實(shí)現(xiàn)圖片3D旋轉(zhuǎn)相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2019-02-02
js客戶(hù)端快捷鍵管理類(lèi)的較完整實(shí)現(xiàn)和應(yīng)用
js客戶(hù)端快捷鍵管理類(lèi)的較完整實(shí)現(xiàn)和應(yīng)用,需要的朋友可以參考下。2010-06-06
JavaScript對(duì)象詳解之對(duì)象屬性的添加
這篇文章主要給大家介紹了關(guān)于JavaScript對(duì)象詳解之js對(duì)象屬性的添加的相關(guān)資料,在JavaScript中對(duì)象是通過(guò)鍵值對(duì)來(lái)存儲(chǔ)數(shù)據(jù)的一種數(shù)據(jù)類(lèi)型,可以通過(guò)直接給對(duì)象添加屬性的方式來(lái)增加對(duì)象的屬性,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇解決layer彈出層中表單不起作用的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09