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

Thomas Steiner

注: この記事は、各記事が前の記事を基に作成されている記事コレクションの一部です。このページに初めてアクセスした場合は、最初からお読みください。

kbone

kbone プロジェクト（GitHub のオープンソース）は、アダプテーション レイヤでブラウザ環境をシミュレートするアダプタを実装します。これにより、ウェブ用に書かれたコードをミニアプリで変更なしで実行できます。いくつかのスターター テンプレート（Vue、React、Preact など）があり、これらのフレームワークから来たウェブ デベロッパーのオンボーディング エクスペリエンスを容易にします。

新しいプロジェクトは、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 構造と、プラスボタンとマイナスボタンが実際には <button> 要素ではないことに注意してください。

ウェブブラウザで Preact kbone テンプレートのデモアプリが開きました。DOM 構造をメモします。

kbone-ui

kbone-ui プロジェクト（GitHub のオープンソース）は、kbone を使用したミニアプリ開発と Vue.js 開発の両方を容易にする UI フレームワークです。kbone-ui コンポーネントは、WeChat の組み込みミニアプリ コンポーネントのルック アンド フィールをエミュレートします（上記のコンポーネントも参照してください）。ブラウザで直接実行できるデモでは、利用可能なコンポーネントを確認できます。

フォーム関連のコンポーネントを示す kbone-ui デモ。

WeUI

WeUI は、WeChat のデフォルトの視覚的エクスペリエンスと一貫性のある基本的なスタイル ライブラリのセットです。WeChat の公式デザインチームは、WeChat の内部ウェブページと WeChat ミニアプリ向けにデザインをカスタマイズし、ユーザーが使用感をより均一に感じられるようにしました。これには、button、cell、dialog、progress、toast、article、actionsheet、icon などのコンポーネントが含まれます。WeUI には、WXSS でスタイル設定された WeChat ミニアプリ用の weui-wxss（上記のスタイル設定を参照）、ウェブアプリ用の weui.js、WeChat React コンポーネント用の react-weui など、さまざまなバージョンがあります。

スイッチを表示する WeUI デモアプリ。

Omi

Omi は、フロントエンドのクロス フレームワーク フレームワーク（GitHub でオープンソース）を自称しています。Web Components、JSX、Virtual DOM、関数型スタイル、オブザーバー、Proxy を 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 デモアプリ。

WePY

WePY は、ミニアプリがコンポーネント化された開発をサポートできるようにするフレームワークです。事前コンパイルにより、デベロッパーは好みの開発スタイルを選択してミニアプリを開発できます。フレームワークの最適化、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 の「スタートガイド」ドキュメント。

vConsole

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

要素エクスプローラを表示する vConsole デモアプリ。

weweb

weweb プロジェクト（GitHub のオープンソース）は、WeChat ミニアプリの構文と互換性があるとされる Hera ミニアプリ フレームワークの基盤となるフロントエンド フレームワークです。これにより、ミニアプリの形式でウェブ アプリケーションを記述できます。ドキュメントには、ミニアプリをすでに所有している場合は、weweb を使用してブラウザで実行できると記載されています。私のテストでは、現在のミニアプリでこの方法が確実に機能しませんでした。おそらく、プロジェクトが最近更新されていないため、コンパイラが WeChat プラットフォームの変更を見逃しているためです。

サポートされている WeChat API のリストを示す Hera ミニアプリ フレームワークのドキュメント。

weweb でコンパイルされ、ブラウザで実行される weweb デモ ミニアプリ。

成功: 次の章では、ミニアプリの方法でプログラミングする方法を学びます。

謝辞

この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu によってレビューされました。