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

ミニアプリコンポーネント

Thomas Steiner

ウェブコンポーネント

ウェブコンポーネントは、デベロッパーがコンポーネントを組み合わせて優れたアプリを構築できるという約束から始まりました。このようなアトミックコンポーネントの例としては、GitHub の time-elements、Stefan Judis の web-vitals-element、Google のダークモード切り替えボタンなどがあります。ただし、完全なデザインシステムに関しては、同じベンダーの一貫したコンポーネントセットに依存することを好む傾向があります。例を挙げると、SAP の UI5 ウェブコンポーネント、ポリマー要素、Vaadin の要素、Microsoft の FAST、マテリアルウェブコンポーネント、AMP コンポーネントなどがあります。ただし、この記事の範囲外のさまざまな要因により、多くのデベロッパーが React、Vue.js、Ember.js などのフレームワークにも注目しています。スーパーアプリプロバイダは、デベロッパーがこれらのオプションから自由に選択できるようにするのではなく（または、見方によっては、テクノロジーの選択を強制するのではなく）、デベロッパーが使用しなければならない一連のコンポーネントを標準で提供しています。

ミニアプリのコンポーネント

これらのコンポーネントは、前述のコンポーネントライブラリのいずれかと考えることができます。使用可能なコンポーネントの概要については、WeChat のコンポーネントライブラリ、ByteDance のコンポーネント、Alipay のコンポーネント、Baidu のコンポーネント、Quick App コンポーネントをご覧ください。

前述の例で説明したように、WeChat の <image> は内部的にはウェブコンポーネントですが、技術的にはウェブコンポーネントではないコンポーネントもあります。<map> や <video> などの一部のコンポーネントは、WebView の上に重ねて表示される OS 組み込みコンポーネントとしてレンダリングされます。デベロッパーには、この実装の詳細は公開されず、他のコンポーネントと同様にプログラムされます。

詳細はプロバイダによって異なりますが、全体的なプログラミングのコンセプトはすべてのスーパーアプリプロバイダで同じです。重要なコンセプトとして、前述のマークアップ言語で説明したように、データバインディングがあります。通常、コンポーネントは機能別にグループ化されているため、作業に適したコンポーネントを見つけやすくなります。以下は、Alipay の分類の例です。これは、他のベンダーのコンポーネントグループに似ています。

コンテナを表示する
- view
- swiper
- scroll-view
- cover-view
- cover-image
- movable-view
- movable-area
基本的なコンテンツ
- text
- icon
- progress
- rich-text
フォームコンポーネント
- button
- form
- label
- input
- textarea
- radio
- radio-group
- checkbox
- checkbox-group
- switch
- slider
- picker-view
- picker
ナビゲーション
- navigator
メディアコンポーネント
- image
- video
キャンバス
- canvas
地図
- map
コンポーネントを開く
- web-view
- lifestyle
- contact-button
ユーザー補助
- aria-component

以下は、index.js で指定された画像データ配列をループする a:for ディレクティブ（リストのレンダリングを参照）で使用される Alipay の <image> です。

/* index.js */
Page({
  data: {
    array: [
      {
        mode: "scaleToFill",
        text: "scaleToFill",
      },
      {
        mode: "aspectFit",
        text: "aspectFit",
      },
    ],
    src: "https://images.example.com/sample.png",
  },
  imageError(e) {
    console.log("image", e.detail.errMsg);
  },
  onTap(e) {
    console.log("image tap", e);
  },
  imageLoad(e) {
    console.log("image", e);
  },
});

<!-- index.axml -->
<view class="page">
  <view class="page-section" a:for="{{array}}" a:for-item="item">
    <view class="page-section-demo" onTap="onTap">
      <image
        class="image"
        mode="{{item.mode}}"
        onTap="onTap"
        onError="imageError"
        onLoad="imageLoad"
        src="{{src}}"
        lazy-load="true"
        default-source="https://images.example.com/loading.png"
      />
    </view>
  </view>
