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

Thomas Steiner

標記語言

如前所述，迷你應用程式是以 HTML 方言編寫，而非純 HTML。如果發生以下情況： 曾處理 Vue.js 文字內插和指令 立即在家，但類似概念其實是在 XML 轉換之前就存在 (XSLT).以下是 WeChat 的程式碼範例 WXML，這個概念是 所有迷你應用程式平台都一樣 AXML，百度 ByteDance 的 Swan Element TTML (儘管開發人員工具命名為 Bxml)，以及「快速應用程式」的 HTML。和 Vue.js 一樣 簡單的應用程式程式設計概念 model-view-viewmodel (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 的方言而出現。我們為微信 WXSS. Alipay 則是以 ACSS 為例，百度 CSS 和 ByteDance 方言稱為 TTSS： 這些商店的共同點在於，他們是使用回應式像素擴充 CSS。編寫一般 CSS 時 開發人員需要轉換所有像素單位，以配合各種行動裝置螢幕進行調整 不同的寬度和像素比例TTSS 支援 rpx 單位做為基礎圖層，也就是說， 迷你應用程式會從開發人員接手工作，並代為轉換單位 指定的螢幕寬度為 750rpx。舉例來說，螢幕寬度為 393px (且裝置像素比例為 2.75)，回應式 200rpx 會在實體裝置上變成 104px 使用 Chrome 開發人員工具檢查時 (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 規則。就像 HTML 一樣 您也可宣告為內嵌樣式，包括動態文字內插類型 (請參閱 before)。

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

影片腳本

迷你應用程式支援「安全子集」支援的模組 JavaScript 支援使用不同變數的模組 語法提醒 CommonJS 或 RequireJS。 JavaScript 程式碼無法透過 eval() 執行，也無法使用 new Function()。指令碼執行環境為 V8 或 裝置上的 JavaScriptCore，以及 V8 或 模擬工具中的 NW.js。通常可以使用 ES6 或更新的語法來編寫程式 因為特定開發人員工具中的建構目標為 並使用舊版 WebView 執行 (詳情請參閱後續章節)。 向超級應用程式供應商的說明文件明確指出，他們的指令碼語言 有別於 JavaScript然而，這種陳述主要用意 模組的運作方式，也就是不支援 ES 模組。

如先前所說，最簡單的應用程式程式設計概念 model-view-viewmodel (MVVM) 即可。 邏輯層和檢視區塊層會在不同的執行緒上執行，因此使用者介面不會 並遭長時間執行的作業阻擋以網路術語來說，您可以想成 網路工作處理序：

我們稱之為 WeChat 的指令碼語言 WXS、Alipay SJS 和 ByteDance 一樣 SJS。 百度會在提及 JS 時說出「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 橋接器 使用 OS 功能 (請參閱強大功能的存取權。這項服務 也提供多種方便的方法如需簡介 WeChat 的成員 Alipay、 Baidu ByteDance， 和快速應用程式。

功能偵測非常簡單，因為所有平台都提供 (一般稱為) 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 會在背景執行 5 分鐘後，強制關閉迷你應用程式)。
  2. 當迷你應用程式冷啟動時，WeChat 也會檢查應用程式是否有更新。使用者未開啟的迷你應用程式 很長一段時間，系統會以同步的方式檢查及下載更新。下載更新時 使用者就必須等待。下載完成後，系統會套用更新，並顯示迷你應用程式。如果 下載失敗 (例如網路連線不穩定)，無論如何都會開啟小型應用程式。適用於符合以下條件的迷你應用程式 使用者最近開啟的內容，所有可能的更新都會以非同步方式在背景下載，然後 在使用者下次冷啟動迷你應用程式時套用。

迷你應用程式可以使用 UpdateManager API，選擇接收先前的更新。它提供以下功能：

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

此外，WeChat 也為後端系統中的小型應用程式開發人員提供其他更新自訂選項： 1.其中一個做法可讓開發人員為 安裝迷你應用程式的最低版本，反而強制更新為非同步。 2. 另一個做法則可讓開發人員設定迷你應用程式的最低需求版本。這會導致 若是低於最低版本需求的非同步更新，則在 6 次後強制重新載入迷你應用程式 系統就會套用更新如果下載 更新失敗。

特別銘謝

本文評論者： Joe Medley Kayce Basques Milica Mihajlija、 Alan Kent、 和 Keith Gu