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


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 相关文章推荐
js的闭包的一个示例说明
Nov 18 Javascript
jquery form 加载数据示例
Apr 21 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
Sep 14 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
JavaScript读二进制文件并用ajax传输二进制流的方法
Jul 18 Javascript
javascript表单控件实例讲解
Sep 13 Javascript
使用JavaScript获取URL中的参数(两种方法)
Nov 16 Javascript
原生JS获取元素集合的子元素宽度实例
Dec 14 Javascript
JS中正则表达式全局匹配模式 /g用法详解
Apr 01 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 Javascript
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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
discuz authcode 经典php加密解密函数解析
2020/07/12 PHP
Pain 全世界最小最简单的PHP模板引擎 (普通版)
2011/10/23 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
JavaScript 学习技巧
2010/02/17 Javascript
基于jquery的一个浮动框(扩展性比较好 )
2010/08/27 Javascript
基于jquery的表格排序
2010/09/11 Javascript
jQuery源码分析之jQuery中的循环技巧详解
2014/09/06 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
基于javascript实现随机颜色变化效果
2016/01/14 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
jquery取消事件冒泡的三种方法(推荐)
2016/05/28 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
JavaScript DOM 对象深入了解
2016/07/20 Javascript
js实现文字选中分享功能
2017/01/25 Javascript
Angular中使用$watch监听object属性值的变化(详解)
2017/04/24 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
详解javascript appendChild()的完整功能
2018/08/18 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
python函数局部变量用法实例分析
2015/08/04 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
numpy数组拼接简单示例
2017/12/15 Python
pycharm安装和首次使用教程
2018/08/27 Python
对python requests的content和text方法的区别详解
2018/10/11 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
python列表推导式操作解析
2019/11/26 Python
python opencv实现直线检测并测出倾斜角度(附源码+注释)
2020/12/31 Python
户籍证明模板
2014/09/28 职场文书
单位租车协议书
2015/01/29 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年财务工作总结范文
2015/03/31 职场文书