Miniproyectos de código abierto de app

kbone

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 inicio (entre ellas Vue, React y Preact) que facilitan la experiencia de integración para los desarrolladores web que provienen de estos frameworks.

Se puede crear un proyecto nuevo con la herramienta kbone-cli. Un asistente te 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 miniapp, el comando web compila la aplicación 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 isomórficamente en una miniapp y una app web. La sobrecarga de la miniapp es significativa, a juzgar exclusivamente 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;

kbone-ui

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

WeUI

WeUI es un conjunto de bibliotecas de estilo básicas coherentes con la experiencia visual predeterminada de WeChat. El equipo oficial de diseño de WeChat personalizó diseños para las páginas web internas y las miniapps de WeChat a fin de que la percepción 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 miniapps de WeChat con estilo de WXSS (consulta Estilos más arriba), weui.js para apps web y react-weui para componentes de WeChat React.

Omi

Omi es un framework de varios frameworks de frontend autoproclamado (código abierto en GitHub. Combina componentes web, JSX, DOM virtual, estilo funcional, observador o proxy en un solo framework con un tamaño pequeño y 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. La escritura de los componentes de Omi es muy intuitiva y libre de código estándar.

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");

Omiú

Omiu es una biblioteca de componentes de la IU entre frameworks (código abierto en GitHub) desarrollada basada en Omi, que genera elementos personalizados de componentes web estándar.

WePY

WePY es un framework que permite que las miniapps admitan el desarrollo por componentes. Mediante 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 facilitan y hacen más eficiente el desarrollo de miniproyectos de apps. Al mismo tiempo, WePY también es un framework en crecimiento que ha absorbido en gran medida algunas ideas y herramientas de frontend optimizadas y conceptos de diseño de framework, en su mayoría 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

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

Weweb

El proyecto weweb (código abierto en GitHub) es el framework de frontend subyacente del framework de miniapps de Hera que declara ser compatible con la sintaxis de las miniapps de WeChat, por lo que puedes 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 funcionaba de manera confiable para las miniapps actuales, probablemente porque el proyecto no recibió actualizaciones recientes que llevaron al compilador a perder cambios en la plataforma WeChat.

Agradecimientos

Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.