微信小程序 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的几种方法
Oct 23 Javascript
使用自定义setTimeout和setInterval使之可以传递参数和对象参数
Apr 24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
Aug 23 Javascript
js数组操作学习总结
Nov 04 Javascript
jquery实现隐藏在左侧的弹性弹出菜单效果
Sep 18 Javascript
javascript日期验证之输入日期大于等于当前日期
Dec 13 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
Bootstrap select实现下拉框多选效果
Dec 23 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
Nov 08 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实现框架(一)
2006/10/09 PHP
php用数组返回无限分类的列表数据的代码
2010/08/08 PHP
工厂模式在Zend Framework中应用介绍
2012/07/10 PHP
PHP单例模式详解及实例代码
2016/12/21 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
javascript 词法作用域和闭包分析说明
2010/08/12 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
2015/03/05 Javascript
jQuery中prepend()方法使用详解
2015/08/11 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Angular 项目实现国际化的方法
2018/01/08 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
2018/05/17 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
2020/05/19 jQuery
jQuery实现简单评论功能
2020/08/19 jQuery
vue集成openlayers加载geojson并实现点击弹窗教程
2020/09/24 Javascript
Python pickle类库介绍(对象序列化和反序列化)
2014/11/21 Python
Linux 下 Python 实现按任意键退出的实现方法
2016/09/25 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
优秀教师先进事迹
2014/01/22 职场文书
四查四看剖析材料
2014/02/14 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
协会周年庆活动方案
2014/08/26 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
清洁工个人工作总结
2015/03/05 职场文书
挂职个人工作总结
2015/03/05 职场文书
试用期自我评价怎么写
2015/03/10 职场文书
2015年度环卫处工作总结
2015/07/24 职场文书
小区物业管理2015年度工作总结
2015/10/22 职场文书
自荐信范文
2019/05/20 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
JS 4个超级实用的小技巧 提升开发效率
2021/10/05 Javascript