Marcação, estilo, script e atualização de mini apps

Thomas Steiner

Markup languages

Conforme descrito anteriormente, ao invés de HTML simples, os miniaplicativos são escritos com dialetos de HTML. Se você já lidaram com interpolações e diretivas de texto da Vue.js, você se sentirá imediatamente, mas conceitos semelhantes já existiam nas transformações XML (XSLT). Abaixo, você encontra exemplos de código da biblioteca WeChat WXML, mas o conceito é o mesmo para todas as plataformas de miniapps, como o Alipay, AXML, do Baidu Swan Element, do ByteDance TTML (apesar de o DevTools chamar de Bxml) e o aplicativo HTML. Assim como no Vue.js, a camada o conceito de programação de mini app é o model-view-viewmodel (MVVM).

Vinculação de dados

A vinculação de dados corresponde à página do Vue.js interpolação de texto.

<!-- wxml -->
<view>{{message}}</view>

// page.js
Page({
  data: {
    message: "Hello World!",
  },
});

Renderização de lista

A renderização de listas funciona como a diretiva v-for do Vue.js.

<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>

// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
  },
});

Renderização condicional

A renderização condicional funciona como o Vue.js diretiva v-if.

<!-- wxml -->
<view wx:if="{{view == 'one'}}">One</view>
<view wx:elif="{{view == 'two'}}">Two</view>
<view wx:else="{{view == 'three'}}">Three</view>

// page.js
Page({
  data: {
    view: "three",
  },
});

Modelos

Em vez de exigir o imperativo clonagem de content de um modelo HTML, Os modelos WXML podem ser usados de maneira declarativa com o atributo is, que é vinculado a uma definição de modelo.

<!-- wxml -->
<template name="person">
  <view>
    First Name: {{firstName}}, Last Name: {{lastName}}
  </view>
</template>

<template is="person" data="{{...personA}}"></template>
<template is="person" data="{{...personB}}"></template>
<template is="person" data="{{...personC}}"></template>

// page.js
Page({
  data: {
    personA: { firstName: "Alice", lastName: "Foo" },
    personB: { firstName: "Bob", lastName: "Bar" },
    personC: { firstName: "Charly", lastName: "Baz" },
  },
});

Estilo

A estilização acontece com dialetos do CSS. O WeChat tem o nome WXSS. Para Alipay, o nome é ACSS, o nome do banco CSS, e, para a ByteDance, os dialeto é conhecido como TST. O que eles têm em comum é que estendem o CSS com pixels responsivos. Ao escrever CSS regular, os desenvolvedores precisam converter todas as unidades de pixel para se adaptarem a diferentes telas de dispositivos móveis com diferentes larguras e proporções de pixels. O TST aceita a unidade rpx como a camada subjacente, ou seja, o mini app assume o trabalho do desenvolvedor e converte as unidades em nome dele, com base na uma largura de tela especificada de 750rpx. Por exemplo, em um smartphone Pixel 3a com uma largura de tela de 393px (e uma proporção de pixels de 2.75), o 200rpx responsivo se torna 104px no dispositivo real quando inspecionado com o Chrome DevTools (393 px / 750 rpx * 200rpx ✕ 104 px). No Android, o mesmo conceito é chamado pixel de densidade independente.

/* app.wxss */
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0; /* ← responsive pixels */
  box-sizing: border-box;
}

Como os componentes (consulte mais tarde) não usam o shadow DOM, os estilos declarados em um alcance de página em todos os componentes. A organização comum de arquivos da folha de estilo é ter uma folha de estilo raiz para estilos globais e folhas de estilo por página específicas para cada página do mini app. Os estilos podem ser importado com uma regra @import que se comporta como o @import CSS em regra. Como no HTML, estilos também podem ser declarados in-line, incluindo interpolação de texto dinâmico (consulte before).

<view style="color:{{color}};" />

Criação dos roteiros

Miniapps são compatíveis com um "subconjunto seguro" de JavaScript que inclui suporte para módulos que usam variáveis sintaxes que lembram CommonJS ou RequireJS. O código JavaScript não pode ser executado com eval() e nenhuma função pode ser criada com new Function(). O contexto de execução do script é V8 ou JavaScriptCore em dispositivos, e V8 ou NW.js no simulador. A codificação com ES6 ou uma sintaxe mais recente geralmente é possível, já que o DevTools específico transcompila automaticamente o código para ES5 se o destino da versão for um sistema operacional com uma implementação de WebView mais antiga (consulte mais tarde). A documentação dos fornecedores de superaplicativos menciona explicitamente que suas linguagens de script não são que devem ser confundidos com o JavaScript. Essa afirmação, no entanto, se refere principalmente o funcionamento dos módulos, ou seja, eles não dão suporte a Módulos ES.

Como mencionado antes, o conceito de programação de mini app é a model-view-viewmodel (MVVM). A camada lógica e a camada de visualização são executadas em linhas de execução diferentes, ou seja, a interface do usuário não são bloqueadas por operações de longa duração. Em termos da Web, pense em scripts executados em uma Web Worker.

