微信小程序 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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
js 获取元素下面所有li的两种方法
Apr 14 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
使用ajax+jqtransform实现动态加载select
Dec 01 Javascript
jQuery UI Bootstrap是什么?
Jun 17 Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 Javascript
vue使用rem实现 移动端屏幕适配
Sep 26 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
解决在Vue中使用axios用form表单出现的问题
Oct 30 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 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
基于PHP CURL用法的深入分析
2013/06/09 PHP
thinkphp实现发送邮件密码找回功能实例
2014/12/01 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
thinkphp表单上传文件并将文件路径保存到数据库中
2016/07/28 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
Javascript &amp; DHTML 实例编程(教程)基础知识
2007/06/02 Javascript
JS 实现导航栏悬停效果
2013/09/23 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
实现隔行换色效果的两种方式【实用】
2016/11/27 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
使用D3.js构建实时图形的示例代码
2018/08/28 Javascript
ES6常用小技巧总结【去重、交换、合并、反转、迭代、计算等】
2019/12/21 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
Django视图和URL配置详解
2018/01/31 Python
TensorFlow平台下Python实现神经网络
2018/03/10 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
品质管理部岗位职责范文
2014/03/01 职场文书
影子教师研修方案
2014/06/14 职场文书
2014年班主任工作总结
2014/11/08 职场文书
三峡人家导游词
2015/01/31 职场文书
考研经验交流会策划书
2015/11/02 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript