Progetti open source di mini app

Thomas Steiner

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. Vari modelli di base, tra cui Vue Reazione e preagisci) che rendono un'esperienza di onboarding più semplice per gli sviluppatori web provenienti da questi framework.

Puoi creare un nuovo progetto con lo strumento kbone-cli. Una procedura guidata chiede quale framework avviare progetto. Lo snippet di codice riportato di seguito mostra la demo di Preact. Nello snippet di codice riportato di seguito, il mp il comando crea la mini app, il comando web crea l'app web e build crea la 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 di cui viene poi eseguito il rendering isomorfo in un mini app e un'app web. L'overhead della mini app è significativo, solo a giudicare dal DOM alla struttura del centro di costo.

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;

di Gemini Advanced.

.

UI kbone

Il progetto kbone-ui (open source su GitHub) è un framework di UI che facilita lo sviluppo di mini app e lo sviluppo di Vue.js con kbone. L'interfaccia utente kbone che emulano l'aspetto e il design Componenti mini app integrati in WeChat (vedi anche la sezione Componenti sopra). R demo che viene eseguito direttamente nel browser consente esplorerai i componenti disponibili.

WeUI

WeUI è un insieme di librerie di stili di base compatibili con lo sviluppo esperienza visiva predefinita. Il team di design ufficiale di WeChat ha creato progetti su misura per WeChat pagine web e mini app di WeChat per consentire agli utenti di della percezione dell'uso in modo più uniforme. Include componenti ad esempio button, cell, dialog, progress, toast, article, actionsheet e icon. Là sono disponibili diverse versioni di WeUI, ad esempio weui-wxss per Mini app di WeChat in stile WXSS (vedi la sezione Stili sopra), weui.js per le app web e react-weui per i componenti di WeChat React.

Omi

Omi è un framework cross-framework autoproclamato dal frontend (open source su GitHub. Unisce Web Components, JSX, Virtual DOM, stile funzionale, osservatore o proxy in un unico framework con dimensioni ridotte e prestazioni elevate. È l'obiettivo è consentire agli sviluppatori di scrivere i componenti una volta e utilizzarli ovunque, come Omi, React, Preact, Vue.js o Angular. Scrivere componenti Omi è molto intuitivo e privo di quasi tutto il 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 inter framework (open source su GitHub) sviluppato sulla base di Omi, che genera elementi personalizzati dei componenti web standard.

WePY

WePY è un framework che consente alle mini app di supportare basato su componenti. Attraverso la precompilazione, gli sviluppatori possono scegliere il loro sviluppo preferito per sviluppare mini app. L’ottimizzazione dettagliata del framework e l’introduzione di Le promesse e le funzioni asincrone semplificano lo sviluppo di progetti di mini app e molto altro in modo efficace. Allo stesso tempo, WePY è anche un framework in crescita, che ha in gran parte assorbito strumenti di frontend ottimizzati, concetti e idee di progettazione di 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>

vConsole

Il progetto vConsole offre una piattaforma leggera ed estensibile strumento per sviluppatori frontend per pagine web mobile. Offre un debugger simile a DevTools, che può iniettate direttamente nelle app web e nelle mini app. R demo mostra le opportunità. vConsole include schede per i log, il sistema, la rete, gli elementi e l'archiviazione.

WeWeb

Il progetto weweb (open source su GitHub) è il framework frontend sottostante di il framework della mini app di Hera che afferma di essere compatibile con la sintassi delle mini app WeChat, in modo da poter scrivere applicazioni web come se si trattasse di mini app. La documentazione promette che se hai già una mini app, potrai eseguirla nel browser grazie WeWeb. Nei miei esperimenti, questo non ha funzionato in modo affidabile per le attuali mini app, molto probabilmente il progetto non ha riscontrato aggiornamenti che di recente hanno portato il suo compilatore a non notare modifiche piattaforma WeChat.

di Gemini Advanced.

. di Gemini Advanced.

Ringraziamenti

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