Open-Source-Projekte der Mini-App

Thomas Steiner

kbone

Das kbone-Projekt (Open Source auf GitHub) implementiert einen Adapter, der eine Browserumgebung in der Anpassungsebene simuliert, sodass für das Web geschriebener Code ohne Änderungen in einer Mini-App ausgeführt werden kann. Es gibt mehrere Startervorlagen (darunter Vue, React und Preact), die den Einstieg für Webentwickler erleichtern, die mit diesen Frameworks vertraut sind.

Mit dem Tool kbone-cli kann ein neues Projekt erstellt werden. Ein Assistent fragt, mit welchem Framework das Projekt initiiert werden soll. Das folgende Code-Snippet zeigt die Preact-Demo. Im folgenden Code-Snippet erstellt der Befehl mp die Mini-App, der Befehl web die Webanwendung und build die Webanwendung für die Produktion.

npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build

Das folgende Code-Snippet zeigt eine einfache Zählerkomponente, die dann isomorph in einer Mini-App und einer Webanwendung gerendert wird. Der Overhead der Mini-App ist allein anhand der DOM-Struktur erheblich.

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

Das kbone-ui-Projekt (Open Source auf GitHub) ist ein UI-Framework, das sowohl die Entwicklung von Mini-Apps als auch die Vue.js-Entwicklung mit kbone erleichtert. Die kbone-ui Komponenten ahmen das Erscheinungsbild der integrierten Mini-App-Komponenten von WeChat (siehe auch Komponenten oben) nach. In einer Demo, die direkt im Browser ausgeführt wird, können Sie die verfügbaren Komponenten erkunden.

WeUI

WeUI ist eine Reihe grundlegender Stilbibliotheken, die mit der visuellen Standarddarstellung von WeChat's übereinstimmen. Das offizielle WeChat-Designteam hat Designs für interne WeChat-Webseiten und WeChat-Mini-Apps angepasst, um die Wahrnehmung der Nutzer einheitlicher zu gestalten. Es enthält Komponenten wie button, cell, dialog, progress, toast, article, actionsheet und icon. Es gibt verschiedene Versionen von WeUI, z. B. weui-wxss für WeChat-Mini-Apps, die mit WXSS gestaltet wurden (siehe oben), weui.js für Webanwendungen und react-weui für WeChat-React-Komponenten.

Omi

Omi ist ein selbsternanntes Frontend-Framework für mehrere Frameworks (Open Source auf GitHub. Es vereint Webkomponenten, JSX, virtuelles DOM, funktionalen Stil, Observer oder Proxy in einem Framework mit geringer Größe und hoher Leistung. Ziel ist es, Entwicklern zu ermöglichen, Komponenten einmal zu schreiben und überall zu verwenden, z. B. in Omi, React, Preact, Vue.js oder Angular. Das Schreiben von Omi-Komponenten ist sehr intuitiv und erfordert fast keinen Boilerplate-Code.

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 ist eine UI-Komponentenbibliothek für mehrere Frameworks (Open Source auf GitHub), die auf Omi basiert und benutzerdefinierte Elemente von Standard-Webkomponenten ausgibt.

WePY

WePY ist ein Framework, mit dem Mini-Apps die komponentenbasierte Entwicklung unterstützen können. Durch die Vorkompilierung können Entwickler ihren bevorzugten Entwicklungsstil für die Entwicklung von Mini-Apps auswählen. Die detaillierte Optimierung des Frameworks und die Einführung von Promises und asynchronen Funktionen erleichtern und beschleunigen die Entwicklung von Mini-App-Projekten. Gleichzeitig ist WePY auch ein wachsendes Framework, das einige optimierte Frontend-Tools und Framework-Designkonzepte und -Ideen, hauptsächlich von Vue.js, übernommen hat.

<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

Das vConsole-Projekt bietet ein leichtgewichtiges, erweiterbares Frontend-Entwicklungstool für mobile Webseiten. Es bietet einen Debugger im Stil der Entwicklertools, der direkt in Webanwendungen und Mini-Apps eingefügt werden kann. Eine Demo zeigt die Möglichkeiten. Die vConsole enthält Tabs für Logs, System, Netzwerk, Elemente und Speicher.

weweb

Das weweb-Projekt (Open Source auf GitHub) ist das zugrunde liegende Frontend-Framework des Hera-Mini-App-Frameworks, das mit der Syntax von WeChat-Mini-Apps kompatibel sein soll. So können Sie Webanwendungen wie Mini-Apps schreiben. In der Dokumentation wird versprochen, dass Sie mit weweb eine Mini-App im Browser ausführen können, wenn Sie bereits eine haben. In meinen Tests hat das bei aktuellen Mini-Apps nicht zuverlässig funktioniert. Das liegt wahrscheinlich daran, dass das Projekt in letzter Zeit nicht aktualisiert wurde, sodass der Compiler Änderungen in der WeChat-Plattform nicht berücksichtigt.

Danksagungen

Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, und Keith Gu geprüft.