Projetos de código aberto de mini apps

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 alterações em um miniapp. Existem vários modelos iniciais (entre eles Vue, React e Preact) que facilitam a experiência de integração para desenvolvedores da Web que usam esses frameworks.

É possível criar um novo projeto 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 miniapp, o comando web cria o app da Web e build cria o 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 de contador simples que é renderizado de forma isomórfica em um miniapp e um app da Web. A sobrecarga do miniapp é significativa, apenas julgando pela estrutura 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 aberto no WeChat DevTools. Inspecionar a estrutura do DOM mostra uma sobrecarga significativa em comparação com o app da Web.
O app de demonstração do modelo Preact kbone aberto no WeChat DevTools. Observe a estrutura complexa do DOM e como os botões de mais e menos não são elementos <button>.
O app de demonstração do modelo kbone do Preact foi aberto no navegador da Web. A inspeção da estrutura DOM mostra a marcação esperada com base no código do componente Preact.
O app de demonstração do modelo Preact kbone aberto no navegador da Web. Observe a estrutura do DOM.

kbone-ui

O projeto kbone-ui (código aberto no GitHub) é um framework de interface que facilita o desenvolvimento de miniapps e de Vue.js com o kbone. Os componentes do kbone-ui emulam a aparência e a sensação dos componentes de miniaplicativo integrados do WeChat (consulte também Componentes acima). Com uma demonstração executada diretamente no navegador, é possível conhecer os componentes disponíveis.

Demonstração do framework kbone-ui mostrando componentes relacionados ao formulário, como botões de opção, chaves, entradas e rótulos.
A demonstração do kbone-ui mostrando componentes relacionados a formulários.

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 personalizou os designs das páginas da Web internas e dos miniapps 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 miniapps 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 da WeUI mostrando componentes relacionados ao formulário, como chaves.
O app de demonstração da WeUI mostrando chaves.

Omi

O Omi é um framework autoproclamado de front-end para várias frameworks (código aberto no GitHub). Ele mescla Web Components, JSX, DOM virtual, estilo funcional, observador ou proxy em um framework com tamanho pequeno e alta performance. 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 livre de quase todos os boilerplates.

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 interface para vários frameworks (código aberto no GitHub) desenvolvida com base no Omi, que gera elementos personalizados de componentes da Web padrão.

Demonstração do framework Omiu mostrando componentes relacionados ao formulário, ou seja, interruptores.
O app de demonstração do Omiu mostrando as chaves.

WePY

WePY é um framework que permite que mini apps ofereçam suporte ao desenvolvimento com componentes. Com a pré-compilação, os desenvolvedores podem escolher o estilo de desenvolvimento preferido para criar miniapps. A otimização detalhada do framework e a introdução de funções assíncronas e promessas facilitam e tornam o desenvolvimento de projetos de miniaplicativos mais eficientes. Ao mesmo tempo, o WePY também é um framework em crescimento, que absorveu em grande parte 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 de documentação &quot;Primeiros passos&quot; do WePY mostrando os primeiros passos.
Documentação de "início" do WePY.

vConsole

O projeto vConsole fornece 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. O vConsole é aberto na parte de baixo e tem guias para registros, sistema, rede, elementos e armazenamento.
App de demonstração do vConsole mostrando o explorador de elementos.

weweb

O projeto weweb (código aberto no GitHub) é o framework de front-end subjacente do framework de miniaplicativos Hera, que afirma ser compatível com a sintaxe dos miniaplicativos do WeChat. Assim, você pode criar aplicativos da Web da mesma forma que os miniaplicativos. A documentação promete que, se você já tiver um mini app, poderá executá-lo no navegador graças ao weweb. Nos meus experimentos, isso não funcionou de forma confiável para mini apps atuais, provavelmente porque o projeto não recebeu atualizações recentemente, fazendo com que o compilador perdesse mudanças na plataforma do WeChat.

Documentação do framework do app Hera mini listando as APIs do WeChat compatíveis, como `wx.request`, `wx.uploadFile` etc.
Documentação do framework de mini app Hera mostrando a lista de APIs do WeChat com suporte.
O miniapp de demonstração do weweb compilado com o weweb para execução no navegador mostrando elementos de formulário.
O mini app de demonstração do weweb compilado com o weweb para ser executado no navegador.

Agradecimentos

Este artigo foi revisado por Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.