骨
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;
kbone-ui
kbone-ui プロジェクト(GitHub のオープンソース)は、ミニアプリの開発と kbone を使用した Vue.js の開発の両方を容易にする UI フレームワークです。kbone-ui コンポーネントは、WeChat の組み込みのミニアプリ コンポーネントのデザインをエミュレートします(上記のコンポーネントもご覧ください)。ブラウザで直接実行されるデモでは、使用可能なコンポーネントを確認できます。
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 などです。
近江
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 のオープンソース)です。
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>
vConsole
vConsole プロジェクトは、モバイル ウェブページ用の軽量で拡張可能なフロントエンド デベロッパー ツールを提供します。ウェブアプリやミニアプリに直接挿入できる、DevTools のようなデバッガを使用できます。デモで機会を紹介します。vConsole には、ログ、システム、ネットワーク、要素、ストレージのタブがあります。
Weweb
weweb プロジェクト(GitHub のオープンソース)は、Hera ミニアプリ フレームワークの基盤となるフロントエンド フレームワークです。WeChat ミニアプリの構文との互換性が保証されているため、ミニアプリと同じようにウェブ アプリケーションを記述できます。このドキュメントでは、すでにミニアプリがある場合は、weweb を使用してブラウザで実行できると書かれています。私のテストでは、これは現在のミニアプリでは確実には動作しませんでした。おそらく、プロジェクトに最近更新が見られず、コンパイラが WeChat プラットフォームの変更を見落としていることが原因です。
謝辞
この記事は、Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent、Keith Gu によってレビューされました。