微信小程序 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 08 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
Jquery实现显示和隐藏的4种简单方式
Aug 28 Javascript
jQuery选择id属性带有点符号元素的方法
Mar 17 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
浏览器环境下JavaScript脚本加载与执行探析之动态脚本与Ajax脚本注入
Jan 19 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
js实现目录链接,内容跟着目录滚动显示的简单实例
Oct 15 Javascript
AngularJs 常用的过滤器
May 15 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
react中props 的使用及进行限制的方法
Apr 28 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网页显示各种语法错误
2013/09/23 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
Lazy Load 延迟加载图片的 jQuery 插件
2010/02/06 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
2011/01/12 Javascript
JS对select控件option选项的增删改查示例代码
2013/10/21 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
JS中innerHTML和pasteHTML的区别实例分析
2016/06/22 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
Vue数据驱动模拟实现1
2017/01/11 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
element 结合vue 在表单验证时有值却提示错误的解决办法
2018/01/22 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
JavaScript继承与多继承实例分析
2018/05/26 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
详解一个基于react+webpack的多页面应用配置
2019/01/21 Javascript
js实现网页同时进行多个倒计时功能
2019/02/25 Javascript
python分割和拼接字符串
2013/11/01 Python
Python使用cx_Oracle模块将oracle中数据导出到csv文件的方法
2015/05/16 Python
python reduce 函数使用详解
2017/12/05 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
Python换行与不换行的输出实例
2020/02/19 Python
python的help函数如何使用
2020/06/11 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
opencv实现图像几何变换
2021/03/24 Python
优秀教师事迹简介
2014/02/02 职场文书
婚纱摄影师求职信
2014/03/07 职场文书
自主招生学校推荐信
2014/09/26 职场文书
2014入党积极分子批评与自我批评思想报告
2014/10/06 职场文书
学校捐款活动总结
2015/05/09 职场文书
整脏治乱工作简报
2015/07/21 职场文书
获奖感言一句话
2015/07/31 职场文书
2019年入党思想汇报
2019/03/25 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js