Projets Open Source de mini-appli

Thomas Steiner

Remarque : Ce post fait partie d'une collection d'articles dans laquelle chaque article s'appuie sur des articles précédents. Si vous arrivez ici, vous devriez commencer la lecture depuis le début.

occultation

Le projet kbone (Open Source sur GitHub) implémente un adaptateur qui simule une dans la couche d'adaptation, de sorte que le code écrit pour le Web puisse s'exécuter sans les changements dans une mini-application. Plusieurs modèles de démarrage (parmi lesquels Vue, React préact) existent. 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 demande quel framework lancer projet. L'extrait de code ci-dessous présente la démonstration de Preact. Dans l'extrait de code ci-dessous, mp crée la mini-application, la commande web crée l'application Web et build crée la 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. Les frais généraux de la mini-application sont importants, d'après le DOM structure.

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;

<ph type="x-smartling-placeholder">

</ph>

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

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

kbone-ui

Projet kbone-ui (Open Source sur GitHub) est un framework d'UI qui facilite le développement de mini-applications et le développement Vue.js avec kbone. kbone-ui les composants émulent l'apparence Les mini-composants d'applications intégrés de WeChat (voir la section Composants ci-dessus). A demo, qui s'exécute directement dans le navigateur, vous découvrirez les composants disponibles.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> 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érents avec la bibliothèque expérience visuelle par défaut. L'équipe de conception officielle de WeChat a conçu des conceptions sur mesure pour les flux internes de WeChat. des pages Web et des mini-applications WeChat pour rendre une perception de l'utilisation plus uniforme. Il comprend des composants par exemple button, cell, dialog, progress, toast, article, actionsheet et icon. Il y Il existe différentes versions de WeUI comme weui-wxss pour Mini-applications WeChat stylisées avec WXSS (voir Styles ci-dessus) weui.js pour les applications Web et react-weui pour les composants WeChat React.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Application de démonstration WeUI affichant les contacteurs.

Omi

Omi est un framework inter-frameworks d'interface autoproclamé (Open Source sur GitHub. Il fusionne les composants Web, JSX et virtuels. DOM, style fonctionnel, observateur ou proxy dans un seul framework, de taille minuscule et hautes performances. Son permet aux développeurs d'écrire des composants une seule fois et de les utiliser partout (Omi, React, Preact, Vue.js ou Angular. L'écriture des composants Omi est très intuitive et ne nécessite pratiquement pas de code récurrent.

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'UI pour plusieurs frameworks (Open Source sur GitHub) développé à partir d'Omi, qui génère les éléments personnalisés des composants Web standards.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Application de démonstration Omiu affichant les interrupteurs.

WePY

WePY est un framework qui permet aux mini-applications de prendre en charge le développement en composants. Grâce à la précompilation, les développeurs peuvent choisir le mode de développement qu'ils préfèrent. pour développer des mini-applications. L'optimisation détaillée du framework et l'introduction Les promesses et les fonctions asynchrones facilitent le développement de mini-projets d'applications et plus encore efficace. Parallèlement, WePY est également une structure en pleine croissance, qui a largement absorbé des outils d'interface 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>

<ph type="x-smartling-placeholder">

</ph>

Premiers pas avec WePY dans la documentation Google Cloud.

vConsole

Le projet vConsole fournit une interface légère, extensible pour les développeurs frontend pour les pages Web mobiles. Il offre un débogueur de type Outils de développement injectées directement dans les applications web et les mini-applications. A demo présente les opportunités. La vConsole comprend des onglets pour les journaux, le système, le réseau, les éléments et le stockage.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Application de démonstration vConsole affichant l'explorateur d'éléments.

Weweb

Le projet weweb (Open Source sur GitHub) est le framework d'interface sous-jacent de le framework d'Hera pour mini-applications qui se dit compatible avec la syntaxe des mini-applications WeChat. Vous pouvez ainsi créer des applications Web comme des mini-applications. La la documentation promet que si vous possédez déjà une mini-application, vous pouvez l'exécuter dans le navigateur grâce à sur Weweb. Lors de mes tests, cela ne fonctionnait pas de manière fiable pour les mini-applications actuelles, probablement parce que le projet n'a pas subi de mises à jour récemment, ce qui a conduit son compilateur à manquer des modifications dans plate-forme WeChat.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> Documentation sur le framework d'application Hera Mini affichant la liste des API WeChat compatibles.

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

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

Réussite : dans le chapitre suivant, vous découvrirez comment programmer une mini-application.

Remerciements

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