kbone
O projeto kbone (código aberto no GitHub) implementa um adaptador que simula um ambiente de navegador na camada de adaptação para que o código escrito para a Web possa ser executado sem mudanças em um miniapp. Há vários modelos para iniciantes, entre eles Vue, React e Preact, que facilitam a experiência de integração para desenvolvedores da Web provenientes desses frameworks.
Um novo projeto pode ser criado com a ferramenta kbone-cli
. Um assistente pergunta com qual framework iniciar o
projeto. O snippet de código abaixo mostra a demonstração do Preact. No snippet de código abaixo, o comando mp
cria o mini app, o comando web
cria o app da Web e build
cria o
app de produção da Web.
npx kbone-cli init my-app
cd my-app
npm run mp
npm run web
npm run build
O snippet de código abaixo mostra um componente de contador simples que é renderizado isomorficamente em um miniapp e em um app da Web. A sobrecarga do miniapp é significativa, considerando puramente a estrutura do 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;
![O app de demonstração do modelo Preact kbone foi aberto no WeChat DevTools. A inspeção da estrutura do DOM mostra uma sobrecarga significativa em comparação com o app da Web.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-eae37ec329962.png?authuser=6&hl=pt)
<button>
.
![O app de demonstração do modelo Preact kbone foi aberto no navegador da Web. A inspeção da estrutura do DOM mostra a marcação esperada com base no código do componente do Preact.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-preact-kbone-template-d94e2420c64b4.png?authuser=6&hl=pt)
kbone-ui
O projeto kbone-ui (de código aberto no GitHub, link em inglês) é um framework de IU que facilita o desenvolvimento de miniapps e do Vue.js com kbone. Os componentes do kbone-ui emulam a aparência dos componentes de mini app integrados do WeChat. Consulte também Componentes acima. Com uma demonstração executada diretamente no navegador, é possível explorar os componentes disponíveis.
![Demonstração do framework kbone-ui mostrando componentes relacionados a formulários, como botões de opção, chaves, entradas e identificadores.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-kbone-ui-framew-a00bed5e707fd.png?authuser=6&hl=pt)
WeUI
O WeUI é um conjunto de bibliotecas de estilo básicas consistentes com a
experiência visual padrão do WeChat. A equipe de design oficial do WeChat adaptou os designs das páginas da Web internas
e dos mini apps do WeChat para uniformizar a percepção dos usuários. Ela inclui componentes
como button
, cell
, dialog
, progress
, toast
, article
, actionsheet
e icon
. Há
diferentes versões do WeUI disponíveis, como weui-wxss para
mini apps do WeChat estilizados com WXSS (consulte Estilo acima),
weui.js para apps da Web e
react-weui para componentes do WeChat React.
![Demonstração do framework WeUI com componentes relacionados ao formulário, como interruptores.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-weui-framework-7609e8bee005e.png?authuser=6&hl=pt)
OMI
O Omi é um framework autodeclarado de vários frameworks de front-end (código aberto no GitHub). Ele combina componentes da Web, JSX, DOM virtual, estilo funcional, observador ou proxy em uma estrutura de tamanho pequeno e alto desempenho. O objetivo é permitir que os desenvolvedores programem componentes uma vez e os usem em qualquer lugar, como Omi, React, Preact, Vue.js ou Angular. Escrever componentes Omi é muito intuitivo e não usa quase todos os códigos boilerplate.
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
O Omiu é uma biblioteca de componentes de IU para vários frameworks (código aberto no GitHub) desenvolvida com base no Omi, que gera elementos personalizados de componentes padrão da Web.
![Demonstração do framework Omiu mostrando componentes relacionados ao formulário, como interruptores.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/demo-the-omiu-framework-8876538b48d1e.png?authuser=6&hl=pt)
WePY
O WePY é um framework que permite que miniapps ofereçam suporte ao desenvolvimento de componentes. Com a pré-compilação, os desenvolvedores podem escolher o estilo de desenvolvimento favorito para desenvolver miniapps. A otimização detalhada do framework e a introdução de Promessas e funções assíncronas facilitam e tornam mais eficiente o desenvolvimento de projetos de miniapps. Ao mesmo tempo, o WePY também é um framework em crescimento, que absorveu algumas ferramentas otimizadas de front-end e conceitos e ideias de design de framework, principalmente do 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 da documentação de introdução do WePY mostrando as primeiras etapas para começar.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/wepy-getting-started-do-ebebe13bdb6ef.png?authuser=6&hl=pt)
vConsole
O projeto vConsole oferece uma ferramenta de desenvolvedor de front-end leve e extensível para páginas da Web para dispositivos móveis. Ele oferece um depurador semelhante ao DevTools que pode ser injetado diretamente em apps da Web e miniapps. Uma demonstração mostra as oportunidades. O vConsole inclui guias para registros, sistema, rede, elementos e armazenamento.
![App de demonstração do vConsole: aberto na parte inferior com guias para registros, sistema, rede, elementos e armazenamento.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/vconsole-demo-app-vcons-9b49c9717dbe8.png?authuser=6&hl=pt)
Weweb
O projeto da weweb (código aberto no GitHub) é o framework de front-end subjacente do framework de mini app Hera, que afirma ser compatível com a sintaxe dos miniapps do WeChat, para que você possa escrever aplicativos da Web na forma de miniapps. A documentação promete que, se você já tiver um miniapp, poderá executá-lo no navegador graças à weweb. Nos meus experimentos, isso não funcionou de maneira confiável para os miniapps atuais, provavelmente porque o projeto não teve atualizações recentemente, levando o compilador a perder as mudanças na plataforma WeChat.
![Documentação do framework do mini app Hera listando as APIs WeChat que são compatíveis, como `wx.request`, `wx.uploadFile` etc.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/documentation-the-hera-m-2a2d96d52891b.png?authuser=6&hl=pt)
![O mini app de demonstração da Web compilado com a Web para ser executado no navegador mostrando elementos de formulário.](https://web.developers.google.cn/static/articles/mini-apps/mini-app-open-source-projects/image/the-weweb-demo-mini-app-c-1eda42d616e02.png?authuser=6&hl=pt)
Agradecimentos
Este artigo foi revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.