第一步:首先新建一个页面,然后在js中data里定义一个数据
例:
data: { item:{ name:"铁柱", age:99 } },
第二步:wxml里定义模板 (定义一个name名字)
<!-- 定义模板 --> <template name="tempName1"> <view> 我是第一个模板 <view> <text>{{name}}---{{age}}---{{addr}}</text> </view> <view>++++++++++++++++++++++++++</view> </view> </template>
第三步:使用模板,调用出模板 (通过is属性,is名字是第二步里定义的name名字)
<template is="tempName1" data="{{...item,addr:‘湖南株洲‘}}"></template>
当然,这是在一个页面使用的,我们平常肯定是会分页面写,然后调用, 下面的使用就是分页面做的
第一步: 首先先建立一个模板 我取名为temp
<template name="tempName3"> <view class="temp3"> <!-- <text style="color:red">我是模板3 ---{{name}}</text> --> <text>我是模板3 ---{{name}}</text> </view> </template>
第二步:我又新建一个文件,取名为template
同样,我先在js里定义一个数据
例:
item:{ name:"铁柱", age:99 }
第三步:在template WXML里引入temp模板
<view>-----引入外部模板-----</view> <import src="../temp/temp.wxml" /> <template is="tempName3" data="{{...item}}"></template>
这里的路径就是找temp文件的路径 is还是对应的上面的name名字,data="{{...item}} 对象解构
这里用的是import引入, 我们还可以用inlude引入
import可以用来引用模板,在开发中可以避免相同模板的重复编写,而include适合引入组件文件