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;
<button> 元素。
kbone-ui
kbone-ui 專案 (GitHub 上的開放原始碼) 是一個 UI 架構，可透過 kbone 簡化迷你應用程式和 Vue.js 的開發作業。kbone-ui 元件會模擬微信內建迷你應用程式元件的外觀和風格 (另請參閱上方的「元件」)。您可以透過直接在瀏覽器中執行的示範，探索可用的元件。
WeUI
WeUI 是一組基本樣式程式庫，與微信的預設視覺體驗一致。WeChat 官方設計團隊為 WeChat 內部網頁和 WeChat 小程式量身打造設計，讓使用者對使用體驗的認知更加一致。包括 button、cell、dialog、progress、toast、article、actionsheet 和 icon 等元件。WeUI 有不同版本，例如適用於以 WXSS 樣式設定的微信小程式的 weui-wxss (請參閱上方的「樣式設定」)，適用於網頁應用程式的 weui.js，以及適用於微信 React 元件的 react-weui。
Omi
Omi 自稱是前端跨架構框架 (GitHub 上的開放原始碼)。將 Web 元件、JSX、虛擬 DOM、函式樣式、觀察器或 Proxy 合併為一個框架，體積小巧且效能優異。其目標是讓開發人員撰寫一次元件，就能在任何地方使用，例如 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 為基礎開發，可輸出標準網頁元件的自訂元素。
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 專案提供輕量級、可擴充的前端開發人員工具，適用於行動網頁。這個平台提供類似開發人員工具的偵錯工具，可直接注入網頁應用程式和迷你應用程式。試用版展示了各種商機。vConsole 包含記錄、系統、網路、元素和儲存空間的分頁。
weweb
weweb 專案 (GitHub 上的開放原始碼) 是 Hera 迷你應用程式框架的基礎前端框架，據稱與微信迷你應用程式的語法相容，因此您可以透過迷你應用程式的方式編寫網頁應用程式。文件指出，如果您已有迷你應用程式，可以透過 weweb 在瀏覽器中執行。在我的實驗中，這項功能無法穩定運作，很可能是因為專案最近沒有更新，導致編譯器錯過 WeChat 平台中的變更。
特別銘謝
本文由 Joe Medley、 Kayce Basques、 Milica Mihajlija、 Alan Kent 和 Keith Gu 審查。