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


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 相关文章推荐
ImageZoom 图片放大镜效果(多功能扩展篇)
Apr 14 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
JS实现适合于后台使用的动画折叠菜单效果
Sep 21 Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
Jan 20 Javascript
js判断PC端与移动端跳转
Dec 24 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
vue组件生命周期详解
Nov 07 Javascript
一种angular的方法级的缓存注解(装饰器)
Mar 13 Javascript
浅谈Javascript中的对象和继承
Apr 19 Javascript
微信小程序实现上拉加载功能
Nov 20 Javascript
原生js实现下拉框选择组件
Jan 20 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
php实现的简单压缩英文字符串的代码
2008/04/24 PHP
php 文件状态缓存带来的问题
2008/12/14 PHP
PHP引用返回用法示例
2016/05/28 PHP
PHP使用php-resque库配合Redis实现MQ消息队列的教程
2016/06/29 PHP
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
实例讲解js验证表单项是否为空的方法
2016/01/09 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
Vue响应式原理详解
2017/04/18 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
2019/06/17 Javascript
Vue Components 数字键盘的实现
2019/09/18 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
javascript实现鼠标点击生成文字特效
2019/12/24 Javascript
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
Python高级编程之继承问题详解(super与mro)
2019/11/19 Python
HTML5之HTML元素扩展(上)—新增加的元素及使用概述
2013/01/31 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
Big Green Smile法国:领先的英国有机和天然产品在线商店
2021/01/02 全球购物
中专毕业生求职简历的自我评价
2013/10/21 职场文书
八一演出活动方案
2014/02/03 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
小学教师读书笔记
2015/07/01 职场文书
2016元旦晚会主持人开场白和结束语
2015/12/03 职场文书
python b站视频下载的五种版本
2021/05/27 Python