迷你應用程式開放原始碼專案

Thomas Steiner

注意：這篇文章是系列文章的一部分，每篇文章都會延續先前的內容。假如你剛剛抵達此頁面，建議你從開始開始閱讀。

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;

在 WeChat DevTools 中開啟的 Preact kbone 範本示範應用程式。請注意複雜的 DOM 結構，以及加號和減號按鈕實際上並非 <button> 元素。

在網路瀏覽器中開啟的 Preact kbone 範本示範應用程式。請注意 DOM 結構。

kbone-ui

kbone-ui 專案 (GitHub 上的開放原始碼) 是 UI 架構，可透過 kbone 輕鬆開發迷你應用程式和 Vue.js。kbone-ui 元件會模擬 WeChat 內建的迷你應用程式元件的外觀和感受 (請參閱上方的「元件」)。您可以直接在瀏覽器中執行示範，探索可用的元件。

Kbone UI 示範：顯示表單相關元件。

WeUI

WeUI 是一組基本樣式程式庫，與 WeChat 的預設視覺體驗一致。官方 WeChat 設計團隊已為 WeChat 內部網頁和 WeChat 迷你應用程式設計專屬介面，讓使用者對應用程式的使用體驗更加一致。包括 button、cell、dialog、progress、toast、article、actionsheet 和 icon 等元件。您可以使用不同版本的 WeUI，例如 weui-wxss (適用於使用 WXSS 設定樣式的 WeChat 迷你應用程式，請參閱上方的「樣式」)、weui.js (適用於網頁應用程式)，以及 react-weui (適用於 WeChat 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 為基礎開發，可輸出標準網頁元件的自訂元素。

顯示切換鈕的 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「入門」說明文件。

vConsole

vConsole 專案提供可擴充的輕量擴充式前端開發人員工具，適用於行動網頁。它提供類似於開發人員工具的偵錯工具，可直接插入網路應用程式和迷你應用程式。示範可展示商機。vConsole 包含記錄、系統、網路、元素和儲存空間等分頁。

顯示元素探索工具的 VConsole 試用版應用程式。

weweb

weweb 專案 (GitHub 上的開放原始碼) 是 Hera 迷你應用程式架構的基礎前端架構，聲稱可與 WeChat 迷你應用程式的語法相容，因此您可以以迷你應用程式的方式編寫網頁應用程式。說明文件保證，如果您已有迷你應用程式，就可以透過 weweb 在瀏覽器中執行該應用程式。在我的實驗中，這項做法無法可靠地運作目前的迷你應用程式，這很可能是因為專案最近沒有更新，導致編譯器遺漏 WeChat 平台的變更。

Hera 迷你應用程式架構說明文件，列出支援的 WeChat API。

使用 weweb 編譯的 weweb 示範迷你應用程式，可在瀏覽器中執行。

成功：在下一章節中，您將瞭解如何以迷你應用程式的方式編寫程式。

特別銘謝

本文評論者為 Joe Medley、Kayce Basques、Milica Mihajlija、Alan Kent 和 Keith Gu。