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

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

<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的值
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！