微信小程序 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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
js精度溢出解决方案
Dec 02 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jquery彩色投票进度条简单实例演示
Jul 23 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
vue中@change兼容问题详解
Oct 25 Javascript
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
CI(CodeIgniter)框架介绍
2014/06/09 PHP
php实现的树形结构数据存取类实例
2014/11/29 PHP
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/06 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
2013/02/05 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
angular.js 路由及页面传参示例
2017/02/24 Javascript
使用原生js封装的ajax实例(兼容jsonp)
2017/10/12 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
vue动画—通过钩子函数实现半场动画操作
2020/08/09 Javascript
[01:05:52]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第一场 2月2日
2021/03/11 DOTA
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
使用Python发送邮件附件以定时备份MySQL的教程
2015/04/25 Python
Python实现根据IP地址和子网掩码算出网段的方法
2015/07/30 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
Python爬虫实例扒取2345天气预报
2018/03/04 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
总结Python图形用户界面和游戏开发知识点
2019/05/22 Python
解决python明明pip安装成功却找不到包的问题
2019/08/28 Python
Python基于内置库pytesseract实现图片验证码识别功能
2020/02/24 Python
TensorFlow-gpu和opencv安装详细教程
2020/06/30 Python
详解纯CSS3制作的20种loading动效
2017/07/05 HTML / CSS
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
美国全球旅游运营商:Pacific Holidays
2018/06/18 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
纪检监察建议书
2014/05/19 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
项目投资意向书范本
2015/05/09 职场文书
结婚典礼致辞
2015/07/28 职场文书
2019暑假阅读倡议书
2019/06/24 职场文书
创业计划书之服装
2019/10/07 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
你真的会用Mysql的explain吗
2022/03/31 MySQL
VUE递归树形实现多级列表
2022/07/15 Vue.js