微信小程序開發(fā)：學(xué)習(xí)筆記[2]——WXML模板

快速開始

介紹

　　WXML 全稱是 WeiXin Markup Language，是小程序框架設(shè)計的一套標(biāo)簽語言，結(jié)合小程序的基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。

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

　　

語法形式

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

　　

數(shù)據(jù)綁定

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

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

代碼清單2-5 數(shù)據(jù)綁定示例

<!--pages/wxml/index.wxml-->
<text>當(dāng)前時間：{{time}}</text>　　

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

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

如代碼2-6所示。

代碼清單2-6 數(shù)據(jù)綁定示例

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

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

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

屬性值也可以實現(xiàn)動態(tài)的綁定，但是屬性值必須被包含著雙引號下：

　　

邏輯語法

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

定義三個變量abc:

　　

運算測試：

　　

條件邏輯

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

　　

列表渲染

定義數(shù)組元素

　　

列表渲染實例

　　　

模板

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

　　

引用

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

　　import 可以在該文件中使用目標(biāo)文件定義的 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 目標(biāo)文件中定義的 template，而不會 import 目標(biāo)文件中 import 的 template，簡言之就是 import 不具有遞歸的特性。

2.include 可以將目標(biāo)文件中除了<template/> <wxs/>外的整個代碼引入，相當(dāng)于是拷貝到 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標(biāo)簽都支持的屬性稱為共同屬性。

　　

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。