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

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 結構，以及加號和減號按鈕實際上是 <button> 元素的方式。

，瞭解如何調查及移除這項存取權。

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

kbone-ui

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

顯示表單相關元件的 kbone-ui 示範。

WeUI

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

顯示切換鈕的 WeUI 試用版應用程式。

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 為基礎開發的， 標準網頁元件的自訂元素

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

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

Weweb

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

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

，瞭解如何調查及移除這項存取權。

Weweb Demo mini 應用程式採用 Weweb 編譯，可在瀏覽器中執行。

，瞭解如何調查及移除這項存取權。

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

特別銘謝

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