小程序的模板使用介绍

模板，即一部分业务代码片段，具有通用性。使用模板的好处，自然是方便维护。前端时间在做一个视频小程序时，便遇到了需要模板的场景。

这个小程序是个关于视频的项目，在首页，分类，搜索，个人中心(我发布的视频)都存在视频列表(页面包含列表),所以我打算将列表拿出来做个模板。

小程序定义模板语法：

<template name="yourTemplateName">
    <!--
        这里是页面布局的代码,例如:
        <view>
            <text>hello world!</text>
        </view>
    -->
</template>

定义好模板后保存为一个wxml的文件。

在需要使用模板的页面，首先引入模板

<import src="path/to/template/template.wxml" />

然后，在需要展示模板的地方使用模板

<template is="yourTemplateName" />

如果，模板里有变量，可以通过data传入

<template is="yourTemplateName" data="{{item}}"/>

如果有多个值，这样传入

<template is="yourTemplateName" data="{{name: theName, age: theAge, gender: theGender}}"/>

这是wxml模板的使用,与wxml文件相关联的还有两个文件wxss文件、js文件。wxss文件没有什么可说的，直接在需要的页面的wxss文件里使用import引入即可,这里说下js文件。

小程序每个页面都需要在js文件里使用Page函数注册页面，对于模板里的事件等一系列操作，我们不可能在每个地方都去写一遍。和定义模板一样，我们新建一个独立的js文件,内容如下:

export function functionName(params){
    #coding here
}

然后在需要的js页面引入

var lib = require(path/to/function);

var fn = lib.functionName;

这样，在Page函数里，我们就可以使用fn这个函数了。