DDR爱好者之家

详解微信小程序中的页面代码中的模板的封装
站长资源 2024/11/27 佚名
5 1538
DDR爱好者之家 Design By 杰米

详解微信小程序中的页面代码中的模板的封装

    最近在进行微信小程序中的页面开发，其实在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="/UploadFiles/2021-04-02/">


模板的使用：





<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的值


如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米