用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序template模板简解

纸飞机 2018-3-8 09:35

作者:艺术圈程序员李艺,来自原文地址在微信开发中,如何使用模板template?一、定义模板1、新建一个template文件夹用来管理项目中所有的模板;2、新建一个courseList.wxml文件来定义模板;3、使用name属性,作为模 ...

作者:艺术圈程序员李艺,来自

原文地址

在微信开发中,如何使用模板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");

举个例子吧

这是一个图片预加载例子

github.com/o2team/wxapp



这个库写的啰嗦,不易用。实现上微信对资源加载有自己的缓存机制,基本是不需要的预加载组件。且这个组件并不方便使用,不用也罢。我们只是拿它做个template的例子。

附该组件原使用步骤如下:
1、将 img-loader 目录拷贝到你的项目中
2、在页面的 WXML 文件中添加以下代码,将组件模板引入


第一句import是引入组件的定义:


在这里name="img-loader"定义的是模板名称,从

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”(第二个)。


官方简易教程

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