在微信小程序开发中，如何使用模板template？
一、定义模板
1、新建一个template文件夹用来管理项目中所有的模板；
2、新建一个courseList.wxml文件来定义模板；
3、使用name属性，作为模板的名字。然后在
注意：
a.可以看到一个.wxml文件中可以定义多个模板，只需要通过name来区分；
b.模板中的数据都是展开之后的属性。
二、使用模板
1、使用 is 属性，声明需要的使用的模板
2、将模板所需要的 data 传入，一般我们都会使用列表渲染。
注意：
a.可以通过表达式来确定使用哪个模板is="{{index%2 === 0 ? 'courseLeft' : 'courseRight'}}"
或者通过wx:if来确定。index是数组当前项的下标。
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");
举个例子吧
这是一个图片预加载例子
https://github.com/o2team/wxapp-img-loader
这个库写的啰嗦，不易用。实现上微信对资源加载有自己的缓存机制，基本是不需要的预加载组件。且这个组件并不方便使用，不用也罢。我们只是拿它做个template的例子。
附该组件原使用步骤如下：
1、将 img-loader 目录拷贝到你的项目中
2、在页面的 WXML 文件中添加以下代码，将组件模板引入
<import src="../../img-loader/img-loader.wxml"/> <template is="img-loader" data="{{ imgLoadList }}"></template>
第一句import是引入组件的定义：
<template name="img-loader">
<image wx:for="{{ imgLoadList }}" wx:key="*this" src="{{ item }}" data-src="{{ item }}" bindload="_imgOnLoad" binderror="_imgOnLoadError" style="width:0;height:0;opacity:0" />
</template>
在这里name="img-loader"定义的是模板名称，从<image标签开始，使用的便是展开的模板数据。bindload与binderror事件，是绑定在宿主页内的，并不是模板页的什么js文件，模板页没有天生配对的js。
3、在页面的 JS 文件中引入组件脚本
const ImgLoader = require('../../img-loader/img-loader.js')
这是js引用。凡js模块皆如此。
4、实例化一个 ImgLoader 对象，将 this(当前 Page 对象) 传入，第二个参数可选，为默认的图片加载完成的回调方法
this.imgLoader = new ImgLoader(this)
在这里ImgLoader，这个名称是在上一步引入的js文件尾部定义的：
module.exports = ImgLoader
使用module.exports导出，是js模块的通用语法。此处改，上面的new ImgLoader随之改。
5、调用 ImgLoader 实例的 load 方法进行图片加载，第一个参数为图片链接，第二个参数可选，为该张图片加载完成时的回调方法
this.imgLoader.load(imgUrlOriginal, (err, data) => { console.log('图片加载完成', err, data.src, data.width, data.height) })
这里的imgLoader是上面自己实例化的一个Page变量，load方法是定义在js模块img-loader.js文件之内的。
在这里有一个特殊的黑科技需要注意下。在img-loader.js文件内，有这两句：
this.page._imgOnLoad = this._imgOnLoad.bind(this)
this.page._imgOnLoadError = this._imgOnLoadError.bind(this)
这个bind(ths)的用法，并不见于微信小程序官方文档之中。它是小程序函数的一个闭包方法，调用主体是小程序页面函数，参数是函数内希望的this对象。页面函数，例如_imgOnLoad，或_imgOnLoadError，参数是函数内的this对象，即在函数内使用的this。
这里的this.page，实指客户代码传入的对象，见上方代码有：
this.imgLoader = new ImgLoader(this)
指的是这个“this”（第二个）。
微信小程序template模板简解
发布：2018-02-02 10:58浏览： 次来源：网络 作者：cola
免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
相关文章
- 微信小程序开发工具 常用快捷键2018-06-09
- 微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
- 微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
- 微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
- 梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
- 微信小程序使用Promise实践2018-02-07
- 微信小程序开发系列分析《一》视图层2018-02-07
- 微信小程序开发系列分析《二》数据层2018-02-07
- 微信小程序官方文档个人分析心得2018-02-07
- 微信小程序的原型设计尝鲜2018-02-07
