如何在小程序中使用template

1、新建一个template文件夹用来管理项目中所有的模板；

2、新建一个courseList.wxml文件来定义模板；

3、使用name属性，作为模板的名字。然后在内定义代码片段。

注意：

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")

小程序提供了两个引入外部模板的方法：import和include

使用外部模板可以实现大部分共同页面的代码利用，在一个app中，头部和脚部基本不会

变动太大，这时就可以通过模板的方式引入，实现多个页面的复用。

1.1 import

示例：

<!--view.wxml-->

<template name="view">

<text>{{text}}</text>

</template>

1

2

3

4

引入：

<import src="view.wxml"/>

<template is="view" data="{{text: 'forbar'}}"/>

1

2

注意：import有作用域，即import引入的模板洞巧只在当前页面有效，即import不会向下查找另外的模板

1.2 include

include标签可以看唯颤启作是对 “html”的一个拷贝，即将外部的wxml片段拷贝进文档中

示例：

外部wxml片段

<!-- header.wxml -->

<view>header </view>

<!-- footer.wxml -->

<view>footer </view>

1

2

3

4

<!-- index.wxml -->

<include src="header.wxml"/>

<view>body </view>

<include src="footer.wxml"/>

1

2

3

4

5

总结：import是引入模板片段，且有作用域限制，不能进行模板嵌套。include是引入wxml片段，相当于代码拷贝。

二、WXSS 微信样式表

小程序中，页面样式的渲染通过wxss文件实现，.wxss可以看成是指如css，因为它们都在实现相同的功能。实质上wxss也是在css的基础之上进行了扩充和修改得到的。

wxss在css上的扩展特性：

1）、尺寸单位：rpx

rpx：是一个相对像素单位，可以根据屏幕宽度进行自适应。

针对移动端的开发，设计稿一般都是以iphone6为标准的。而iphone用的是视网膜屏，即我们css中设定的1px，在iphone上实际是由2px*2px的像素点组成的。

以iphone6为准，屏幕宽度375px，共有750个物理像素，则750rpx=350px,即1rpx=0.5px

2）、样式导入 @import

跟在css中的外部样式表的导入类似

@import "common.wxss"