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

女爷i 2022-03-10 03:16 380阅读 0赞

### 文章目录 ###

*   *   *  一. 小程序模板的数据传输
         *  二 . 在模板中进行对象的引用
         *  三. 动态属性的在模板中的传值

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

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

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

<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>

实际页面的显示效果如下  
![20190309114449142.png][]

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

在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>

最终显示的效果如下 :  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70][]

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

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

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

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

<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>

效果如下图所示:  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1][]  
官方文档:  
[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_template.html]

[20190309114449142.png]: /images/20220310/047e38c0da2442b89ab1050cc3a4d694.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/d1d59978d6dc4ed383efae58f92cf5b8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/36a5065625154d849b610579ce67faf6.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_template.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html