kbone
El proyecto kbone (de código abierto en GitHub) implementa un adaptador que simula un entorno del navegador en la capa de adaptación, de modo que el código escrito para la Web pueda ejecutarse sin cambios en una miniapp. Varias plantillas de inicio (entre ellas Vue, Reaccionar y Preact) existentes que hacen que la experiencia de integración para desarrolladores web provenientes de estos frameworks.
Se puede crear un proyecto nuevo con la herramienta kbone-cli. Un asistente pregunta 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, mp
el comando compila la miniapp, 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
El siguiente fragmento de código muestra un componente de contador simple que luego se renderiza isomórfica en un una app mini y una app web. La sobrecarga de la miniapp es significativa, a juzgar únicamente del DOM. en la nube.
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 (código abierto en GitHub) es un framework de IU que facilita tanto el desarrollo de miniapps como el de Vue.js con kbone. La IU de kbone de Kubernetes emulan la apariencia de Minicomponentes integrados de la app de WeChat (consulta también la sección Componentes más arriba). R demo que se ejecuta directamente en el navegador te permite explorarás los componentes disponibles.
WeUI
WeUI es un conjunto de bibliotecas de estilo básicas coherentes con la API de WeChat
experiencia visual predeterminada. El equipo oficial de diseño de WeChat personalizó los diseños para los usuarios internos de WeChat.
de sitios web y las miniapps de WeChat para que las de uso más uniforme. Incluye componentes
como button, cell, dialog, progress, toast, article, actionsheet y icon. Hay
hay diferentes versiones de WeUI disponibles, como weui-wxss,
Miniapps WeChat con estilo WXSS (consulta Estilos más arriba)
weui.js para aplicaciones web y
react-weui para los componentes de WeChat React.
Omi
Omi es un framework autoproclamado de varios frameworks de frontend (código abierto en GitHub. Combina componentes web, JSX, aplicaciones DOM, estilo funcional, observador o proxy en un solo marco de trabajo con un tamaño pequeño y alto rendimiento. Es El objetivo es que los desarrolladores escriban componentes una sola vez y los usen en todas partes, como Omi, React, Preact, Vue.js o Angular. La escritura de componentes de Omi es muy intuitiva y no tiene casi todo 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 multiplataforma (código abierto en GitHub) desarrollado en base a Omi, que genera elementos personalizados de componentes web estándar.
WePY
WePY es un framework que permite que las miniapps admitan y el desarrollo dividido en componentes. Mediante la compilación previa, los desarrolladores pueden elegir su desarrollo favorito estilo para desarrollar miniapps. La optimización detallada del marco de trabajo y la introducción de Las promesas y las funciones asincrónicas facilitan y facilitan el desarrollo de miniproyectos de apps eficiente. Al mismo tiempo, WePY también es un framework en crecimiento, que ha absorbido en gran medida algunas herramientas de frontend optimizadas y conceptos e ideas de diseño de frameworks, 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 de vConsole proporciona una versión ligera y extensible herramienta para desarrolladores de frontend para páginas web móviles. Ofrece un depurador similar a Herramientas para desarrolladores que se puede directamente en las aplicaciones web y las miniapps. R El comando demo 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 de El framework de la miniaplicación Hera que afirma ser compatible con la sintaxis de las miniapps de WeChat, de modo que puedas escribir aplicaciones web en lugar de las miniapps. El documentación promete que, si ya tienes una miniapp, puedes ejecutarla en el navegador gracias al Weweb. En mis experimentos, esto no funcionó de manera confiable para las miniapps actuales, probablemente porque el proyecto no ha visto actualizaciones recientemente, lo que hizo que su compilador pasara por alto cambios en la plataforma WeChat.
Agradecimientos
Este artículo fue revisado por Joe Medley: Kayce Basques, Milica Mihajlija Alan Kent, y Keith Gu.