码迷,mamicode.com
首页 > 微信 > 详细

《小程序》模板的使用

时间:2020-04-04 20:31:03      阅读:95      评论:0      收藏:0      [点我收藏+]

标签:解构   模板   外部   div   属性   item   XML   调用   --   

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

 

《小程序》模板的使用

标签:解构   模板   外部   div   属性   item   XML   调用   --   

原文地址:https://www.cnblogs.com/yetiezhu/p/12633607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!