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

Thomas Steiner

Twitter GitHub Glitch Mastodon ホームページ

注: この投稿は記事コレクションの一部です。各記事は過去の記事に基づいています。ここまで読んだら、最初から読んでもよいでしょう。

骨

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 は、自称フロントエンドのクロスフレームワーク フレームワークです（GitHub のオープンソース。ウェブ コンポーネント、JSX、Virtual DOM、機能スタイル、オブザーバー、プロキシを、小さなサイズと高パフォーマンスの 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 は、標準のウェブ コンポーネントのカスタム要素を出力する 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 のオープンソース）は、Hera ミニアプリ フレームワークの基盤となるフロントエンド フレームワークです。WeChat ミニアプリの構文との互換性が保証されているため、ミニアプリと同じようにウェブ アプリケーションを記述できます。このドキュメントでは、すでにミニアプリがある場合は、weweb を使用してブラウザで実行できると書かれています。私のテストでは、これは現在のミニアプリでは確実には動作しませんでした。おそらく、プロジェクトに最近更新が見られず、コンパイラが WeChat プラットフォームの変更を見落としていることが原因です。

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

weweb を使用してコンパイルされ、ブラウザで動作する webweb デモ ミニアプリ。

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

謝辞

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