Open-Source-Projekte der Mini-App

Thomas Steiner

Kbone

Das kbone-Projekt (Open Source auf GitHub) implementiert einen Adapter, der ein Browserumgebung in der Anpassungsschicht, sodass für das Web geschriebener Code ohne in einer Mini-App ändern. Mehrere Startvorlagen (darunter Vue React (Reagieren) und Preact) existieren, die die die das Onboarding von Webentwicklern erleichtert, die aus diesen Frameworks stammen.

Ein neues Projekt kann mit dem kbone-cli-Tool erstellt werden. Ein Assistent fragt, welches Framework die Initiierung mit denen Sie Ihr Projekt beginnen können. Das folgende Code-Snippet zeigt die Preact-Demo. Im folgenden Code-Snippet wird der mp wird die Mini-App erstellt, mit dem Befehl web die Web-App und build die Produktions-Webanwendung an.

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 in einem Mini-App und eine Web-App. Der Aufwand der Mini-App ist erheblich, nur anhand des DOMs Struktur.

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;

</ph>

</ph> <ph type="x-smartling-placeholder">

Kbone-UI

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

</ph> <ph type="x-smartling-placeholder">

WeUI

WeUI besteht aus einer Reihe grundlegender Stilbibliotheken, die mit den Stilbibliotheken von WeChat übereinstimmen. das standardmäßige visuelle Erlebnis. Das offizielle WeChat-Designteam hat die Designs für interne WeChats angepasst. und WeChat Mini-Apps, um Nutzern einheitlichere Wahrnehmung der Nutzung. Sie enthält Komponenten, z. B. button, cell, dialog, progress, toast, article, actionsheet und icon. Es verschiedene WeUI-Versionen wie weui-wxss für Mit WXSS gestaltete WeChat-Mini-Apps (siehe Stile oben) weui.js für Web-Apps und react-weui für WeChat React-Komponenten.

</ph> <ph type="x-smartling-placeholder">

Omi

Omi ist ein selbst ernanntes Frontend-Framework für verschiedene Frameworks (Open Source auf GitHub. Es führt Webkomponenten, JSX und Virtual DOM, funktionaler Stil, Beobachter oder Proxy in einem Framework mit winziger Größe und hoher Leistung. Das Ziel ist es, dass Entwickler die Komponenten einmal schreiben und überall verwenden können, z. B. Omi, React, Preact, Vue.js oder Angular. Das Schreiben von Omi-Komponenten ist sehr intuitiv und frei von fast jedem Textbaustein.

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), das auf Basis von Omi entwickelt wurde, Standard-Webkomponenten zu erstellen.

</ph> <ph type="x-smartling-placeholder">

WePY

WePY ist ein Framework, mit dem Mini-Apps komponentenbasierte Entwicklung. Durch die Vorkompilierung können Entwickler ihre bevorzugte Entwicklung auswählen für die Entwicklung von Mini-Apps. Die detaillierte Optimierung des Frameworks und die Einführung Promise-Objekte und asynchrone Funktionen vereinfachen die Entwicklung von Mini-App-Projekten. effizient zu gestalten. Gleichzeitig ist WePY ein wachsendes Framework, das einige Optimierte Frontend-Tools und Konzepte und Ideen für das Framework-Design, hauptsächlich aus 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>

</ph>

vConsole

Das Projekt vConsole bietet eine einfache, erweiterbare Frontend-Entwicklertool für mobile Webseiten. Sie bietet einen Debugger, der den Entwicklertools ähnelt, direkt in Web- und Mini-Apps eingeschleust. A demo zeigt die Empfehlungen. Die vConsole enthält Registerkarten für Protokolle, System, Netzwerk, Elemente und Speicher.

</ph> <ph type="x-smartling-placeholder">

Webweb

Weweb-Projekt (Open Source auf GitHub) ist das zugrunde liegende Frontend-Framework von das Mini-App-Framework Hera, das angeblich kompatibel ist. mit der Syntax der Mini-Apps von WeChat, sodass Sie Webanwendungen so programmieren können wie Mini-Apps. Die Die Dokumentation verspricht, dass Sie, sofern Sie bereits über eine Mini-App verfügen, diese dank der Funktion Web. In meinen Experimenten hat dies bei aktuellen Mini-Apps nicht zuverlässig funktioniert, höchstwahrscheinlich weil Das Projekt hat in letzter Zeit keine Aktualisierungen gesehen, die dazu geführt haben, dass sein Compiler Änderungen in der WeChat-Plattform

</ph> <ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

Danksagungen

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