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


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声明变量背后的编译原理剖析
Dec 28 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
Jquery的Tabs内容轮换效果实现代码,几行搞定
Feb 12 Javascript
JavaScript错误处理
Feb 03 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
Aug 16 Javascript
Three.js开发实现3D地图的实践过程总结
Nov 20 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
JS实现的视频弹幕效果示例
Aug 17 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
微信小程序的tab选项卡的实现效果
May 15 Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
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连mysql和oracle数据库性能比较
2006/10/09 PHP
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP 数组遍历方法大全(foreach,list,each)
2010/06/30 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
PHP笔记之:基于面向对象设计的详解
2013/05/14 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
微信公众平台DEMO(PHP)
2016/05/04 PHP
YII框架中搜索分页jQuery写法详解
2016/12/19 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
jquery 常用操作整理 基础入门篇
2009/10/14 Javascript
深入理解Javascript闭包 新手版
2010/12/28 Javascript
TBCompressor js代码压缩
2011/01/05 Javascript
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jQuery判断复选框是否勾选的原理及示例
2014/05/21 Javascript
利用javascript实现全部删或清空所选的操作
2014/05/27 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
2015/10/29 Javascript
最原始的jQuery注册验证方式
2016/10/11 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
2018/03/01 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
小程序实现录音功能
2020/09/22 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
Python使用新浪微博API发送微博的例子
2014/04/10 Python
Python Django简单实现session登录注销过程详解
2019/08/06 Python
合作协议书怎么写
2014/04/18 职场文书
公安局副政委班子个人对照检查材料
2014/10/04 职场文书
婚前协议书范本两则
2014/10/16 职场文书
追悼会家属答谢词
2015/09/29 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
Python实现科学占卜 让视频自动打码
2022/04/09 Python