《小程序》模板的使用

Posted 2020-11-27 姓叶，名铁柱

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