Progetti open source di mini app

Thomas Steiner

Nota: questo post fa parte di una raccolta di articoli in cui ogni articolo si basa su quelli precedenti. Se sei arrivato qui per caso, ti consigliamo di iniziare a leggere dall'inizio.

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 iniziali (tra cui Vue, React e Preact) che semplificano l'esperienza di onboarding per gli sviluppatori web che utilizzano questi framework.

È possibile creare un nuovo progetto con lo strumento kbone-cli. Una procedura guidata chiede con quale framework 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 sottoposto a rendering isomorfico in una mini app e in un'app web. Il sovraccarico della mini app è significativo, a giudicare puramente 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;

L'app demo del modello Preact kbone è stata aperta in WeChat DevTools. Nota la struttura DOM complessa e come i pulsanti Più e Meno non siano in realtà elementi <button>.

L'app demo del modello Preact kbone è stata aperta nel browser web. Prendi nota della struttura del DOM.

kbone-ui

Il progetto kbone-ui (open source su GitHub) è un framework UI che facilita lo sviluppo di mini app e di Vue.js con kbone. I componenti kbone-ui emulano l'aspetto e il comportamento dei componenti delle mini app integrate di WeChat (vedi anche Componenti sopra). Una demo che viene eseguita direttamente nel browser ti consente di esplorare i componenti disponibili.

La demo di kbone-ui che mostra i componenti correlati ai moduli.

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 personalizzato i design per le pagine web interne di WeChat e le mini app WeChat per rendere più uniforme la percezione di utilizzo degli utenti. Include componenti come button, cell, dialog, progress, toast, article, actionsheet e icon. Esistono diverse versioni di WeUI disponibili, come weui-wxss per le mini app WeChat con stile WXSS (vedi Stile sopra), weui.js per le app web e react-weui per i componenti React di WeChat.

L'app demo WeUI che mostra gli interruttori.

Omi

Omi è un framework frontend cross-framework autoproclamato (open source su GitHub. Unisce componenti web, JSX, DOM virtuale, stile funzionale, observer o proxy in un unico framework di dimensioni ridotte e prestazioni elevate. Il suo scopo è consentire agli sviluppatori di scrivere i componenti una sola volta e utilizzarli ovunque, ad esempio Omi, React, Preact, Vue.js o Angular. Scrivere componenti Omi è molto intuitivo e non richiede quasi nessun codice 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-framework (open source su GitHub) sviluppata in base a Omi, che restituisce elementi personalizzati di componenti web standard.

L'app demo Omiu che mostra gli interruttori.

WePY

WePY è un framework che consente alle mini app di supportare lo sviluppo basato su componenti. Grazie alla precompilazione, gli sviluppatori possono scegliere il loro stile di sviluppo preferito per sviluppare mini app. L'ottimizzazione dettagliata del framework e l'introduzione di Promises 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 assorbito in gran parte alcuni strumenti frontend ottimizzati e concetti e idee di progettazione del framework, 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>

Documentazione introduttiva di WePY.

vConsole

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

App demo vConsole che mostra l'esploratore degli elementi.

weweb

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

Documentazione del framework di mini app Hera che mostra l'elenco delle API WeChat supportate.

La mini app demo di weweb compilata con weweb per essere eseguita nel browser.

Operazione riuscita: nel prossimo capitolo imparerai a programmare la mini app.

Ringraziamenti

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