Markup languages
すでに説明したように、ミニアプリはプレーン HTML ではなく HTML 言語を使用して記述します。もし Vue.js テキスト補間とディレクティブを使用したことがあるとしたら、 XML 変換に似たコンセプトがかなり前から存在していましたが、 (XSLT).以下のコードは、WeChat の WXML ですが、そのコンセプトは すべてのミニアプリプラットフォームに AXML、Baidu の Swan Element、ByteDance の TTML （DevTools で Bxml と呼ばれているにもかかわらず）および Quick App の 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 のクローン作成
WXML テンプレートは、テンプレート定義にリンクする is 属性によって宣言的に使用できます。
<!-- 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 と呼ばれ、Baidu の
CSS です。ByteDance の場合、
言語は
TTSS。
この 2 つの共通点は、レスポンシブ ピクセルを使用して CSS を拡張できることです。通常の CSS を記述する際は
さまざまなモバイルデバイスの画面に合わせて
すべてのピクセルを変換する必要があるため
さまざまな幅とピクセル比で表示されます。TTSS は、その下層として rpx ユニットをサポートしています。つまり、
このミニアプリは、開発者からジョブを引き継ぎ、
指定した画面幅の 750rpx です。たとえば、画面幅が
393px（およびデバイスのピクセル比 2.75）、レスポンシブ 200rpx は実際のデバイスでは 104px になります
Chrome DevTools で検査した場合（393px / 750rpx * 200rpx 約 104px）Android では、
呼ばれるのは
密度非依存ピクセル。
<ph type="x-smartling-placeholder">/* 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 を使用しないため、ページで宣言されたスタイルは到達範囲となります。
すべてのコンポーネントに
適用できます一般的なスタイルシート ファイル構成では、1 つのルート スタイルシートを
グローバル スタイルと、ミニアプリの各ページに固有のページごとのスタイルシート。スタイルは
次のように動作する @import ルールを使用してインポート
@import CSS のルールです。HTML と同様に
動的なテキスト補間など、スタイルをインラインで宣言することもできます（
変更前）。
<view style="color:{{color}};" />
スクリプト作成
ミニアプリは「安全なサブセット」をサポートするモジュールのサポートを含む JavaScript の
CommonJS や RequireJS を念頭に置いた構文を使用します。
JavaScript コードは eval() 経由で実行できず、関数も作成できません。
new Function()。スクリプト実行コンテキストが V8 または
デバイス上の JavaScriptCore、V8 または
シミュレータの NW.js。通常、ES6 以降の構文を使用したコーディングは可能ですが、
ビルド ターゲットが ES5 の場合、特定の DevTools によってコードが自動的に ES5 にトランスパイルされるためです。
古い WebView 実装を使用しているオペレーティング システム（後述を参照）「
スーパーアプリ プロバイダのドキュメントでは、スクリプト言語は
JavaScript とは異なります。ただし、この記述は主に
モジュールの動作は、つまり標準の標準エラーや
ES モジュールをご覧ください。
前述のとおり、ミニアプリ プログラミングのコンセプトは、 model-view-viewmodel（MVVM）。 ロジック層とビュー層は異なるスレッドで実行されるため、ユーザー インターフェースは ブロックされる可能性があります。ウェブの用語では、スクリプトは ウェブワーカー。
WeChat のスクリプト言語は、
WXS、Alipay's
SJS、ByteDance の
SJS。
Baidu では、以下に示すように JS と呼んでいます。
できます。これらのスクリプトは、特別なタグ（例: <wxs>）を使用してインクルードする必要があります。
WeChat。一方、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 ブリッジ API
ミニアプリとオペレーティング システムをつなぐ JavaScript ブリッジにより、 OS 機能を使用する（強力な機能へのアクセスをご覧ください）。これは、 には、便利なメソッドも数多く用意されています。概要については、このモジュールのコースリソースにある WeChat Alipay、 Baidu ByteDance、 とクイックアプリがあります。
すべてのプラットフォームが（文字通りこのように）
ウェブサイト caniuse.com から着想を得た名前の canIUse() メソッド。対象
たとえば、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 は、次の 2 つのシナリオで、利用可能なアップデートを確認します。
- 最近使用したミニアプリのアップデートは、WeChat が実行されている間、WeChat によって定期的に確認されます。もし 更新が検出されると、更新がダウンロードされ、次回ユーザーがコールド スタートを実行したときに同期的に適用されます。 ミニアプリミニアプリのコールド スタートは、ミニアプリが現在実行されていない場合に発生する 開いたままになっています（バックグラウンドで 5 分間経過した後、WeChat がミニアプリを強制終了します）。
- WeChat は、ミニアプリのコールド スタート時にも更新を確認します。ユーザーが開いていないミニアプリの場合 長時間継続すると、更新が同期的にチェックされ、ダウンロードされます。アップデートのダウンロード中は ユーザーが待たなくてはなりません。ダウンロードが完了すると、アップデートが適用されてミニアプリが開きます。もし ダウンロードに失敗した場合（ネットワーク接続が不安定などによりミニアプリが開くなど）ミニアプリで ユーザーが最近開いたファイルがある場合は、更新の可能性がある更新がバックグラウンドで非同期にダウンロードされ、 次回ユーザーがミニアプリをコールド スタートしたときに適用されます。
ミニアプリでは、UpdateManager API を使用して以前のアップデートをオプトインできます。次の機能を提供します。
- アップデートの確認が完了すると、ミニアプリに通知します。
（
onCheckForUpdate） - アップデートがダウンロードされて利用可能になると、ミニアプリに通知します。
（
onUpdateReady） - アップデートをダウンロードできなかった場合、ミニアプリに通知します。
（
onUpdateFailed） - 利用可能なアップデートの自動インストールをミニアプリに許可します。自動インストールするとアプリが再起動します。
（
applyUpdate）
WeChat は、バックエンド システムでミニアプリ デベロッパー用に追加のアップデート カスタマイズ オプションも提供しています。 1.1 つのオプションとして、デベロッパーは特定のライセンスをすでに持っているユーザーに対して同期更新をオプトアウトできます。 最小バージョンをインストールし、代わりに強制的に非同期に更新するようにします。 2. もう一つのオプションでは、デベロッパーがミニアプリの最低限必要なバージョンを設定できます。これにより、 最小要件よりも低いバージョンからの非同期更新では、ミニアプリが 表示されます。また、Android または iOS モバイル デバイスにダウンロードした古いバージョンのミニアプリを開くこともできなくなります。 失敗します。
謝辞
この記事をレビューしたユーザー: Joe Medley Kayce Basques Milica Mihajlija 氏 Alan Kent、 と Keith Gu です。