ミニアプリのオープンソース プロジェクト

kbone

kbone プロジェクト(GitHub のオープンソース)は、適応レイヤでブラウザ環境をシミュレートするアダプタを実装しているため、ウェブ用に記述されたコードを変更せずにミニアプリで実行できます。いくつかのスターター テンプレート(VueReactPreact など)があり、これらのフレームワークから移行するウェブ デベロッパーのオンボーディングを容易にします。

新しいプロジェクトは kbone-cli ツールを使用して作成できます。プロジェクトを開始するフレームワークを尋ねられます。次のコード スニペットは、Preact のデモを示しています。以下のコード スニペットでは、mp コマンドでミニアプリをビルドし、web コマンドでウェブアプリをビルドし、build コマンドで本番環境ウェブアプリを作成します。

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

以下のコード スニペットは、シンプルなカウンタ コンポーネントを示しています。ミニアプリとウェブアプリでアイソモーフィック レンダリングされます。ミニアプリのオーバーヘッドは大きく、純粋に DOM 構造から判断されます。

import { h, Component } from "preact";
import "./index.css";

class Counter extends Component {
  state = { count: 1 };

  sub = () => {
    this.setState((prevState) => {
      return { count: --prevState.count };
    });
  };

  add = () => {
    this.setState((prevState) => {
      return { count: ++prevState.count };
    });
  };

  clickHandle = () => {
    if ("undefined" != typeof wx && wx.getSystemInfoSync) {
      wx.navigateTo({
        url: "../log/index?id=1",
      });
    } else {
      location.href = "log.html";
    }
  };

  render({}, { count }) {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{count}</span>
        <button onClick={this.add}>+</button>
        <div onClick={this.clickHandle}>跳转</div>
      </div>
    );
  }
}

export default Counter;
WeChat DevTools で開いた Preact kbone テンプレートのデモアプリ。DOM 構造を検査すると、ウェブアプリと比較して大幅なオーバーヘッドが発生します。
WeChat DevTools で開いた Preact kbone テンプレート デモアプリ。複雑な DOM 構造と、プラスボタンとマイナスボタンが実際には <button> 要素ではないことに注意してください。
ウェブブラウザで開いた Preact kbone テンプレートのデモアプリ。DOM 構造を検査すると、Preact コンポーネント コードに基づいて想定されるマークアップが表示されます。
ウェブブラウザで開いた Preact kbone テンプレートのデモアプリ。DOM 構造をメモします。

kbone-ui

kbone-ui プロジェクト(GitHub のオープンソース)は、ミニアプリ開発と kbone を使用した Vue.js 開発の両方を促進する UI フレームワークです。kbone-ui コンポーネントは、WeChat の組み込みミニアプリ コンポーネントのデザインをエミュレートします(上記のコンポーネントもご覧ください)。ブラウザで直接実行されるデモでは、利用可能なコンポーネントを確認できます。

ラジオボタン、スイッチ、入力、ラベルなどのフォーム関連のコンポーネントを示す kbone-ui フレームワークのデモ。
フォーム関連のコンポーネントを示す kbone-ui デモ。

WeUI

WeUI は、WeChat のデフォルトのビジュアル エクスペリエンスと整合する基本的なスタイル ライブラリのセットです。公式の WeChat デザインチームは、使用に対するユーザーの認識がより統一されるように、WeChat 内部ウェブページと WeChat ミニアプリのデザインを調整しています。これには、buttoncelldialogprogresstoastarticleactionsheeticon などのコンポーネントが含まれます。WeUI には、WXSS でスタイル設定された WeChat Mini アプリ用の weui-wxss(上記のスタイル設定を参照)、ウェブアプリ用の weui.js、WeChat React コンポーネント用の react-weui など、さまざまなバージョンがあります。

フォーム関連のコンポーネント(スイッチなど)を示す WeUI フレームワークのデモ。
スイッチを表示する WeUI デモアプリ。

Omi

