一 概述

• WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用
• 定義模板時：使用 name 屬性，作為模板的名字。然后在<template/>內定義代碼片段
• 導入模板：使用import導入模板
• 使用模板時：使用 is 屬性，聲明需要的使用的模板，然后將模板所需要的 data 傳入

二 模板使用示例

2.1 定義模板

在index文件夾下創建my_template.wxml

<template name="msgItem"><view><text>{{index}}:{{msg}}</text><text>Time:{{time}}</text></view> </template>

說明：

• <template>標簽用于定義一個模板，name屬性表示模板的名稱
• <template>標簽標簽之間是頁面的內容

2.2 導入模板和使用模板(index.wxml)

<import src="./my_template"/> <template is="msgItem" data="{{...item}}"></template>

2.3 給模板設置數據(item)

data: {item:{index:0,msg:'this i s a template',time:'2019-01-15'} }

2.3 效果圖

三 模板示例二

is 屬性可以使用 Mustache 語法，來動態決定具體需要渲染哪個模板

3.1 創建odd.wxml和event.wxml模板

odd.wxml

<template name="odd"><view> odd </view> </template>

event.wxml

<template name="even"><view> even </view> </template>

3.2 導入模板及模板渲染

<import src="./odd"/> <import src="./even"/><block wx:for="{{[1, 2, 3, 4, 5]}}" wx:key="unique"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/> </block>

3.3 效果圖

四 參考

• 官方文檔—使用模板
• CSDN—參考代碼

總結

以上是生活随笔為你收集整理的微信小程序开发之——模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。