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

站长资源 2024/11/28 佚名

2 0 1

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

最近在进行微信小程序中的页面开发，其实在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的值
如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

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

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

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

AngularJS 中的数据源的循环输出

BootStrap Validator 根据条件在JS中添加或移除校验操作

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

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接