微信小程序 template模板详解及实例代码


Posted in Javascript onMarch 09, 2017

微信小程序 template模板详解

如下图,我在做华企商学院小程序的时候,课程搜索结果页和课程列表页结构是完全一样的,这时就非常适合使用模板来完成页面搭建。实现一次定义,到处使用。

微信小程序 template模板详解及实例代码微信小程序 template模板详解及实例代码

模板

一、定义模板

1、新建一个template文件夹用来管理项目中所有的模板;
2、新建一个courseList.wxml文件来定义模板;
3、使用name属性,作为模板的名字。然后在<template/>内定义代码片段。

注意:

a.可以看到一个.wxml文件中可以定义多个模板,只需要通过name来区分;

b.模板中的数据都是展开之后的属性。

<template name="courseLeft">
  <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
    <view class="item mr26">
      <image src="{{imagePath}}" mode="aspectFill"></image>
      <view class="course-title">
        <text class="title">{{courseName}}</text>
        <text class="author">- {{teacherName}}</text>
      </view>
      <view class="course-info clearfix">
        <view class="fl"><text class="play">{{playCount}}</text></view>
        <view class="fr"><text class="grade">{{score}}</text></view>
      </view>
      <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
    </view>
  </navigator>
</template>

<template name="courseRight">
  <navigator url="../play/play?courseUuid={{courseUuid}}&isCompany={{isCompany}}">
    <view class="item">
      <image src="{{imagePath}}" mode="aspectFill"></image>
      <view class="course-title">
        <text class="title">{{courseName}}</text>
        <text class="author">- {{teacherName}}</text>
      </view>
      <view class="course-info clearfix">
        <text class="play fl">{{playCount}}</text>
        <text class="grade fr">{{score}}</text>
      </view>
      <view wx:if="{{studyProgress}}" class="tip-completed">{{studyProgress}}</view>
    </view>
  </navigator>
</template>

二、使用模板

1、使用 is 属性,声明需要的使用的模板

<import src="../../templates/courseList.wxml"/>

2、将模板所需要的 data 传入,一般我们都会使用列表渲染。

<block wx:for="{{courseList}}">
  <template is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}" data="{{...item}}"></template>
</block>

注意:

a.可以通过表达式来确定使用哪个模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"

或者通过wx:if来确定。index是数组当前项的下标。

<template wx:if="{{index%2 === 0}}" is="courseLeft" data="{{...item}}"></template>
<template wx:else is="courseRight" data="{{...item}}"></template>

b. data 是要模板渲染的数据,data="{{...item}}" 写法是ES6的写法,item是wx:for当前项,... 是展开运算符,在模板中不需要再{{item.courseName}} 而是直接{{courseName}} 。

三、模板样式

1、在新建模板的时候同时新建一个courseList.wxss 的文件,与CSS同样的写法控制样式。

2、在需要使用模板的页面 .wxss文件中import进来;或者直接在app.wxss中引入,这样只需要一次引入,其他文件就不用引入了。

@import url("../template/courseList.wxss");

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
jquery ui bootstrap 实现自定义风格
Nov 14 Javascript
Javascript原型链的原理详解
Jan 05 Javascript
javascript模块化简单解析
Apr 07 Javascript
AngularJS中的表单简单入门
Jul 28 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
原生javascript上传图片带进度条【实例分享】
Apr 06 Javascript
vue封装swiper代码实例解析
Oct 08 Javascript
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 #Javascript
canvas实现爱心和彩虹雨效果
Mar 09 #Javascript
vue如何实现observer和watcher源码解析
Mar 09 #Javascript
详解VueJs异步动态加载块
Mar 09 #Javascript
微信小程序 设置启动页面的两种方法
Mar 09 #Javascript
js实现登录框鼠标拖拽效果
Mar 09 #Javascript
解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题
Mar 09 #Javascript
You might like
一个php作的文本留言本的例子(四)
2006/10/09 PHP
写php分页时出现的Fatal error的解决方法
2011/04/18 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
2013/08/03 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
通过location.replace禁止浏览器后退防止重复提交
2014/09/04 Javascript
详解javascript遍历方式
2015/11/11 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
Bootstrap路径导航与分页学习使用
2017/02/08 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
js+canvas实现画板功能
2020/09/13 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
Python极简代码实现杨辉三角示例代码
2016/11/15 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Pyinstaller打包Scrapy项目的实现步骤
2020/09/22 Python
详解Python中的Lock和Rlock
2021/01/26 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
手工制作的意大利皮革运动鞋:KOIO
2020/01/05 全球购物
销售工作岗位职责
2013/12/24 职场文书
护士进修自我鉴定
2014/02/07 职场文书
小学生综合素质评语
2014/04/23 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
先进党组织事迹材料
2014/12/26 职场文书
2016年五一促销广告语
2016/01/28 职场文书
《最后一头战象》教学反思
2016/02/16 职场文书
python numpy中setdiff1d的用法说明
2021/04/22 Python
Flutter集成高德地图并添加自定义Maker的实践
2022/04/07 Java/Android
MySQL详细讲解变量variables的用法
2022/06/21 MySQL