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 構造を調べると、ウェブアプリに比べてオーバーヘッドが大幅に大きいことがわかります。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=5&hl=ja)
<button>
要素ではないことに注意してください。
![ウェブブラウザで開いた Preact KBone テンプレートのデモアプリ。DOM 構造を調べると、Preact コンポーネント コードに基づく想定内のマークアップが表示されます。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=5&hl=ja)
KBone UI
kbone-ui プロジェクト (GitHub のオープンソース)は、Google が作成した ミニアプリ開発と kbone を使用した Vue.js 開発の両方を促進します。kbone-ui コンポーネントによって、Google Cloud の WeChat の組み込みのミニアプリ コンポーネント (上記のコンポーネントもご覧ください)。 ブラウザで直接実行するデモでは、 利用可能なコンポーネントを確認します。
<ph type="x-smartling-placeholder">![ラジオボタン、スイッチ、入力、ラベルなどのフォーム関連のコンポーネントが表示されている kbone-ui フレームワークのデモ。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=5&hl=ja)
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 フレームワークのデモ。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=5&hl=ja)
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 に基づいて開発され、 カスタム要素を作成できます。
<ph type="x-smartling-placeholder">![フォーム関連のコンポーネント(スイッチ)を示す Omiu フレームワークのデモ。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=5&hl=ja)
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 の「スタートガイド」ドキュメント ページをご覧ください。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=5&hl=ja)
vConsole
vConsole プロジェクトは、軽量で拡張可能な モバイル ウェブページ用のフロントエンド デベロッパー ツール。DevTools に似たデバッガを備えており ウェブアプリやミニアプリに直接挿入できます。 demo は、さまざまな機会を示しています。vConsole ログ、システム、ネットワーク、要素、ストレージのタブがあります。
<ph type="x-smartling-placeholder">![vConsole デモアプリ。vConsole が下部に開きます。[ログ]、[システム]、[ネットワーク]、[要素]、[ストレージ] の各タブがあります。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=5&hl=ja)
WebWeb
weweb プロジェクト (GitHub のオープンソース)は、Google Cloud の基盤となる 互換性のあると主張している Hera ミニアプリ フレームワーク これにより、ミニアプリと同じようにウェブ アプリケーションを作成できます。「 ドキュメントでは、すでにミニアプリをお持ちの場合に、 使用します。私のテストでは、これは現在のミニアプリでは確実にうまく機能しませんでした。おそらく、 プロジェクトで最近更新が見つからず、コンパイラがコードの変更を見落としてしまう WeChat プラットフォーム
<ph type="x-smartling-placeholder">![`wx.request`、`wx.uploadFile` など、サポートする WeChat API をリストした Hera ミニアプリ フレームワークのドキュメント。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=5&hl=ja)
![フォーム要素を表示しているブラウザで実行するために、weweb でコンパイルされた weweb デモ ミニアプリ。](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=5&hl=ja)
謝辞
この記事をレビューしたユーザー: Joe Medley Kayce Basques Milica Mihajlija 氏 Alan Kent、 と Keith Gu です。