Miniproyectos de código abierto de app

El proyecto kbone (código abierto en GitHub) implementa un adaptador que simula un entorno de navegador en la capa de adaptación, de modo que el código escrito para la Web se pueda ejecutar sin cambios en una miniapp. Existen varias plantillas de partida (entre ellas, Vue, React y Preact) que facilitan la experiencia de integración de los desarrolladores web que provienen de estos frameworks.

Se puede crear un proyecto nuevo con la herramienta kbone-cli. Un asistente pregunta con qué framework iniciar el proyecto. En el siguiente fragmento de código, se muestra la demostración de Preact. En el siguiente fragmento de código, el comando mp compila la app mini, el comando web compila la app web y build crea la app web de producción.

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

En el siguiente fragmento de código, se muestra un componente de contador simple que, luego, se renderiza de forma isomorfica en una app web y una app mini. La sobrecarga de la app mini es significativa, solo en función de la estructura del 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;
Se abrió la app de demostración de la plantilla de kbone de Preact en las herramientas para desarrolladores de WeChat. Al inspeccionar la estructura del DOM, se muestra una sobrecarga significativa en comparación con la app web.
Se abrió la app de demostración de la plantilla de kbone de Preact en las herramientas para desarrolladores de WeChat. Observa la estructura compleja del DOM y cómo los botones de signo más y menos en realidad no son elementos <button>.
Se abrió la app de demostración de la plantilla de kbone de Preact en el navegador web. Al inspeccionar la estructura del DOM, se muestra el lenguaje de marcado previsto basado en el código del componente Preact.
Se abrió la app de demostración de la plantilla de kbone de Preact en el navegador web. Ten en cuenta la estructura del DOM.

kbone-ui

El proyecto kbone-ui (código abierto en GitHub) es un framework de IU que facilita el desarrollo de miniaplicaciones y de Vue.js con kbone. Los componentes de kbone-ui emulan el aspecto de los componentes de miniaplicaciones integrados de WeChat (consulta también Componentes más arriba). Una demo que se ejecuta directamente en el navegador te permite explorar los componentes disponibles.

Demostración del framework kbone-ui que muestra componentes relacionados con formularios, como botones de selección, interruptores, entradas y etiquetas.
Demostración de kbone-ui que muestra componentes relacionados con formularios.

WeUI

WeUI es un conjunto de bibliotecas de estilo básicas coherentes con la experiencia visual predeterminada de WeChat. El equipo de diseño oficial de WeChat adaptó los diseños para las páginas web internas y las miniaplicaciones de WeChat para que la percepción de uso de los usuarios sea más uniforme. Incluye componentes como button, cell, dialog, progress, toast, article, actionsheet y icon. Hay diferentes versiones de WeUI disponibles, como weui-wxss para apps de WeChat mini con diseño WXSS (consulta Diseño más arriba), weui.js para apps web y react-weui para componentes de React de WeChat.

Demostración del framework de WeUI que muestra componentes relacionados con formularios, es decir, interruptores.
La app de demostración de WeUI que muestra interruptores.

Omi

Omi es un framework de frontend multimarcos autoproclamado (código abierto en GitHub). Combina los componentes web, JSX, DOM virtual, el estilo funcional, el observador o el proxy en un framework con un tamaño pequeño y un alto rendimiento. Su objetivo es permitir que los desarrolladores escriban componentes una vez y los usen en todas partes, como Omi, React, Preact, Vue.js o Angular. Escribir componentes de Omi es muy intuitivo y está libre de casi todo el texto de referencia.

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 es una biblioteca de componentes de IU multiframework (código abierto en GitHub) desarrollada en función de Omi, que genera elementos personalizados de componentes web estándar.

Demostración del framework de Omiu que muestra componentes relacionados con formularios, es decir, interruptores.
La app de demostración de Omiu muestra los interruptores.

WePY

WePY es un framework que permite que las miniapps admitan el desarrollo basado en componentes. A través de la compilación previa, los desarrolladores pueden elegir su estilo de desarrollo favorito para desarrollar miniapps. La optimización detallada del framework y la introducción de promesas y funciones asíncronas hacen que el desarrollo de proyectos de miniaplicaciones sea más fácil y eficiente. Al mismo tiempo, WePY también es un framework en crecimiento, que absorbió en gran medida algunas herramientas de frontend optimizadas y conceptos y ideas de diseño de framework, principalmente 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>
Página de documentación de WePY para comenzar, que muestra los primeros pasos para comenzar.
Documentación de “Inicio” de WePY.

vConsole

El proyecto vConsole proporciona una herramienta para desarrolladores de frontend ligera y extensible para páginas web para dispositivos móviles. Ofrece un depurador similar a DevTools que se puede insertar directamente en apps web y miniapps. Una demostración muestra las oportunidades. vConsole incluye pestañas para registros, sistema, red, elementos y almacenamiento.

App de demostración de vConsole. vConsole se abre en la parte inferior y tiene pestañas para los registros, el sistema, la red, los elementos y el almacenamiento.
App de demostración de vConsole que muestra el explorador de elementos.

weweb

El proyecto weweb (de código abierto en GitHub) es el framework de frontend subyacente del framework de miniapps Hera que afirma ser compatible con la sintaxis de las miniapps de WeChat, de modo que puedas escribir aplicaciones web en lugar de miniapps. La documentación promete que, si ya tienes una miniapp, puedes ejecutarla en el navegador gracias a Weweb. En mis experimentos, esto no funcionó de manera confiable para las miniapps actuales, lo más probable es que el proyecto no haya visto actualizaciones recientemente, lo que hizo que su compilador pasara por alto cambios en la plataforma WeChat.

Documentación del framework de miniaplicaciones de Hera en la que se enumeran las APIs de WeChat que admite, como &quot;wx.request&quot;, &quot;wx.uploadFile&quot;, etcétera.
Documentación del framework de la app de Hera que muestra la lista de APIs de WeChat compatibles.
La mini app de demostración de weweb compilada con weweb para ejecutarse en el navegador muestra elementos de formulario.
La miniapp de demostración de weweb compilada con weweb para ejecutarse en el navegador.

Agradecimientos

Este artículo fue revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu.