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;
kbone-ui
kbone-ui 專案 (GitHub 上的開放原始碼) 是一種 UI 架構,可協助您使用 kbone 進行小型應用程式開發和 Vue.js 開發。kbone-ui 元件會模擬 WeChat 內建迷你應用程式元件的外觀和風格 (另請參閱上方的「元件」)。直接透過瀏覽器執行的示範可讓您探索可用元件。
WeUI
WeUI 是一組基本樣式程式庫,與 WeChat 的預設視覺體驗一致。WeChat 官方設計團隊為 WeChat 內部網頁和 WeChat 迷你應用程式設計了專屬設計,讓使用者對操作更統一的觀感也有所感。包含 button
、cell
、dialog
、progress
、toast
、article
、actionsheet
和 icon
等元件。我們提供不同版本的 WeUI,例如 weui-wxs 適用於搭配 WXSS 樣式的 WeChat 迷你應用程式 (請參閱上述的 Styling)、適用於網頁應用程式的 weui.js,以及 WeChat React 元件的 react-weui。
阿米
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 是依據 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 專案為行動網頁提供輕量級可擴充的前端開發人員工具。它提供與開發人員工具類似的偵錯工具,該偵錯工具可直接插入到網頁應用程式和迷你應用程式中。示範:展示商機。vConsole 包含記錄、系統、網路、元素和儲存空間的分頁。
Weweb
weweb 專案 (GitHub 上的開放原始碼) 是 Hera 迷你應用程式架構的基礎前端架構,該架構聲明與 WeChat 迷你應用程式的語法相容,因此您可以使用迷你應用程式來編寫網頁應用程式。文件能保證如果您已經有迷你應用程式,可以透過 Weweb 功能在瀏覽器中執行。在目前的實驗中,這項做法無法針對目前的小型應用程式可靠,最有可能是因為專案最近沒有出現更新,使得編譯器錯過 WeChat 平台變更。
特別銘謝
本文由 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 及 Keith Gu 審核。