微信小程序开发之--”template模板“的应用

第一步：定义模板

①：新建一个template文件夹用来管理项目中所有的模板（本文案例定义文件夹名为：temp）；
②、新建一个wxml文件来定义模板（本文案例定义文件夹名为：temp.wxml）；
③、使用name属性，作为模板的名字。然后在

<template name='模板名称'>

代码片段<template/>

内定义代码片段。
<!--pages/temp/temp.wxml-->
<template name='list'>

<view class='expertStyle'>

<image class='expertPhoto' src='{{img}}'></image>

<view class='expertInfo'>
<view class='infoTop'>
<view class='topName'>{{name}}</view>
<view class='topType' wx:for="{{expertTitle}}" wx:key="*this">{{item.title}}</view>
</view>

<view class='infoMiddle'>{{info}}</view><
<view class='infoBottom'>所在科室： {{keshi}} </view>
<view class='infoBottom'>坐诊时间： {{time}} </view>
</view>
</view>

<view class="class_item class_item_end">
{{title}}
</view>

</template>

<template name='small-title'>
<view class='tips-info'>
<image class='tip-pic' src='../../../../../../images/red.png'></image>
<view class='tip-word'>{{title}}</view>
<view class='more'><navigator url='{{url}}'>更多 ></navigator></view>
</view>
</template>
注意：一个

.wxml

文件中可以定义多个模板，但是需要通过

name

来区分（此处定义了list和small-title两个模板）；
另外.wxss文件照常写再temp.wxss中即可。之后可直接引用。

第二步：使用模板

注意：

data

是要模板渲染的数据，

data="{{...item}}"

写法是ES6的写法，

item

是

wx:for

当前项，

...

是展开运算符，在模板中不需要再

{{item.courseName}}

而是直接

{{courseName}}

。
[b]

wxss页面只需直接引用模板里写好的样式即可，js文件此处不予讲述，毕竟模板相同，但每个页面的数据不同，故此处不引用。

[/b]

@import "../../../../../temp/temp.wxss"

此处附上本文案例所引用的js数据的大体结构

data: {
jianjie: "文本信息",
expertList: [
{
"doctorInfo": "url地址", "img": "图片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [
{ "title": "文本1" },
{ "title": "文本2" },
{ "title": "文本3" }
]
},
{
"doctorInfo": "url地址", "img": "图片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [
{ "title": "文本1" },
{ "title": "文本2" },
{ "title": "文本3" }
]
},
{
"doctorInfo": "url地址", "img": "图片地址", "name": "文本", "keshi": "文本", "time": "文本", "info": "文本", "expertTitle": [
{ "title": "文本1" },
{ "title": "文本2" },
{ "title": "文本3" }
]
},
],
smallTitle: [
{ "title": '文本', "url": 'url地址' },
{ "title": '文本', "url": 'url地址' }
],
},

此处js数据中在expertList数组中嵌套了第二个数组expertTitle，“..."展开符只能展开一层，故expertTitle中的子属性title用item.title来引用。<view class='topType' wx:for="{{expertTitle}}" wx:key="*this">{{item.title}}</view>另一处区别的是<template is='small-title' data='{{ ...smallTitle[0] }}'/>此处引用模板给予数组下标来应用对应信息。<navigator wx:for="{{expertList}}" wx:key="*this" url='{{item.doctorInfo}}'>
<template is="list" data='{{...item}}'/>
</navigator> 此处

item

是

wx:for

当前项，故无需给予下标。

以上为笔者全部内容，若有不对之处，欢迎指正。
版权声明：本文为博主原创文章，欢迎转载和发表评论，转载请注明出处：https://mp.csdn.net/postedit/79676267