小程式 template 模版使用方法

閒不住的李先森發表於2019-04-11

小程式開發語言雖然只能執行在微信小程式中， 但是它的設計同樣遵循了主流前端框架的主要特徵——元件化，在小程式中元件化的實現有兩種方式: template 模版 和 Component 元件。 這兩種方式分別適用於不同的場景。

  1. template 模版 主要用於展示，模版中不涉及事件處理， 需要處理的事件邏輯放在呼叫模版的頁面中。 一個 template 模版 只包含 wxml wxss 檔案。
  2. Component 元件 作為一個單獨的功能模組，不僅可以包含頁面展示還可以包含該模組的事件邏輯處理。 像一個頁面一樣， Component 元件 可以包含 wxml wxss js json 檔案。

1. 建立 template 模版

不同於 page 和 Component 的建立， 在開發者工具中並不能快速建立一個 template 模版。所以需要單獨建立 wxss wxml 檔案。

小程式 template 模版使用方法

template.wxml 檔案語法

一個 template.wxml 檔案中使用 <template> 標籤包含一個模版， 一個 template.wxml 檔案可以包含多個 <template>模版， 使用 name 屬性作為模版的名稱。

在模版中可以接受變數， 使用 {{}} 展示。 為變數的傳遞者由呼叫該模版的頁面傳遞。

<template name="A">
    <text>template name: {{name}}</text>
</template>
<template name="B">
    <text>template name: {{name}} {{msg}}</text>
</template>
複製程式碼

template.wxss 模版樣式檔案

模版可以擁有自己的樣式檔案

text{
    color: #cccccc;
}
複製程式碼

2. 引用 template 模版

  1. template 模版的引用需要使用 <import> 標籤。 該標籤的 src 屬性為需要引用模版的路徑。
  2. template 模版的使用用 <template> 標籤。 使用 is 屬性來區別模版檔案中定義的模版。
  3. 使用 data 傳入模版中的資料。

index.wxml

<import src="../tpls/template.wxml" />

<view>
    <template is="A" data="{{name}}"/>
    <template is="B" data="{{name, msg}}"/>
<view>
複製程式碼

3. 引用模版樣式

在 呼叫頁面的 wxml 中引用了 template.wxml 後，模版的樣式並不會引用， 需要在呼叫頁面的 wxss 中單獨引用 template.wxss 檔案。

index.wxss

@import "./tpls/template.wxss"
複製程式碼

4. 模版檔案中的事件處理

在模版中定義的事件, 需要呼叫頁面中執行。 template.wxml

<template name="A">
    <text bindtap="handleTap">template name: {{name}}</text>
</template>
複製程式碼

index.js

Page({
    data: {},
    handleTap() {
        console.log('template 模版 click')
    }
})
複製程式碼

5. import 有作用域

import 有作用域的概念，即只會 import 目標檔案中定義的 template，而不會 import 目標檔案中 import 的 template，簡言之就是 import 不具有遞迴的特性。

例如：C 引用 B，B 引用A，在C中可以使用B定義的 template，在B中可以使用A定義的 template ，但是C不能使用A定義的template

6. include 配合 template 模版

如同使用 <import src="xx/xx/xx.wxml"> <tempalte is="A" /> 引用和使用模版一樣， 同樣也可以使用 <include src="xx/xx/xx.wxml />" 來引用一個模版。

需要注意的是：

  1. 使用 <include> 引用模版檔案時， 並不能分別出模版檔案的模版塊， 所以使用 <include> 引用的模版檔案中只能定義一個模版塊。
  2. include 可以將目標檔案中除了 <template/> <wxs/> 外的整個程式碼引入，相當於是拷貝到 include 位置。
<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>
複製程式碼
<!-- header.wxml -->
<view> header </view>
複製程式碼
<!-- footer.wxml -->
<view> footer </view>
複製程式碼

相關文章