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

Thomas Steiner

Twitter GitHub Glitch Mastodon 首頁

注意： 這篇文章是文章集合的一部分，每篇文章都是以先前的報導為基礎。如果你剛抵達這個頁面，建議你從開頭開始閱讀。

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 開發人員工具中開啟的 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-wxs 適用於搭配 WXSS 樣式的 WeChat 迷你應用程式 (請參閱上述的 Styling)、適用於網頁應用程式的 weui.js，以及 WeChat React 元件的 react-weui。

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 的開放原始碼)，會輸出標準網路元件的自訂元素。

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 審核。