Kbone
Im kbone-Projekt (Open Source auf GitHub) wird ein Adapter implementiert, der eine Browserumgebung in der Anpassungsebene simuliert, damit für das Web geschriebener Code in einer Mini-App ohne Änderungen ausgeführt werden kann. Es gibt verschiedene Startvorlagen, darunter Vue, React und Preact, die das Onboarding von Webentwicklern erleichtern, die von diesen Frameworks kommen.
Mit dem kbone-cli-Tool kann ein neues Projekt erstellt werden. Ein Assistent fragt Sie, 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 Produktions-Webanwendung.
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 Aufwand für die Mini-App ist erheblich, wenn man nur die DOM-Struktur betrachtet.
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;
<button>-Elemente sind.
kbone-ui
Das Projekt kbone-ui (Open Source auf GitHub) ist ein UI-Framework, das sowohl die Entwicklung von Mini-Apps als auch die Vue.js-Entwicklung mit kbone ermöglicht. Die kbone-ui-Komponenten emulieren das Design der integrierten Mini-Komponenten von WeChat (siehe auch Komponenten oben). Mithilfe einer Demo, die direkt im Browser ausgeführt wird, können Sie die verfügbaren Komponenten erkunden.
WeUI
WeUI ist eine Reihe einfacher Stilbibliotheken, die der standardmäßigen visuellen Darstellung von WeChat entsprechen. Das offizielle WeChat-Designteam hat Designs für WeChat-interne Webseiten und WeChat-Mini-Apps angepasst, um die Wahrnehmung der Nutzung durch die Nutzer einheitlicher zu gestalten. Es enthält Komponenten wie button, cell, dialog, progress, toast, article, actionsheet und icon. Es sind verschiedene Versionen von WeUI verfügbar, z. B. weui-wxss für WeChat Mini-Apps mit WXSS-Stil (siehe Styling oben), weui.js für Webanwendungen und react-weui für WeChat React-Komponenten.
Omi
Omi ist ein selbst ernanntes Front-End-Framework für mehrere Frameworks (Open Source auf GitHub). Es vereint Web Components, JSX, Virtual DOM, Functions Style, Observer oder Proxy in einem Framework mit winziger Größe und hoher Leistung. Ziel ist es, dass Entwickler Komponenten einmal schreiben und überall verwenden können, z. B. in Omi, React, Preact, Vue.js oder Angular. Das Schreiben von Omi-Komponenten ist sehr intuitiv und frei von fast allen Textbausteinen.
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 Framework-übergreifende UI-Komponentenbibliothek (Open Source auf GitHub), die auf der Grundlage von Omi entwickelt wurde 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 Promise-Objekten und asynchronen Funktionen machen die Entwicklung von Mini-App-Projekten einfacher und effizienter. Gleichzeitig ist WePY ein wachsendes Framework, das vorwiegend einige optimierte Front-End-Tools und Konzepte und Ideen für das Framework-Design übernommen hat, hauptsächlich von 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>
vConsole
Das Projekt vConsole bietet ein einfaches, erweiterbares Front-End-Entwicklertool für mobile Webseiten. Es bietet einen Debugger, der den Entwicklertools ähnelt und direkt in Webanwendungen und Mini-Apps eingeschleust werden kann. Eine Demo zeigt die Möglichkeiten auf. 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 Front-End-Framework des Hera-Minianwendungs-Frameworks, das angeblich mit der Syntax der WeChat-Mini-Apps kompatibel ist, sodass Sie Webanwendungen im Format von Mini-Apps schreiben können. Die Dokumentation verspricht, dass Sie, wenn Sie bereits eine Mini-App haben, diese dank weweb im Browser ausführen können. In meinen Tests hat dies für aktuelle Mini-Apps nicht zuverlässig funktioniert, wahrscheinlich, weil es für das Projekt in letzter Zeit keine Aktualisierungen gab, wodurch der Compiler Änderungen auf der WeChat-Plattform übersehen hat.
Danksagungen
Dieser Artikel wurde von Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent und Keith Gu verfasst.