Omi は、自称フロントエンドのクロス フレームワーク フレームワークです(GitHub でオープンソース)。Web Components、JSX、Virtual DOM、Functional スタイル、オブザーバー、プロキシを 1 つのフレームワークに統合し、小さなサイズで高いパフォーマンスを実現しています。コンポーネントを 1 回作成して、Omi、React、Preact、Vue.js、Angular など、あらゆる場所で使用できるようにすることを目的としています。Omi コンポーネントの作成は非常に直感的で、ほとんどのボイラープレートは不要です。

import { render, WeElement, define } from "omi";

define("my-counter", class extends WeElement {
  data = {
    count: 1,
  };

  static css = `
    span{
        color: red;
    }`;

  sub = () => {
    this.data.count--;
    this.update();
  };

  add = () => {
    this.data.count++;
    this.update();
  };

  render() {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{this.data.count}</span>
        <button onClick={this.add}>+</button>
      </div>
    );
  }
});

render(<my-counter />, "body");

Omiu

Omiu は、標準ウェブ コンポーネントのカスタム要素を出力する Omi に基づいて開発された、クロス フレームワークの UI コンポーネント ライブラリ(GitHub でオープンソース)です。

フォーム関連のコンポーネント(スイッチなど)を示す Omiu フレームワークのデモ。
スイッチが表示されている Omiu デモアプリ

WePY

WePYWePY は、ミニアプリがコンポーネント化された開発をサポートできるようにするフレームワークです。プリコンパイルにより、デベロッパーは好みの開発スタイルを選択してミニアプリを開発できます。フレームワークの詳細な最適化と Promise と非同期関数の導入により、ミニアプリ プロジェクトの開発がより簡単で効率的になりました。同時に、WePY は成長中のフレームワークでもあり、最適化されたフロントエンド ツールやフレームワーク設計のコンセプトやアイデアの大部分が Vue.js から取り入れられています。

<style lang="less">
  @color: #4d926f;
  .num {
    color: @color;
  }
</style>

<template>
  <div class="container">
    <div class="num" @tap="num++">{{num}}</div>
    <custom-component></custom-component>
    <vendor-component></vendor-component>
    <div>{{text}}</div>
    <input v-model="text" />
  </div>
</template>

<config>
  { usingComponents: { customComponent: '@/components/customComponent', vendorComponent:
  'module:vendorComponent' } }
</config>

<script>
  import wepy from "@wepy/core";

  wepy.page({
    data: {
      num: 0,
      text: "Hello World",
    },
  });
</script>
始めるための最初のステップを示す WePY の「スタートガイド」ドキュメント ページ。
WePY の「スタートガイド」ドキュメント

vConsole

vConsole プロジェクトは、モバイル ウェブページ用の軽量で拡張可能なフロントエンド デベロッパー ツールを提供します。DevTools のようなデバッガが提供されており、ウェブアプリやミニアプリに直接挿入できます。デモでは、最適化案を確認できます。vConsole には、ログ、システム、ネットワーク、要素、ストレージのタブがあります。

vConsole デモアプリ。vConsole は下部に開き、ログ、システム、ネットワーク、要素、ストレージのタブがあります。
要素エクスプローラを表示する vConsole デモアプリ。

WebWeb

weweb プロジェクト(GitHub のオープンソース)は、Hera ミニアプリ フレームワークの基盤となるフロントエンド フレームワークで、WeChat ミニアプリの構文との互換性が宣言されているため、ミニアプリのような方法でウェブ アプリケーションを作成できます。このドキュメントでは、すでにミニアプリをお持ちの場合でも、weweb のおかげでブラウザで実行できることが約束されています。私のテストでは、これは現在のミニアプリでは信頼性を持って機能しませんでした。これは、プロジェクトが最近更新されていないため、コンパイラが WeChat プラットフォームの変更を検出できなかったことが原因と考えられます。

Hera ミニアプリ フレームワークのドキュメント。サポートされている WeChat API(wx.request、wx.uploadFile など)が記載されています。
サポートされている WeChat API のリストが記載された Hera ミニアプリ フレームワークのドキュメント。
フォーム要素を表示しているブラウザで実行するために、weweb でコンパイルされた weweb デモ ミニアプリ。
ブラウザで実行するため、webweb でコンパイルされた webweb デモ ミニアプリ。

謝辞

この記事は、Joe MedleyKayce BasquesMilica MihajlijaAlan Kent、Keith Gu が確認しました。