本頁面由 Cloud Translation API 翻譯而成。

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

Thomas Steiner

KB

kbone 專案 (GitHub 上的開放原始碼) 會實作能模擬瀏覽器環境，因此專為網路編寫的程式碼不必基本功能。多個新手範本 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;

敬上

Preact kbone 範本示範應用程式是在 WeChat 開發人員工具中開啟。與網頁應用程式相比，檢查 DOM 結構會產生明顯負擔。 — Preact kbone 範本示範應用程式是在 WeChat 開發人員工具中開啟。請留意複雜的 DOM 結構，以及加號和減號按鈕實際上是 `<button>` 元素的方式。

Preact kbone 範本示範應用程式是在網路瀏覽器中開啟。檢查 DOM 結構時，系統會根據 Preact 元件程式碼顯示預期出現的標記。 — Preact kbone 範本示範應用程式是在網路瀏覽器中開啟。請注意 DOM 結構。

kbone-ui

kbone-ui 專案 (GitHub 上的開放原始碼) 是一種 UI 架構，協助小規模應用程式開發和使用 kbone 的 Vue.js 開發作業。kbone-ui 能模擬 Kubernetes 的 WeChat 內建的迷你應用程式元件 (另請參閱上方的「元件」一節)。A 罩杯示範是直接在瀏覽器中執行的您將認識可用元件

WeUI

WeUI 是一組與 WeChat 一致的基本樣式程式庫預設視覺體驗WeChat 官方設計團隊專為 WeChat 內部設計，網頁和 WeChat 迷你應用程式使用更統一的觀感。其中包含元件例如 button、cell、dialog、progress、toast、article、actionsheet 和 icon。有是不同版本的 WeUI，例如 weui-wxs 採用 WXSS 樣式的 WeChat 迷你應用程式 (請參閱上方的「樣式設定」一節)。 weui.js 適用於網頁應用程式，針對 WeChat React 元件提供回應最佳做法。

Omi

Omi 是自主認可的前端跨架構架構 (GitHub 的開放原始碼功能，它合併了 Web 元件、JSX、Virtual 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>

敬上

WePY 「開始使用」說明文件頁面，上面顯示了踏出第一步的第一步。 — WePY「開始使用」說明文件。

vConsole

vConsole 專案提供了輕量可延伸的行動網頁的前端開發人員工具。它提供類似開發人員工具的偵錯工具直接插入網頁應用程式和迷你應用程式。A 罩杯 demo 會說明商機。舊版管理中心包括記錄檔、系統、網路、元素和儲存空間的分頁。

Weweb

weweb 專案 (GitHub 上的開放原始碼) 是 Hera 迷你應用程式架構，宣稱能彼此相容與 WeChat 迷你應用程式語法搭配使用，讓開發人員能以迷你應用程式的方式編寫網頁應用程式。文件保證，如果您手上已經有迷你應用程式，可以在瀏覽器中執行，因為網頁在我的實驗中，這個方法不適用於目前的迷你應用程式專案最近未偵測到更新，導致編譯器錯過微信平台

Hera mini 應用程式架構的說明文件，其中列出應用程式支援的 WeChat API，例如 `wx.request`、`wx.uploadFile` 等。 — Hera mini 應用程式架構說明文件，列出支援的 WeChat API 清單。

使用 Weweb 編譯的 Weweb 試用版迷你應用程式，以便在瀏覽器中執行，顯示表單元素。 — Weweb Demo mini 應用程式採用 Weweb 編譯，可在瀏覽器中執行。

特別銘謝

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