新乡SEO凯瑞,专业提供手机网站制作,微信商城制作开发,各种网站建设优化服务。
当前位置:新乡SEO凯瑞博客 > 微信开发 > 正文

微信小程序中页面代码如何进行模板封装?

10-19 微信开发

   在进行微信小程序中的页面开发中,经常会出现以下情况,就是相同的代码会反复出现,这就是进行一定的封装,封装的好处可以让程序中在于减少一定的代码数量,并且可是使代码结构更加清晰。那么本文就微信小程序中页面代码如何进行模板封装?这个问题给大家详细的解答一下。

    一般在微信小程序中的文件名中都带有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的值。
以上就是微信小程序中页面代码如何进行模板封装问题的详细解答。

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

版权声明: 本文由新乡seo凯瑞博客发布,转载请保留链接: https://www.seokr.cn/wxkf/86.html