Kbone
O projeto kbone (código aberto no GitHub) implementa um adaptador que simula uma navegador da Web na camada de adaptação, de modo que o código escrito para a Web possa ser executado sem mudanças em um miniapp. Vários modelos iniciais (entre eles) Vue, Reagir e Preact) existem que tornam de integração mais fácil para desenvolvedores Web provenientes dessas estruturas.
Um novo projeto pode ser criado com a ferramenta kbone-cli. Um assistente pergunta qual framework iniciar a
com o projeto. O snippet de código abaixo mostra a demonstração do Preact. No snippet de código abaixo, o mp
o comando cria o miniapp, o comando web cria o web app e build cria a
de um app da Web de produção.
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 contador simples que é renderizado isomórfico em um mini app e um app da Web. O overhead do miniaplicativo é significativo, apenas a julgar pelo DOM na estrutura dos preços.
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
O projeto kbone-ui (código aberto no GitHub) é um framework de interface facilita o desenvolvimento de miniaplicativos e o desenvolvimento da Vue.js com kbone. A kbone-ui de software emulam a aparência Componentes de miniapps integrados do WeChat (consulte também Componentes acima). Um demo executado diretamente no navegador permite os componentes disponíveis.
WeUI
A WeUI (link em inglês) é um conjunto de bibliotecas de estilo básicas consistentes com a do WeChat.
experiência visual padrão. A equipe de design oficial do WeChat personalizou designs para o WeChat interno
páginas da Web e miniapps do WeChat para tornar de uso mais uniforme. 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
Miniapps do WeChat estilizados com WXSS (consulte Estilo acima),
weui.js para apps da Web
react-weui para componentes do WeChat React.
Omi
Omi é um framework de vários frameworks de front-end. (código aberto no GitHub). Ele mescla componentes da Web, JSX, DOM, estilo funcional, observador ou proxy em uma estrutura com tamanho pequeno e alto desempenho. Seu o objetivo é permitir que os desenvolvedores criem 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 tem quase nenhum código clichê.
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
A Omiu é uma biblioteca de componentes de interface para vários frameworks. (código aberto no GitHub) desenvolvido com base no Omi, que gera elementos personalizados de componentes padrão da Web.
WePY
WePY é um framework que permite que miniapps ofereçam suporte a o desenvolvimento de componentes. Com a pré-compilação, os desenvolvedores podem escolher o método de desenvolvimento para desenvolver miniaplicativos. A otimização detalhada do framework e a introdução do Promessas e funções assíncronas facilitam e tornam muito o desenvolvimento de miniprojetos de apps eficiente. Ao mesmo tempo, o WePY também é uma estrutura em crescimento, que tem absorvido parte ferramentas de front-end otimizadas e conceitos e ideias de design de framework, principalmente da 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
O projeto vConsole oferece uma interface leve e extensível para desenvolvedores front-end de páginas da Web para dispositivos móveis. Ele oferece um depurador semelhante ao DevTools que pode ser injetados diretamente nos apps da Web e miniapps. Um demo mostra as oportunidades. O console do Play inclui guias para registros, sistema, rede, elementos e armazenamento.
Weweb
Projeto weweb (código aberto no GitHub) é o framework de front-end subjacente do a estrutura do mini app Hera, que alega ser compatível com a sintaxe de mini apps do WeChat, para que você possa criar aplicativos da Web da mesma forma que miniapps. A a documentação promete que, se você já tem um miniaplicativo, pode executá-lo no navegador graças ao da Web. Nos meus experimentos, isso não funcionou de forma confiável para os miniapps atuais, provavelmente porque o projeto não tem recebido atualizações recentemente, levando o compilador a perder alterações na WeChat.
Agradecimentos
Este artigo foi revisado por João Medley, Bascos Kayce, Milica Mihajlija, Alan Kent, e Keith Gu.