このページは Cloud Translation API によって翻訳されました。

ミニアプリのマークアップ、スタイル設定、スクリプト作成、更新

Thomas Steiner

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 では、呼ばれるのは密度非依存ピクセル。

Chrome DevTools で、レスポンシブピクセルパディングが `200rpx` で指定されたビューを調査すると、Pixel 3a デバイスでは実際には `104px` であることがわかります。 — </ph> Chrome DevTools を使用して、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 を使用しないため、ページで宣言されたスタイルは到達範囲となります。すべてのコンポーネントに適用できます一般的なスタイルシートファイル構成では、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 です。