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

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;