《小程序》模板的使用

第一步:首先新建一个页面,然后在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适合引入组件文件

 

相关文章