迷你應用程式標記、樣式、指令碼和更新

標記語言

如前所述，迷你應用程式是以 HTML 的語法撰寫而成，而不是純 HTML 格式。如果您從未處理過 Vue.js 文字內插和指令，您馬上就能在家裡，但類似概念在 XML 轉換 (XSLT) 中就已經存在。下方可以看到 WeChat 的 WXML 的程式碼範例，不過概念適用於所有小應用程式平台，包括 Alipay 的 AXML、百度的 Swan Element、ByteDance 的 TTML (雖然名為 Bxml 的 DevTools)，以及 Quick App 的 HTML。和 Vue.js 一樣，基本迷你應用程式程式設計概念是模型檢視畫面 (MVVM)。

資料繫結

資料繫結與 Vue.js 的文字內插類型相對應。

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

清單轉譯

清單轉譯的運作方式與 Vue.js v-for 指令類似。

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

條件式轉譯

條件式轉譯的運作方式與 Vue.js 的 v-if 指令類似。

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

範本

您不必複製 HTML 範本的 content，而是透過 is 屬性以宣告方式使用 WXML 範本，該屬性會連結至範本定義。

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

樣式

樣式取決於 CSS 的方言。WeChat 已命名為 WXSS。對 Alipay 而言，「ACSS」是百度的簡稱「CSS」，在 ByteDance 中，則稱為 TTSS。這種模式的共通點是利用回應式像素擴充 CSS。編寫一般 CSS 時，開發人員需要轉換所有像素單元，以便配合寬度和像素比例不同的行動裝置螢幕進行調整。TTSS 支援 rpx 單位做為基礎層，這表示迷你應用程式會根據指定的 750rpx 螢幕寬度，由開發人員接管工作，並代為轉換單位。舉例來說，在螢幕寬度為 393px (且裝置像素比例為 2.75) 的 Pixel 3a 手機上，使用 Chrome 開發人員工具檢查時，回應式 200rpx 在實際裝置上會變為 104px (393px / 750rpx * 200rpx overlay 104px)。在 Android 中，同一個概念稱為密度獨立像素。

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

由於元件 (請參閱後續章節) 不會使用 shadow DOM，因此網頁上宣告的樣式會傳至所有元件。常見的樣式表檔案組織為通用樣式，各有一個用於全域樣式的根樣式表，以及每個迷你應用程式各頁面專屬的個別樣式表。您可以透過 @import 規則匯入樣式，該規則類似於 @import CSS at-rule。和 HTML 一樣，樣式也可用內嵌宣告，包括動態文字內插 (請參閱之前)。

<view style="color:{{color}};" />

影片腳本

迷你應用程式支援「安全子集」的 JavaScript，當中支援使用各種語法提醒 CommonJS 或 RequireJS 的模組。JavaScript 程式碼無法透過 eval() 執行，也無法使用 new Function() 建立函式。指令碼執行環境為裝置上的 V8 或 JavaScriptCore，以及模擬工具中的 V8 或 NW.js。通常可以使用 ES6 以上版本語法編寫程式碼，因為如果建構目標是採用舊版 WebView 實作的作業系統，則特定開發人員工具會自動將程式碼轉譯為 ES5 (請參閱後續說明)。超級應用程式供應商的說明文件明確指出其指令碼語言不會混淆且與 JavaScript 不同。不過，這個陳述式主要是指模組的運作方式，也就是說，模組尚未支援標準 ES 模組。

如「之前」所述，迷你應用程式程式設計概念是「模型檢視畫面檢視模型」 (MVVM)。邏輯層和檢視區塊層會在不同的執行緒上執行，這表示使用者介面不會因長時間執行的作業遭到封鎖。就網頁術語來說，您可以想像在網路工作站中執行的指令碼。

WeChat 的指令碼語言稱為 WXS，Alipay 的 SJS，也是 ByteDance 的 SJS。百度在參照 JS 時使用了。您必須使用特殊類型的標記來加入這些指令碼，例如 WeChat 中的 <wxs>。相較之下，Quick App 使用一般 <script> 標記和 ES6 JS 語法。

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

模組也可以透過 src 屬性載入，或透過 require() 匯入。

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

JavaScript Bridge API

連結迷你應用程式與作業系統的 JavaScript 橋接器可讓您使用 OS 功能 (請參閱「存取強大功能」一節)。並提供許多方便的方法。如需總覽，您可以查看 WeChat、Alipay、百度、ByteDance 和 Quick App 的各種 API。

功能偵測十分簡單，因為所有平台提供的 canIUse() 方法名稱看起來都像是由網站 caniuse.com 做為靈感來源。舉例來說，ByteDance 的 tt.canIUse() 可以支援 API、方法、參數、選項、元件和屬性檢查。

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

更新

迷你應用程式沒有標準化更新機制 (針對可能的標準化討論)。所有迷你應用程式平台都有後端系統，可讓迷你應用程式開發人員上傳新版迷你應用程式。接著，超級應用程式會使用該後端系統檢查並下載更新。部分超級應用程式會完全在背景執行更新，讓迷你應用程式本身無法影響更新流程。其他超級應用程式可讓您進一步控制迷你應用程式本身。

舉例來說，以下段落可詳細說明迷你應用程式的 WeChat 更新機制。WeChat 會在以下兩種情境中檢查可用的更新：

1. 只要持續使用 WeChat，WeChat 就會定期檢查最近使用的小型應用程式。如果找到更新，系統就會下載更新，並在使用者下次冷啟動迷你應用程式時同步套用更新。當使用者開啟迷你應用程式時，如果迷你應用程式目前並未執行，WeChat 會在背景中強制關閉迷你應用程式 5 分鐘。
2. 當迷你應用程式發生冷啟動時，WeChat 也會檢查應用程式是否有更新。如果是使用者長時間未開啟的迷你應用程式，系統會同步檢查並下載更新。下載更新時，使用者必須等待。下載完成後，系統就會套用更新，並開啟迷你應用程式。如果下載失敗 (例如網路連線狀況不佳)，迷你應用程式仍會開啟，針對使用者最近開啟的迷你應用程式，所有可能的更新都會在背景中以非同步方式下載，並在使用者下次冷啟動迷你應用程式時套用。

迷你應用程式可透過 UpdateManager API，選擇加入先前的更新。它提供以下功能：

• 檢查更新時通知迷你應用程式。(onCheckForUpdate)
• 更新使用者下載且有可用更新時，通知迷你應用程式。(onUpdateReady)
• 在無法下載更新時通知迷你應用程式。(onUpdateFailed)
• 允許迷你應用程式強制安裝可用的更新，並重新啟動應用程式。(applyUpdate)

WeChat 也為迷你應用程式開發人員在其後端系統中提供其他更新自訂選項： 1. 其中一個選項可讓開發人員選擇不同步更新，以對已安裝特定最低版本應用程式的使用者進行同步更新，而是強制以非同步的方式進行更新。 2. 另一個選項則可讓開發人員設定迷你應用程式的最低需求版本。這樣一來，如果非同步更新版本低於最低需求版本，就能在套用更新後強制重新載入迷你應用程式。如果更新失敗，系統也會禁止開啟舊版迷你應用程式。

特別銘謝

本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu 撰寫。