微信小程序——template詳細使用

WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用減少冗余代碼。

1.1定義模板

1.1.1、創建模板文件夾

 

 1.1.2、使用 name 屬性，作為模板的名字。然后在<template/>內定義代碼片段，如：

<!-- 使用 name 屬性，作為模板的名字 -->
<template name="personCourseItemTmp">
    <!-- 顯示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默認圖片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
    </view>
  
    <view class='info'><span>姓名：</span>{{mentor_name}}</view>
    <view class='info'><span>職位：</span>{{career}}</view>
    <view class='info'><span>公司：</span>{{company_name}}</view>
    <view class='info'><span>地區：</span>{{address}}</view>
    <view class='info'><span>擅長：</span>{{mentor_skills}}</view>
    <navigator>詳情</navigator>
    <view class='hr'></view>
</template>

.name { text-align: center;
} .widget_arrow { margin-top: 20px; height: 200px; width: 200px; margin-left: 25%;
} .info { font-size: 14px; width: 370rpx; margin: auto; margin-top: 10px;
} .info span{ font-weight: 600;
} .info_border { height: 200px; width: 200px; border: 8px solid red;
} navigator { margin: 0 auto; height: 40px; width: 90%; margin-top: 20px; margin-bottom: 20px; background-color: green; line-height: 40px; text-align: center;
} .hr { height: 0; width: 100%; border: 1px solid green;
}

 

1.2、使用模板

1.2.1、創建index8

 1.2.2、在需要使用的頁面使用import導入該wxml頁面，注意路徑位置

<!-- 引入模塊 -->
<import src="../index7/index.wxml" />

<block wx:for="{{message}}" wx:key="id">
  <template is="personCourseItemTmp" data="{{...item}}"></template>
</block>

1.2.3、在index8的wxss引入index7的樣式

@import "../index7/index.wxss"

1.2.4、在index8的js動態寫入數據

  data: {
    message:[
      {
        mentor_image_uri:"../../image/timg3.jpg",
        mentor_name:"lhs",
        career: "程序員",
        company_name:"aft",
        address:"珠海",
        "mentor_skills":"微信小程序"
      },
      {
        mentor_image_uri: "../../image/timg.jpg",
        mentor_name: "lwx",
        career: "美工",
        company_name: "aft",
        address: "珠海",
        "mentor_skills": "PS"
      }
    ]
  },

運行結果：

1.2.5、如果只想顯示其中的一條數據，修改代碼如下：

<!-- 引入模塊 -->
<import src="../index7/index.wxml" />

<block wx:for="{{message}}" wx:key="id">
    <!-- index是下標 -->
  <template wx:if="{{index==0}}"  is="personCourseItemTmp" data="{{...item}}"></template>
</block>

 

 

 

1.3、is 屬性的使用

1.3.1、在index7定義兩個模板(tem_2和tem_3)；

<!-- 動態數據 -->
<template name="tem_2">
    <!-- 顯示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默認圖片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="{{mentor_image_uri}}" mode="aspectFill"></image>
    </view>
    <view class='info'><span>姓名：</span>{{mentor_name}}</view>
    <view class='info'><span>職位：</span>{{career}}</view>
    <view class='info'><span>公司：</span>{{company_name}}</view>
    <view class='info'><span>地區：</span>{{address}}</view>
    <view class='info'><span>擅長：</span>{{mentor_skills}}</view>
    <navigator>詳情</navigator>
    <view class='hr'></view>
</template>


<!-- 默認，不動態寫入數據-->
<template name="tem_3">
    <!-- 顯示 -->
    <view wx:if="{{mentor_image_uri==null}}">
    <!-- 默認圖片地址 -->
        <image class="widget_arrow" src="../../image/img1.jpg" mode="aspectFill"></image>
    </view>
    <view wx:else>
        <image class="widget_arrow" src="../../image/timg.jpg" mode="aspectFill"></image>
    </view>
    <view class='info'><span>姓名：</span>lcy</view>
    <view class='info'><span>職位：</span>程序員</view>
    <view class='info'><span>公司：</span>未知</view>
    <view class='info'><span>地區：</span>珠海</view>
    <view class='info'><span>擅長：</span>愛笑</view>
    <navigator>詳情</navigator>
    <view class='hr'></view>
</template>

1.3.2、在index8使用模板；這里使用is 屬性聲明需要的使用的模板，另外is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板

<!-- 引入模塊 -->
<import src="../index7/index.wxml" />

<!-- is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板 -->
<block wx:for="{{message2}}">
  <!-- 1==1是true，所以使用tem_2模板 -->
  <template is="{{1 == 1 ? 'tem_2' : 'tem_3'}}" data="{{...item}}"/>
</block>

1.3.3、在index8.js動態寫入數據

  data: {
    message2:[
      {
        mentor_image_uri: "../../image/timg2.jpg",
        mentor_name: "ljq",
        career: "護士",
        company_name: "中山遠大醫院",
        address: "中山市",
        "mentor_skills": "愛看書"
      }
    ]
  },

結果如下：

 

總結

• 在一個項目中需要在多處頁面使用類似的模塊，就需要創建模板—-減少代碼量，同時代碼高度復用；
• 在同一個WXML文件中創建多個類似的模板用name屬性來區別；
• 模板WXSS在全局引入和在使用頁面引入的區別在於模板的使用量；
• 使用 import 引入模板 WXML 和 WXSS ；
• 通過template 標簽使用模板，template 標簽的 is 屬性與模板的 name 屬性對應，data 屬性代表傳入模板的數據。