Projets Open Source de mini-appli

Thomas Steiner

occultation

Le projet kbone (Open Source sur GitHub) implémente un adaptateur qui simule un environnement de navigateur dans la couche d'adaptation, afin que le code écrit pour le Web puisse s'exécuter sans modification dans une mini-application. Plusieurs modèles de démarrage (parmi lesquels Vue, React et Preact) existent pour faciliter l'expérience d'intégration des développeurs Web à partir de ces frameworks.

Vous pouvez créer un projet avec l'outil kbone-cli. Un assistant vous demande avec quel framework lancer le projet. L'extrait de code ci-dessous présente la démonstration de Preact. Dans l'extrait de code ci-dessous, la commande mp compile la mini-application, la commande web compile l'application Web et build crée l'application Web de production.

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

L'extrait de code ci-dessous montre un composant de compteur simple qui est ensuite affiché de manière isomorphique dans une mini-application et une application Web. Le coût de la mini-application est important, uniquement en fonction de la structure 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

Le projet kbone-ui (Open Source sur GitHub) est un framework d'UI qui facilite le développement de mini-applications ainsi que le développement Vue.js avec kbone. Les composants kbone-ui imitent l'apparence des composants de mini-application intégrés de WeChat (voir également Composants ci-dessus). Une démo qui s'exécute directement dans le navigateur vous permet d'explorer les composants disponibles.

WeUI

WeUI est un ensemble de bibliothèques de styles de base cohérentes avec l'expérience visuelle par défaut de WeChat. L'équipe de conception officielle de WeChat a personnalisé les conceptions pour les pages Web internes de WeChat et les mini-applications WeChat afin de rendre la perception des utilisateurs plus uniforme. Il inclut des composants tels que button, cell, dialog, progress, toast, article, actionsheet et icon. Différentes versions de WeUI sont disponibles, comme weui-wxss pour les mini-applications WeChat stylisées avec WXSS (voir Style ci-dessus), weui.js pour les applications Web et react-weui pour les composants React WeChat.

Omi

Omi est un framework de frontend multicadres autoproclamé (open source sur GitHub). Il fusionne les composants Web, JSX, DOM virtuel, style fonctionnel, observateur ou proxy dans un seul framework de petite taille et hautes performances. Son objectif est de permettre aux développeurs d'écrire des composants une seule fois et de les utiliser partout, comme Omi, React, Preact, Vue.js ou Angular. L'écriture de composants Omi est très intuitive et presque exempte de code standard.

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 est une bibliothèque de composants d'interface utilisateur multi-framework (Open Source sur GitHub) développée sur la base d'Omi, qui génère des éléments personnalisés de composants Web standards.

WePY

WePY est un framework qui permet aux mini-applications de prendre en charge le développement modulaire. Grâce à la précompilation, les développeurs peuvent choisir leur style de développement préféré pour développer des mini-applications. L'optimisation détaillée du framework et l'introduction des promesses et des fonctions asynchrones facilitent et améliorent le développement de projets de mini-applications. Dans le même temps, WePY est également un framework en pleine croissance, qui a largement assimilé des outils d'interface optimisés ainsi que des concepts et des idées de conception de framework, principalement à partir de 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

Le projet vConsole fournit un outil de développement de front-end léger et extensible pour les pages Web mobiles. Il propose un débogueur de type Outils de développement qui peut être injecté directement dans des applications Web et des mini-applications. Une démonstration présente les opportunités sans frais. La vConsole comprend des onglets pour les journaux, le système, le réseau, les éléments et le stockage.

Weweb

Le projet weweb (Open Source sur GitHub) est le framework de front-end sous-jacent du framework de mini-applications Hera, qui prétend être compatible avec la syntaxe des mini-applications WeChat. Vous pouvez ainsi écrire des applications Web comme des mini-applications. La documentation promet que si vous disposez déjà d'une mini-application, vous pourrez l'exécuter dans le navigateur grâce à Weweb. Dans mes tests, cela ne fonctionnait pas de manière fiable pour les mini-applications actuelles, probablement parce que le projet n'a pas été mis à jour récemment, ce qui a empêché son compilateur de détecter les modifications apportées à la plate-forme WeChat.

Remerciements

Cet article a été relu par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent et Keith Gu.