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

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

Thomas Steiner

KBone

kbone プロジェクト（GitHub のオープンソース）を使用すると、Terraform でコードをシミュレートするこれにより、ウェブ用に記述されたコードをコードなしで実行できるようになります。便利です。いくつかのスターターテンプレート（主なもの） Vue、 React 事前準備）が存在することで、これらのフレームワークからウェブ開発者のオンボーディングエクスペリエンスが簡単になります

新しいプロジェクトは 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 コンポーネントコードに基づく想定内のマークアップが表示されます。 — </ph> ウェブブラウザで開いた Preact KBone テンプレートのデモアプリ。DOM の構造に注目してください。

KBone UI

kbone-ui プロジェクト（GitHub のオープンソース）は、Google が作成したミニアプリ開発と kbone を使用した Vue.js 開発の両方を促進します。kbone-ui コンポーネントによって、Google Cloud の WeChat の組み込みのミニアプリコンポーネント（上記のコンポーネントもご覧ください）。ブラウザで直接実行するデモでは、利用可能なコンポーネントを確認します。

ラジオボタン、スイッチ、入力、ラベルなどのフォーム関連のコンポーネントが表示されている kbone-ui フレームワークのデモ。 — </ph> フォーム関連のコンポーネントを示す kbone-ui のデモ。

WeUI

WeUI は、WeChat のものと一致する基本的なスタイルライブラリのセットです。表示することもできます。公式の WeChat デザインチームは、WeChat 用にカスタマイズされたデザインを社内向けに提供ウェブページや WeChat ミニアプリを使って、統一感を持たせることができますコンポーネントが含まれます button、cell、dialog、progress、toast、article、actionsheet、icon など。そこで、 weui-wxss など、さまざまなバージョンの WeUI が提供されています。 WXSS でスタイル設定された WeChat ミニアプリ（上記のスタイル設定を参照）ウェブアプリの場合は weui.js、 react-weui: WeChat React コンポーネント用。

フォーム関連のコンポーネント（スイッチ）を示す WeUI フレームワークのデモ。 — </ph> スイッチが表示されている WeUI デモアプリ。

Omi

Omi は、自称のフロントエンドクロスフレームワークフレームワーク（GitHub のオープンソース。Web コンポーネント、JSX、Virtual Private Cloud、 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

Omiu はクロスフレームワーク UI コンポーネントライブラリです。（GitHub のオープンソース）は Omi に基づいて開発され、カスタム要素を作成できます。

フォーム関連のコンポーネント（スイッチ）を示す Omiu フレームワークのデモ。 — </ph> スイッチが表示されている 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 の「スタートガイド」ドキュメントページをご覧ください。 — WePY の「スタートガイド」ご覧ください

vConsole

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

vConsole デモアプリ。vConsole が下部に開きます。[ログ]、[システム]、[ネットワーク]、[要素]、[ストレージ] の各タブがあります。 — </ph> Elements Explorer が表示されている vConsole デモアプリ。

WebWeb

weweb プロジェクト（GitHub のオープンソース）は、Google Cloud の基盤となる互換性のあると主張している Hera ミニアプリフレームワークこれにより、ミニアプリと同じようにウェブアプリケーションを作成できます。「ドキュメントでは、すでにミニアプリをお持ちの場合に、使用します。私のテストでは、これは現在のミニアプリでは確実にうまく機能しませんでした。おそらく、プロジェクトで最近更新が見つからず、コンパイラがコードの変更を見落としてしまう WeChat プラットフォーム

`wx.request`、`wx.uploadFile` など、サポートする WeChat API をリストした Hera ミニアプリフレームワークのドキュメント。 — </ph> サポートされている WeChat API のリストを示す Hera ミニアプリフレームワークのドキュメント。

フォーム要素を表示しているブラウザで実行するために、weweb でコンパイルされた weweb デモミニアプリ。 — </ph> ブラウザで実行するため、webweb でコンパイルされた weweb デモミニアプリ。

謝辞

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