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 mini app. Existen varias plantillas de inicio (entre ellas, Vue, React y Preact) que facilitan la experiencia de incorporación para 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 se debe 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 mini app, 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 isomórfica en una mini app y una app web. La sobrecarga de la mini app es significativa, si solo se juzga por 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;
<button>.
kbone-ui
El proyecto kbone-ui (de código abierto en GitHub) es un framework de IU que facilita el desarrollo de mini apps y de Vue.js con kbone. Los componentes de kbone-ui emulan el aspecto y el comportamiento de los componentes integrados de la mini app de WeChat (consulta tambié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 diseño básicas coherentes con la experiencia visual predeterminada de WeChat. El equipo de diseño oficial de WeChat adaptó los diseños de las páginas web internas y las mini apps 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. Existen diferentes versiones de WeUI disponibles, como weui-wxss para las miniapps de WeChat diseñadas con WXSS (consulta Diseño más arriba), weui.js para las apps web y react-weui para los componentes de React de WeChat.
Omi
Omi es un marco de trabajo de frontend autoproclamado entre marcos de trabajo (de 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 un alto rendimiento. Su objetivo es permitir que los desarrolladores escriban componentes una vez y los usen en cualquier lugar, como Omi, React, Preact, Vue.js o Angular. Escribir componentes de Omi es muy intuitivo y no requiere casi ningún 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");
Omiu
Omiu es una biblioteca de componentes de IU para varios frameworks (de código abierto en GitHub) que se desarrolló en función de Omi y que genera elementos personalizados de componentes web estándares.
WePY
WePY es un framework que permite que las mini apps admitan el desarrollo basado en componentes. A través de la precompilación, los desarrolladores pueden elegir su estilo de desarrollo favorito para crear mini apps. 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 proyectos de miniapps. Al mismo tiempo, WePY también es un framework en crecimiento que absorbió en gran medida algunas herramientas de frontend optimizadas y conceptos e ideas de diseño de frameworks, 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>
vConsole
El proyecto vConsole proporciona una herramienta para desarrolladores de frontend ligera y extensible para páginas web en dispositivos móviles. Ofrece un depurador similar a DevTools que se puede insertar directamente en apps web y mini apps. Una demostración muestra las oportunidades. vConsole incluye pestañas para 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 Hera que afirma ser compatible con la sintaxis de las miniapps de WeChat, por lo que puedes escribir aplicaciones web como miniapps. La documentación promete que, si ya tienes una mini app, puedes ejecutarla en el navegador gracias a WeWeb. En mis experimentos, esto no funcionó de manera confiable para las mini apps actuales, probablemente porque el proyecto no se actualizó recientemente, lo que provocó que su compilador no detectara los cambios en la plataforma de WeChat.
Agradecimientos
Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent y Keith Gu revisaron este artículo.