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


Posted in Javascript onOctober 12, 2017

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

    最近在进行微信小程序中的页面开发,其实在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的值

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JavaScript入门教程(5) js Screen屏幕对象
Jan 31 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
Nov 19 Javascript
jQuery知识点整理
Jan 30 Javascript
jQuery控制li上下循环滚动插件用法实例(附demo源码下载)
May 28 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
深入浅析vue组件间事件传递
Dec 29 Javascript
angular2实现统一的http请求头方法
Aug 13 Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 jQuery
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
Electron+vue从零开始打造一个本地播放器的方法示例
Oct 27 Javascript
vue 给数组添加新对象并赋值
Apr 20 Vue.js
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 #Javascript
Angular实现预加载延迟模块的示例
Oct 12 #Javascript
使用cookie绕过验证码登录的实现代码
Oct 12 #Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 #jQuery
使用原生js封装的ajax实例(兼容jsonp)
Oct 12 #Javascript
vue学习之mintui picker选择器实现省市二级联动示例
Oct 12 #Javascript
jQuery中 DOM节点操作方法大全
Oct 12 #jQuery
You might like
php之字符串变相相减的代码
2007/03/19 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
php文件缓存类用法实例分析
2015/04/22 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
javascript操作cookie_获取与修改代码
2009/05/21 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
javascript中的绑定与解绑函数应用示例
2013/06/24 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
js toFixed()方法的重写实现精度的统一
2014/03/06 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
2014/04/15 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JavaScript中的Primitive对象封装介绍
2014/12/31 Javascript
手机端页面rem宽度自适应脚本
2015/05/20 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
利用jQuery实现打字机字幕效果实例代码
2016/09/02 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
Python读写Redis数据库操作示例
2014/03/18 Python
python里对list中的整数求平均并排序
2014/09/12 Python
Python中endswith()函数的基本使用
2015/04/07 Python
Python返回真假值(True or False)小技巧
2015/04/10 Python
JSP&Servlet技术面试题
2015/05/21 面试题
大学生的网上创业计划书
2013/12/31 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
小学英语课后反思
2014/04/26 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python