微信小程序day01_16之小程序页面通用模板的使用

一. 小程序模板的数据传输

模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段

在wxml中编写如下的代码.
定义了一个name为 mytemp 的模板, 在页面中使用 is 属性来进行引用模板.
并使用data 来进行数据的传输

<!--pages/temps/temps.wxml-->
<template name="mytemp">
  <view>姓名 : {{name}} </view>
  <view>年龄 : {{age}} </view>
</template>

<view class='container'>
   
   <template is="mytemp" data="{{name:'immoc',age:'18岁'}}" />

   <template is="mytemp" data="{{name:'immoc',age:'18岁'}}" />

   <template is="mytemp" data="{{name:'immoc',age:'18岁'}}" />

</view>

实际页面的显示效果如下

二 . 在模板中进行对象的引用

在js的data中进行如下的对象的定义

 data: {
     person : {address: '北京' , remark: '这是一个模板演示'}
  }

在模板中, 首先把对象中的成员变量address 和remark 放入模板中.
其次是在页面中, 使用...person, 引用对象, 即可把对象中的成员变量的值,注入进页面中

<template name="mytemp">
  <view>姓名 : {{name}} </view>
  <view>年龄 : {{age}} </view>

   <view>地址 : {{address}} </view>
    <view>备注 : {{remark}} </view>
</template>

<view class='container'>
   
   <template is="mytemp" data="{{...person, name:'immoc',age:'18岁'}}" />
    <view>-----------</view>
   <template is="mytemp" data="{{...person,name:'immoc',age:'18岁'}}" />
   <view>-----------</view>
   <template is="mytemp" data="{{...person,name:'immoc',age:'18岁'}}" />
</view>

最终显示的效果如下 :

三. 动态属性的在模板中的传值

在js的data对象中 ,定义一个成员变量,msg

 data: {
     person : {address: '北京' , remark: '这是一个模板演示'},
     msg : '测试消息'
  }

在wxml中使用如下:
首先在模板中, 写<view>消息 : {{msg}} </view> , 引入该成员变量
其次是在页面中, 模板的data属性中, 直接写msg , 即可引用

<!--pages/temps/temps.wxml-->
<template name="mytemp">
  <view>姓名 : {{name}} </view>
  <view>年龄 : {{age}} </view>

   <view>地址 : {{address}} </view>
    <view>备注 : {{remark}} </view>

    <view>消息 : {{msg}} </view>
</template>

<view class='container'>
   
   <template is="mytemp" data="{{msg,...person, name:'immoc',age:'18岁'}}" />
    <view>-----------</view>
   <template is="mytemp" data="{{msg,...person,name:'immoc',age:'18岁'}}" />
   <view>-----------</view>
   <template is="mytemp" data="{{msg,...person,name:'immoc',age:'18岁'}}" />
</view>

效果如下图所示:

官方文档:
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html