</view>

item.mode と mode 属性、src と src 属性、3 つのイベントハンドラ onTap、onError、onLoad と、同じ名前の関数との間で行われているデータバインディングに注目してください。前述のように、<image> タグは内部で、画像の最終的なサイズのプレースホルダ、オプションの遅延読み込み、デフォルトのソースなどを備えた <div> に変換されます。

コンポーネントで使用可能な構成オプションはすべて、ドキュメントに記載されています。ドキュメントに埋め込まれたシミュレータを使用したコンポーネントプレビューにより、コードをすぐに確認できます。

コンポーネントのプレビューが埋め込まれた Alipay コンポーネントのドキュメント。シミュレートされた iPhone 6 でレンダリングされたコンポーネントを示すシミュレータ付きのコードエディタが表示されています。 — 埋め込みコンポーネントプレビューを含む Alipay コンポーネントのドキュメント。

別のブラウザタブで実行されている Alipay コンポーネントのプレビュー。シミュレートされた iPhone 6 でレンダリングされたコンポーネントを示すシミュレータ付きのコードエディタが表示されています。 — Alipay コンポーネントのプレビューが、独自のタブにポップアウトしました。

各コンポーネントには、Alipay アプリでスキャンできる QR コードもあります。この QR コードをスキャンすると、コンポーネントの例が自己完結型の最小限の例で開きます。

ドキュメントに記載されている QR コードをスキャンした後、実際のデバイスでプレビューしている Alipay の「image」コンポーネント。 — ドキュメントのQR コードリンクに沿って、実際のデバイスで Alipay `<image>` コンポーネントのプレビューを表示。

デベロッパーは、独自の URI スキーム antdevtool-tiny:// を利用して、ドキュメントから Alipay DevTools IDE に直接ジャンプできます。これにより、インポートするミニアプリプロジェクトにドキュメントを直接リンクできるため、デベロッパーはすぐにコンポーネントの使用を開始できます。

カスタムコンポーネント

ベンダー提供のコンポーネントを使用する以外に、デベロッパーはカスタムコンポーネントを作成することもできます。このコンセプトは、WeChat、ByteDance、Alipay、Baidu、クイックアプリで使用できます。たとえば、Baidu カスタムコンポーネントは、custom.swan、custom.css、custom.js、custom.json の 4 つのファイルで構成され、同じフォルダに存在する必要があります。

ファイル custom.json は、フォルダの内容をカスタムコンポーネントとして表します。

{
  "component": true
}

custom.swan ファイルにはマークアップが、custom.css ファイルには CSS が含まれています。

<view class="name" bindtap="tap">{{name}} {{age}}</view>

.name {
  color: red;
}

ファイル custom.js にはロジックが含まれています。コンポーネントのライフサイクル関数は、attached()、detached()、created()、ready() です。このコンポーネントは、ページのライフサイクルイベント（show() と hide()）にも反応できます。

Component({
  properties: {
    name: {
      type: String,
      value: "swan",
    },
  },
  data: {
    age: 1,
  },
  methods: {
    tap: function () {},
  },
  lifetimes: {
    attached: function () {},
    detached: function () {},
    created: function () {},
    ready: function () {},
  },
  pageLifetimes: {
    show: function () {},
    hide: function () {},
  },
});

カスタムコンポーネントは index.json でインポートできます。インポートのキーによって、index.swan でカスタムコンポーネントを使用できる名前（ここでは "custom"）が決まります。

{
  "usingComponents": {
    "custom": "/components/custom/custom"
  }
}

<view>
  <custom name="swanapp"></custom>
</view>

謝辞

この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu が確認しました。

ミニアプリ コンポーネント

ウェブ コンポーネント

ミニアプリのコンポーネント

カスタム コンポーネント

謝辞

ミニアプリコンポーネント

ウェブコンポーネント

カスタムコンポーネント