最近在进行微信小程序中的页面开发,其实在c++或者说是js中都会出现这种情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处就是可以是程序中在于减少一定的代码量,并且可是使代码结构更加清晰。那今天所要记录的就是关于微信小程序中的页面的模板封装。
在微信小程序中的文件名都带有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主要就是给封装好的模板进行命名,因为可能模板文件中不一定就只存在这一个模板,所以命名化可以方便区分哪个是要引入的模板。
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的值
微信小程序模板封装
发布:2021-06-05 08:45浏览: 次来源:网络 作者:tianshu
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08