微信小程序template模板简解

这是一款来自小程序免费开发制作网的小程序demo源码，希望大家喜欢。在微信小程序开发中，如何使用模板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=”{{%20item%20}}” data-src=”{{%20item%20}}” 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”（第二个）。

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

本资源来自易用通，如有侵权，请联系站长。