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

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

Thomas Steiner

ウェブコンポーネント

従来のウェブコンポーネントデベロッパーがアプリを組み合わせて優れたアプリを構築できるようになります例 GitHub の time-elements の Stefan ジュディスweb-vitals-element つまり Google のダークモードの切り替え。データのとはいえ、一貫したデザインシステムのセットに頼ることをコンポーネントを同じベンダーから使用できます。例として、SAP のもの、 UI5 Web Components は、ポリマー要素 Vaadin の要素、Microsoft の FAST、マテリアルウェブコンポーネント、 AMP コンポーネントなど、多岐にわたります。理由: 多数のデベロッパーがこの記事で取り上げていませんが、フレームワーク（React、Vue.js など） Ember.js など。デベロッパーに選択肢の自由を与えるのではなく、これらの選択肢のいずれかを選択する（または、ユーザーの視点によっては、テクノロジーの選択を強制する）スーパーアプリプロバイダは、デベロッパーが使用する必要がある一連のコンポーネントを普遍的に提供しています。

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

これらのコンポーネントは、前述のコンポーネントライブラリと同じように考えることができます。特典を使用可能なコンポーネントの概要、 WeChat のコンポーネントライブラリ ByteDance のコンポーネント Alipay のコンポーネント、 Baidu クイックアプリコンポーネント。

先ほどお見せしたとおり、たとえば WeChat の<image> はウェブコンポーネントであり、すべてのコンポーネントが厳密にはウェブコンポーネントというわけではありません。一部 <map> や <video> などのコンポーネントは、次のようにレンダリングされます。 OS 組み込みコンポーネント WebView の上にレイヤ化されますこの実装の詳細は公開されませんが、他のコンポーネントと同様にプログラムされます。

細かい点は異なりますが、全体的なプログラミングのコンセプトはすべての super アプリで同じです接続できますデータバインディングは重要な概念で、マークアップ言語。通常、コンポーネントは機能別にグループ化されるため、選ぶのが簡単です。以下は、Alipay の分類の例です。これは似たようなものです。他のベンダーのコンポーネントグループに関連しています

コンテナを表示する <ph type="x-smartling-placeholder">
- view
- swiper
- scroll-view
- cover-view
- cover-image
- movable-view
- movable-area
基本的なコンテンツ <ph type="x-smartling-placeholder">
- text
- icon
- progress
- rich-text
フォームのコンポーネント <ph type="x-smartling-placeholder">
- button
- form
- label
- input
- textarea
- radio
- radio-group
- checkbox
- checkbox-group
- switch
- slider
- picker-view
- picker
ナビゲーション <ph type="x-smartling-placeholder">
- navigator
メディアコンポーネント <ph type="x-smartling-placeholder">
- image
- video
描画キャンバス <ph type="x-smartling-placeholder">
- canvas
マップ <ph type="x-smartling-placeholder">
- map
オープンコンポーネント <ph type="x-smartling-placeholder">
- web-view
- lifestyle
- contact-button
ユーザー補助 <ph type="x-smartling-placeholder">
- aria-component

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

/* 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 にコンポーネントがレンダリングされるシミュレータ付きのコードエディタが表示されています。 — </ph> コンポーネントプレビューが埋め込まれた Alipay コンポーネントのドキュメント。

別のブラウザタブで実行されている Alipay コンポーネントのプレビュー。シミュレーションされた iPhone 6 でレンダリングされたコンポーネントとシミュレータを含むコードエディタが表示されています。 — </ph> Alipay コンポーネントのプレビューが専用のタブにポップアウトしました。

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

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

デベロッパーは、独自の URI スキーム antdevtool-tiny://。これにより、ドキュメントが個々のインフラストラクチャに直接リンクできるようになり、用意されているため、デベロッパーはすぐにコンポーネントを使い始めることができます。

カスタムコンポーネント

開発者は、ベンダー提供のコンポーネントを使用するほかに、カスタムコンポーネントを作成することもできます。「データアナリストに WeChat、 ByteDance、 Alipay Baidu、クイックアプリ。たとえば、バイドゥのカスタムコンポーネントは 4 つのファイルで構成され、同じフォルダに配置する必要があります。 custom.swan、custom.css、custom.js、custom.json。

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 にインポートできます。名前はインポートのキーによって決まります（ここでは "custom"）を使用して、カスタムコンポーネントを index.swan で使用できます。

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

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

謝辞

この記事をレビューしたユーザー: Joe Medley Kayce Basques Milica Mihajlija 氏 Alan Kent、と Keith Gu です。

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

ウェブ コンポーネント

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

カスタム コンポーネント

謝辞

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

ウェブコンポーネント

カスタムコンポーネント