A linguagem de script do WeChat é chamada WXS, Alipay SJS e ByteDance também SJS (em inglês). O Baidu fala em JS ao fazer referência a isso. deles. Esses scripts precisam ser incluídos usando um tipo especial de tag, por exemplo, <wxs> em WeChat Por outro lado, o Quick App usa tags <script> normais e o ES6. Sintaxe do JS.

<wxs module="m1">
  var msg = "hello world";
  module.exports.message = msg;
</wxs>

<view>{{m1.message}}</view>

Os módulos também podem ser carregados usando um atributo src ou importados usando require().

// /pages/tools.wxs
var foo = "'hello world' from tools.wxs";
var bar = function (d) {
  return d;
};
module.exports = {
  FOO: foo,
  bar: bar,
};
module.exports.msg = "some msg";

<!-- page/index/index.wxml -->
<wxs src="./../tools.wxs" module="tools" />
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.FOO)}}</view>

// /pages/logic.wxs
var tools = require("./tools.wxs");

console.log(tools.FOO);
console.log(tools.bar("logic.wxs"));
console.log(tools.msg);

API JavaScript bridge

Com a ponte JavaScript que conecta pequenos apps ao sistema operacional, para usar as funcionalidades do SO. Consulte Acesso a recursos avançados. Ela também oferece vários métodos de conveniência. Para ter uma visão geral, confira as diferentes APIs do WeChat, Alipay, Baidu, ByteDance, e Quick App.

A detecção de recursos é direta, pois todas as plataformas fornecem um (literalmente chamado assim) Método canIUse() com nome inspirado no site caniuse.com. Para por exemplo, o da ByteDance tt.canIUse() permite verificações de suporte para APIs, métodos, parâmetros, opções, componentes e atributos.

// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");

Atualizações

Os miniapps não têm um mecanismo de atualização padronizado (discussão sobre uma possível padronização). Todas as plataformas de miniaplicativos têm um sistema de back-end, que permite aos desenvolvedores de miniaplicativos fazer upload de novas versões do seus miniapps. Um superapp usa esse sistema de back-end para procurar atualizações e fazer o download delas. Alguns superapps executar atualizações inteiramente em segundo plano, sem que o próprio miniapp influencie a atualização fluxo Outros superapps dão mais controle aos próprios miniapps.

Como exemplo de um processo sofisticado, os parágrafos a seguir descrevem o mecanismo de atualização do WeChat para miniapps. com mais detalhes. O WeChat verifica se há atualizações disponíveis nos dois cenários a seguir:

1. Enquanto ele estiver em execução, o WeChat vai verificar regularmente se há atualizações de miniapps usados recentemente. Se um é encontrada, ela é baixada e aplicada de forma síncrona na próxima vez que o usuário inicializar o mini app. A inicialização a frio de miniaplicativos ocorre quando o miniaplicativo não estava em execução no momento em que o usuário abriu (o WeChat fecha à força os mini apps depois de cinco minutos em segundo plano).
2. O WeChat também verifica se há atualizações quando um mini app é inicializado a frio. Para miniapps que o usuário não abriu por muito tempo, a atualização será verificada e baixada de maneira síncrona. Durante o download da atualização, o usuário tem que esperar. Quando o download for concluído, a atualização será aplicada e o mini app será aberto. Se o o download falhar, por exemplo, devido a uma conexão de rede ruim, o mini app será aberto mesmo assim. Para miniapps que o usuário abriu recentemente, qualquer atualização em potencial será baixada de forma assíncrona em segundo plano e será ser aplicado na próxima vez que o usuário inicializar o miniapp a frio.

Os miniapps podem ativar atualizações anteriores usando a API UpdateManager. Ele oferece as seguintes funcionalidades:

• Notifica o mini app quando uma verificação de atualizações é feita. (onCheckForUpdate)
• Notifica o mini app quando uma atualização é transferida por download e está disponível. (onUpdateReady)
• Notifica o mini app quando não é possível fazer o download de uma atualização. (onUpdateFailed)
• Permite que o mini app force a instalação de uma atualização disponível, o que reiniciará o app. (applyUpdate)

O WeChat também oferece outras opções de personalização de atualização para desenvolvedores de mini apps no sistema de back-end: 1: Uma opção permite que os desenvolvedores desativem as atualizações síncronas para usuários que já têm uma determinada mínima instalada do miniapp e força as atualizações a serem assíncronas. 2. Outra opção permite que os desenvolvedores definam uma versão mínima necessária para o mini app. Isso fará atualizações assíncronas de uma versão anterior à versão mínima necessária forçam a atualização do miniapp após para aplicar a atualização. Além disso, bloqueará a abertura de uma versão mais antiga do miniapp em caso de download falha na atualização.

Agradecimentos

Este artigo foi revisado por João Medley, Bascos Kayce, Milica Mihajlija, Alan Kent, e Keith Gu.