Projets Open Source de mini-appli

Thomas Steiner

Remarque : Cet article fait partie d'une collection d'articles dans laquelle chaque article s'appuie sur les précédents. Si vous venez d'arriver sur cette page, vous pouvez commencer par le début.

kbone

Le projet kbone (Open Source sur GitHub) implémente un adaptateur qui simule un environnement de navigateur dans la couche d'adaptation. Ainsi, le code écrit pour le Web peut s'exécuter sans modification dans une mini-application. Plusieurs modèles de démarrage (dont Vue, React, et Preact) existent pour faciliter l' intégration des développeurs Web qui utilisent 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 montre la démonstration Preact. Dans l'extrait de code ci-dessous, la commande mp crée la mini-application, la commande web crée 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 rendu de manière isomorphe dans une mini-application et une application Web. La surcharge de la mini-application est importante, si l'on en juge uniquement par 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;

Application de démonstration du modèle Preact kbone ouverte dans les outils de développement WeChat. Notez la structure DOM complexe et le fait que les boutons plus et moins ne sont pas des éléments <button>.

Application de démonstration du modèle Preact kbone ouverte dans le navigateur Web. Notez la structure DOM.

kbone-ui

Le projet kbone-ui (Open Source sur GitHub) est un framework d'interface utilisateur qui facilite le développement de mini-applications et 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émonstration qui s'exécute directement dans le navigateur vous permet d'explorer les composants disponibles.

Démonstration de kbone-ui montrant les composants liés aux formulaires.

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 adapté les conceptions des pages Web internes et des mini-applications WeChat pour uniformiser la perception de l'utilisation par les utilisateurs. 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 WeChat React.

Application de démonstration WeUI montrant les commutateurs.

Omi

Omi est un framework autoproclamé multi-frameworks frontend (Open Source sur GitHub. Il fusionne les composants Web, JSX, le DOM virtuel, le style fonctionnel, l'observateur ou le 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, par exemple dans Omi, React, Preact, Vue.js ou Angular. L'écriture de composants Omi est très intuitive et ne nécessite presque aucun code passe-partout.

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-frameworks (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.

Application de démonstration Omiu montrant les commutateurs.

WePY

WePY est un framework qui permet aux mini-applications de prendre en charge le développement par composants. 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 rendent plus efficace le développement de projets de mini-applications. En même temps, WePY est également un framework en pleine croissance, qui a largement absorbé certains outils frontend optimisés et des concepts et 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>

Documentation "Premiers pas" de WePY.

vConsole

Le projet vConsole fournit un outil de développement frontend 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 les applications Web et les mini-applications. Une démonstration présente les possibilités. vConsole inclut des onglets pour les journaux, le système, le réseau, les éléments et le stockage.

Application de démonstration vConsole montrant l'explorateur d'éléments.

weweb

Le projet weweb (Open Source sur GitHub) est le framework frontend sous-jacent du framework de mini-application Hera, qui se dit compatible avec la syntaxe des mini-applications WeChat. Vous pouvez donc écrire des applications Web comme des mini-applications. La documentation promet que si vous disposez déjà d'une mini-application, vous pouvez l'exécuter dans le navigateur grâce à weweb. Lors de mes tests, cela n'a pas fonctionné 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.

Documentation du framework de mini-application Hera montrant la liste des API WeChat compatibles.

Mini-application de démonstration weweb compilée avec weweb pour s'exécuter dans le navigateur.

Succès : Dans le chapitre suivant, vous apprendrez à programmer comme une mini-application.

Remerciements

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