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


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 相关文章推荐
获取页面高度,窗口高度,滚动条高度等参数值getPageSize,getPageScroll
Sep 22 Javascript
初学Javascript的一些总结
Nov 03 Javascript
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js实现仿百度瀑布流的方法
Feb 05 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
webpack独立打包和缓存处理详解
Apr 03 Javascript
ionic+AngularJs实现获取验证码倒计时按钮
Apr 22 Javascript
详解使用vuex进行菜单管理
Dec 21 Javascript
Django+Vue实现WebSocket连接的示例代码
May 28 Javascript
微信小程序框架的页面布局代码
Aug 17 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
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP基于ip2long实现IP转换整形
2020/12/11 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
JS获取当前日期和时间的简单实例
2013/11/19 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
JavaScript 深层克隆对象详解及实例
2016/11/03 Javascript
BootStrap3使用错误记录及解决办法
2016/12/22 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
浅谈vue 单文件探索
2018/09/05 Javascript
小程序如何使用分包加载的实现方法
2019/05/22 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
2019/08/29 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
nuxt.js写项目时增加错误提示页面操作
2020/11/05 Javascript
Python cookbook(数据结构与算法)将序列分解为单独变量的方法
2018/02/13 Python
Python干货:分享Python绘制六种可视化图表
2018/08/27 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python批量识别图片指定区域文字内容
2019/04/30 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
Python多进程multiprocessing、进程池用法实例分析
2020/03/24 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
纽约的奢华内衣店:Journelle
2016/07/29 全球购物
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
高中生班主任评语
2014/04/25 职场文书
企业指导教师评语
2014/04/28 职场文书
三八妇女节活动总结
2014/05/04 职场文书
2015教师个人年度工作总结
2015/10/23 职场文书