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

Thomas Steiner

標記語言

如先前所述，迷你應用程式是使用 HTML 方言編寫，而非純 HTML。如果您曾處理過 Vue.js 文字插補和指令，會立即感到熟悉，但類似概念早在 XML 轉換 (XSLT) 中就已存在。下方是 WeChat WXML 的程式碼範例，但概念適用於所有迷你應用程式平台，包括 Alipay 的 AXML、Baidu 的 Swan 元素、ByteDance 的 TTML (儘管開發人員工具稱其為 Bxml)，以及快應用的 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",
  },
});

範本

WXML 範本可透過 is 屬性以宣告方式使用，連結至範本定義，不必像 HTML 範本一樣強制複製 content。

<!-- 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 ≈ 104px)。在 Android 中，相同概念稱為「密度獨立像素」。

使用 Chrome 開發人員工具檢查檢視區塊時，如果回應式像素邊框間距指定為 `200rpx`，在 Pixel 3a 裝置上實際會顯示為 `104px`。 — 使用 Chrome 開發人員工具檢查 Pixel 3a 裝置上的實際邊框間距。

/* 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 規則。與 HTML 相同，樣式也可以內嵌宣告，包括動態文字插補 (請參閱前文)。

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

撰寫腳本

迷你應用程式支援「安全子集」的 JavaScript，包括支援使用各種語法的模組，類似於 CommonJS 或 RequireJS。JavaScript 程式碼無法透過 eval() 執行，且無法使用 new Function() 建立函式。指令碼執行環境在裝置上是 V8 或 JavaScriptCore，在模擬器中則是 V8 或 NW.js。通常可以使用 ES6 或更新的語法進行編碼，因為如果建構目標是搭載舊版 WebView 實作的作業系統，特定的開發人員工具會自動將程式碼轉譯為 ES5 (請參閱後續內容)。超級應用程式供應商的文件明確指出，他們的指令碼語言與 JavaScript 不同，請勿混淆。不過，這項聲明主要只是指模組的運作方式，也就是說，模組目前尚不支援標準 ES 模組。

如先前所述，迷你應用程式程式設計概念是模型-檢視區塊-檢視區塊模型 (MVVM)。邏輯層和檢視層會在不同執行緒上執行，因此使用者介面不會因長時間執行的作業而遭到封鎖。以網路術語來說，您可以將在 Web Worker 中執行的指令碼視為。

微信的指令碼語言稱為 WXS，支付寶的稱為 SJS，字節跳動的也稱為 SJS。百度在參照自家產品時，會提到 JS。這些指令碼必須使用特殊類型的代碼 (例如微信中的 <wxs>) 納入。相較之下，快應用程式使用一般的 <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 橋接器 API

連結迷你應用程式與作業系統的 JavaScript 橋接器，可讓您使用作業系統功能 (請參閱「存取強大功能」)。此外，還提供多種便利方法。如要查看總覽，請參閱 WeChat、Alipay、Baidu、ByteDance 和快應用程式的不同 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 正在執行，就會定期檢查最近使用過的小程式是否有更新。如果系統找到更新，就會下載更新，並在使用者下次冷啟動迷你程式時同步套用更新。使用者開啟迷你程式時，如果迷你程式未執行 (WeChat 會在迷你程式於背景執行 5 分鐘後強制關閉)，就會冷啟動迷你程式。
WeChat 也會在迷你程式冷啟動時檢查更新。如果使用者長時間未開啟迷你應用程式，系統會同步檢查及下載更新。下載更新時，使用者必須等待。下載完成後，系統會套用更新並開啟迷你應用程式。如果下載失敗 (例如網路連線不良)，迷你應用程式仍會開啟。如果使用者最近開啟過迷你應用程式，系統會在背景非同步下載任何潛在更新，並在使用者下次冷啟動迷你應用程式時套用更新。

迷你應用程式可以使用 UpdateManager API 選擇搶先更新。這項服務提供下列功能：

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

微信後端系統也為小程式開發人員提供額外的更新自訂選項： 1. 開發人員可以選擇不為已安裝特定最低版本微型應用程式的使用者提供同步更新，而是強制執行非同步更新。2. 開發人員也可以選擇設定迷你應用程式的最低必要版本。這樣一來，如果迷你應用程式的版本低於最低必要版本，系統就會在套用更新後強制重新載入迷你應用程式，進行非同步更新。如果更新下載失敗，系統也會封鎖開啟舊版微型應用程式。

特別銘謝

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