微信小程序開發：學習筆記[2]——WXML模板

快速開始

介紹

　　WXML 全稱是 WeiXin Markup Language，是小程序框架設計的一套標簽語言，結合小程序的基礎組件、事件系統，可以構建出頁面的結構。

　　打開開發工具的編輯器，在根目錄下找到 app.json 文件，雙擊打開，在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模擬器刷新后，讀者可以在編輯器中找到 pages/wxml/index.wxml 文件，本小結的學習通過修改這個文件來完成。

　　

語法形式

　　WXML 文件后綴名是 .wxml ，打開 pages/wxml/index.wxml 文件，有過 HTML 的開發經驗的讀者應該會很熟悉這種代碼的書寫方式，簡單的 WXML語句在語法上同 HTML 非常相似。

　　

數據綁定

　　用戶界面呈現會因為當前時刻數據不同而有所不同，或者是因為用戶的操作發生動態改變，這就要求程序的運行過程中，要有動態的去改變渲染界面的能力。在 Web 開發中，開發者使用 　　JavaScript 通過Dom 接口來完成界面的實時更新。在小程序中，使用 WXML 語言所提供的數據綁定功能，來完成此項功能。

　　將 pages/wxml/index.wxml 文件的內容做一些簡單的修改，如代碼2-5所示。

代碼清單2-5 數據綁定示例

<!--pages/wxml/index.wxml-->
<text>當前時間：{{time}}</text>　　

?保存后工具刷新，模擬器并沒有顯示出當前的時間，這是因為我們并沒有給 time 設置任何初始值，請打開 pages/wxml/index.js 文件，在 data 的大括號中加入：

time: (new Date()).toString()。

如代碼2-6所示。

代碼清單2-6 數據綁定示例

// pages/wxml/index.js
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    time: (new Date()).toString()
  },
})

保存，模擬器刷新后正確的展示了當前時間，并且每次編譯時間都會被更新。

WXML 通過 {{變量名}} 來綁定 WXML 文件和對應的 JavaScript 文件中的 data 對象屬性。

屬性值也可以實現動態的綁定，但是屬性值必須被包含著雙引號下：

　　

邏輯語法

　　通過 {{ 變量名 }} 語法可以使得 WXML 擁有動態渲染的能力，除此外還可以在 {{ }} 內進行簡單的邏輯運算。

定義三個變量abc:

　　

運算測試：

　　

條件邏輯

　　WXML 中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：

　　

列表渲染

定義數組元素

　　

列表渲染實例

　　　

模板

　　WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調用。使用 name 屬性，作為模板的名字。然后在<template/>內定義代碼片段。

　　

引用

　　WXML 提供兩種文件引用方式import和include。

　　import 可以在該文件中使用目標文件定義的 template，如：

在 item.wxml 中定義了一個叫 item的 template ：

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.wxml 中引用了 item.wxml，就可以使用 item模板：

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

說明：

1.需要注意的是 import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件中 import 的 template，簡言之就是 import 不具有遞歸的特性。

2.include 可以將目標文件中除了<template/> <wxs/>外的整個代碼引入，相當于是拷貝到 include 位置，如代碼2-22、代碼2-23、代碼2-24所示。

代碼清單2-22 index.wxml

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

代碼清單2-23 header.wxml

<!-- header.wxml -->
<view> header </view>

代碼清單2-24 footer.wxml

<!-- footer.wxml -->
<view> footer </view>

共同屬性

所有WXML標簽都支持的屬性稱為共同屬性。

　　

總結

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

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