Progetti open source di mini app

KBone

Il progetto kbone (open source su GitHub) implementa un adattatore che simula un ambiente browser nel livello di adattamento, in modo che il codice scritto per il Web possa essere eseguito senza modifiche in una mini app. Esistono diversi modelli di base (tra cui Vue, React e Preact) che semplificano l'esperienza di onboarding per gli sviluppatori web provenienti da questi framework.

È possibile creare un nuovo progetto con lo strumento kbone-cli. Una procedura guidata chiede di specificare il framework con cui avviare il progetto. Lo snippet di codice riportato di seguito mostra la demo di Preact. Nello snippet di codice riportato di seguito, il comando mp crea la mini app, il comando web crea l'app web e build crea l'app web di produzione.

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

Lo snippet di codice riportato di seguito mostra un semplice componente contatore che viene poi visualizzato in modo isomorfico in una mini app e in un'app web. L'overhead della mini app è significativo, a giudicare esclusivamente dalla struttura 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;

kbone-ui

Il progetto kbone-ui (open source su GitHub) è un framework di UI che facilita sia lo sviluppo di mini app che lo sviluppo di Vue.js con kbone. I componenti kbone-ui emulano l'aspetto dei componenti della mini app integrati di WeChat (vedi anche la sezione Componenti in alto). Una demo eseguita direttamente nel browser ti consente di esplorare i componenti disponibili.

WeUI

WeUI è un insieme di librerie di stili di base coerenti con l'esperienza visiva predefinita di WeChat. Il team di progettazione ufficiale di WeChat ha realizzato progetti su misura per le pagine web interne di WeChat e per le mini app WeChat al fine di rendere più uniforme la percezione di utilizzo da parte degli utenti. Include componenti come button, cell, dialog, progress, toast, article, actionsheet e icon. Sono disponibili diverse versioni di WeUI, come weui-wxss per le mini app WeChat configurate con WXSS (vedi Stili sopra), weui.js per le app web e react-weui per i componenti WeChat React.

Omi

Omi è un framework cross-frameworks di frontend autoproclamato (open source su GitHub. Unisce componenti web, JSX, DOM virtuale, stile funzionale, osservatore o proxy in un unico framework di dimensioni ridotte e prestazioni elevate. Il suo obiettivo è consentire agli sviluppatori di scrivere i componenti una sola volta e di utilizzarli ovunque, ad esempio Omi, React, Preact, Vue.js o Angular. La scrittura dei componenti Omi è molto intuitiva e priva di quasi tutti i boilerplate.

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 è una libreria di componenti UI cross-frame (open source su GitHub) sviluppata sulla base di Omi, che restituisce elementi personalizzati di componenti web standard.

WePY

WePY è un framework che consente alle mini app di supportare lo sviluppo componente. Tramite la precompilazione, gli sviluppatori possono scegliere il loro stile di sviluppo preferito per sviluppare mini app. L'ottimizzazione dettagliata del framework e l'introduzione di Promise e funzioni asincrone rendono lo sviluppo di progetti di mini app più semplice ed efficiente. Allo stesso tempo, WePY è anche un framework in crescita, che ha in gran parte assorbito alcuni strumenti di frontend e concetti e idee di progettazione del framework ottimizzati, principalmente da 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

Il progetto vConsole fornisce uno strumento per sviluppatori frontend leggero ed espandibile per le pagine web mobile. Offre un debugger simile a DevTools che può essere iniettato direttamente nelle app web e nelle mini app. Una demo mostra le opportunità. vConsole include schede per log, sistema, rete, elementi e spazio di archiviazione.

Weweb

Il progetto weweb (open source su GitHub) è il framework di frontend sottostante del framework per mini app Hera che dichiara di essere compatibile con la sintassi delle mini app WeChat, pertanto puoi scrivere applicazioni web come quelle mini. La documentazione promette che se hai già una mini applicazione, puoi eseguirla nel browser grazie a weweb. Nei miei esperimenti, l'operazione non ha funzionato in modo affidabile per le mini app attuali, molto probabilmente perché il progetto non ha rilevato aggiornamenti di recente, che hanno portato il suo compilatore a tralasciare le modifiche nella piattaforma WeChat.

Ringraziamenti

Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.