微信小程序中页面代码如何进行模板封装?
在进行微信小程序中的页面开发中,经常会出现以下情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处可以让程序中在于减少一定的代码数量,并且可是使代码结构更加清晰。那么本文就微信小程序中页面代码如何进行模板封装?这个问题给大家详细的解答一下。
一般在微信小程序中的文件名中都带有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>
wx:for 是微信小程序中的循环,里面就是要循环的数组数据,这个值是可以在引入模板的时候进行引入赋值的。
模板的导入:
<import src=""/>---要找到要引入的模板文件路径,这里面的路径写相对路径会很方便
<template is="products" data="{{productsData}}"/>
is 的作用就是在模板文件中选择要使用的具体是哪个模板。 data主要就是模板中要使用的数组数据。
这里面就是出现一个问题,由于你的模板文件中的数组是写死的,使用的是productData,那么在你引入模板之后对里面的数据进行赋值使用的时候可能会出现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 |
模板中的数据被定义死的话,也是可以有解决办法的,本文使用的办法是给已经被赋值好的数组进行重新赋值。可以在新的页面js中对productsData数组进行空的初始化,然后在onLoad第一次进行页面,进行加载页面的时候给予赋值,data.kind_products是这个页面要使用到的数组对象。
1)js文件中的data{productsData:null}
2)第一次进入页面的时候
onLoad: function (options) {
this.setData({ productsData: this.data.kind_products[0]});
}
setData的作用就是用于将数据从逻辑层发送到视图层也就是页面上,同时改变this.data的值。
以上就是微信小程序中页面代码如何进行模板封装问题的详细解答。
版权声明: 本文由新乡seo凯瑞博客发布,转载请保留链接: https://www.seokr.cn/wxkf/86.html
- 上一篇:微信如何借势营销?
- 下一篇:微信网页开发中数据库的连接问题详解