Markup languages
Como se indicó antes, en lugar de usar HTML sin formato, las miniapps se escriben con dialectos de HTML. Si hayas tratado con la interpolación y directivas de texto Vue.js, te sentirás pero había conceptos similares mucho antes en las transformaciones XML. (XSLT). A continuación, puedes ver muestras de código de la WXML, pero el concepto es en todas las miniplataformas, como Alipay AXML, Baidu's Swan Element, de ByteDance TTML (a pesar de que las Herramientas para desarrolladores lo llamen bxml) y el de HTML. Al igual que con Vue.js, la base de datos el concepto de miniprogramación de apps model-view-viewmodel (MVVM).
Vinculación de datos
La vinculación de datos corresponde a Vue.js interpolación de texto.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Renderización de listas
La renderización de listas funciona como la directiva v-for de Vue.js.
<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});
Renderización condicional
La renderización condicional funciona como Vue.js.
Directiva 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",
},
});
Plantillas
En lugar de requerir el uso
Clonación del content de una plantilla HTML
Las plantillas WXML se pueden usar de forma declarativa mediante el atributo is vinculado a una definición de plantilla.
<!-- 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" },
},
});
Diseño
El diseño se produce con los dialectos de CSS. Nombre de WeChat
WXSS.
En el caso de Alipay, el de Baidu se llama ACSS,
CSS, y para ByteDance, sus
se conoce como
TTSS.
Lo que tienen en común es que extienden CSS con píxeles adaptables. Cuando escribes código CSS normal,
los desarrolladores necesitan convertir todas las unidades de píxeles para adaptarse a las diferentes pantallas de los dispositivos móviles con
diferentes anchos y proporciones de píxeles. TTSS admite la unidad rpx como capa subyacente, lo que significa
la miniapp asume el trabajo del desarrollador y convierte las unidades en su nombre, según
un ancho de pantalla especificado de 750rpx. Por ejemplo, en un teléfono Pixel 3a con un ancho de pantalla de
393px (y una proporción de píxeles del dispositivo de 2.75), 200rpx responsivo se convierte en 104px en el dispositivo real.
cuando se inspecciona con las Herramientas para desarrolladores de Chrome (393 px / 750 px * 200 px ≈ 104 px). En Android, el mismo concepto
se llama
píxel independiente de la densidad.
/* 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;
}
Dado que los componentes (consulta más adelante) no usan shadow DOM, los estilos declarados en una página de alcance
en todos los componentes. La organización común de archivos de hojas de estilo consiste en tener una hoja de estilo raíz para
estilos globales y hojas de estilo individuales por página específicas para cada página de la miniapp. Los estilos también pueden
importarse con una regla @import que se comporte como la
@import Regla-at de CSS. Al igual que en HTML,
los estilos también se pueden declarar en línea, incluida la interpolación dinámica del texto (consulta
antes).
<view style="color:{{color}};" />
Guion
Las miniapps admiten un "subconjunto seguro" de JavaScript que incluye compatibilidad con módulos que usan diferentes
sintaxis que recuerdan a CommonJS o RequireJS.
El código JavaScript no se puede ejecutar a través de eval() ni se pueden crear funciones con
new Function() El contexto de ejecución de la secuencia de comandos es V8.
JavaScriptCore en dispositivos y V8 o
NW.js en el simulador. Por lo general, es posible programar con ES6 o una sintaxis más reciente.
ya que las Herramientas para desarrolladores en particular transpilan automáticamente el código a ES5 si el destino de compilación es una
sistema operativo con una implementación de WebView más antigua (consulta más adelante). El
en la documentación de los proveedores de superapps menciona explícitamente que sus lenguajes de programación no son
confundirse con JavaScript y son distintas de JavaScript. Sin embargo, esta afirmación se refiere solo a
la forma en que funcionan los módulos, es decir, que no admiten
módulos de ES.
Como se mencionó antes, el concepto de miniprogramación es la model-view-viewmodel (MVVM). La capa de lógica y la de vista se ejecutan en subprocesos diferentes, lo que significa que la interfaz de usuario no se bloquean con operaciones de larga duración. En términos web, puedes pensar en las secuencias de comandos que se ejecutan en un Trabajador web.
El lenguaje de programación WeChat se llama
WXS, Alipay's
SJS, ByteDance también
SJS.
Baidu habla de JS cuando hace referencia a
suyos. Estas secuencias de comandos se deben incluir con un tipo especial de etiqueta, por ejemplo, <wxs> en
WeChat Por el contrario, la app rápida usa etiquetas <script> normales y el ES6
Sintaxis de JS.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
Los módulos también se pueden cargar mediante un atributo src o se pueden importar a través de 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 de puente de JavaScript
El puente JavaScript que conecta las miniapps con el sistema operativo hace posible para usar las capacidades del SO (consulta Acceso a funciones potentes. Integra también ofrece varios métodos de conveniencia. Para obtener una descripción general, puedes consultar las diferentes APIs de WeChat, Alipay, Baidu ByteDance y Quick App.
La detección de funciones es sencilla, ya que todas las plataformas proporcionan un (literalmente llamado así)
canIUse() cuyo nombre parece estar inspirado en el sitio web caniuse.com. Para
Por ejemplo, la serie de ByteDance
tt.canIUse()
permite comprobaciones de compatibilidad para APIs, métodos, parámetros, opciones, componentes y atributos.
// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
Actualizaciones
Las miniapps no tienen un mecanismo de actualización estandarizado (debate sobre una posible estandarización). Todas las plataformas de miniapps tienen un sistema de backend que permite a los desarrolladores de miniapps subir nuevas versiones de sus miniapps. Luego, una superapp usa ese sistema de backend para buscar y descargar actualizaciones. Algunas superapps realizar actualizaciones completamente en segundo plano, sin que la miniapp pueda influir en la actualización de tu flujo de trabajo. Otras superapps brindan más control a las miniapps en sí.
Como ejemplo de un proceso sofisticado, en los siguientes párrafos se describe el mecanismo de actualización de WeChat para las miniapps en más detalle. WeChat verifica si hay actualizaciones disponibles en los siguientes dos casos:
- WeChat verificará con regularidad si hay actualizaciones de las miniapps usadas recientemente, siempre y cuando WeChat esté funcionando. Si un se encuentre una actualización, se descargará la actualización y se aplicará de forma síncrona la próxima vez que el usuario inicie en frío mini. El inicio en frío de miniapps se produce cuando esta no estaba actualmente en ejecución cuando el usuario lo abrió (WeChat forzará el cierre de las miniapps después de permanecer en segundo plano durante 5 minutos)
- WeChat también busca actualizaciones cuando se inicia una miniapp en frío. Para miniapps que el usuario no abrió durante mucho tiempo, se comprueba y se descarga la actualización de forma síncrona. Mientras se descarga la actualización, el usuario debe esperar. Cuando finaliza la descarga, se aplica la actualización y se abre la miniapp. Si el botón falla la descarga, p.ej., debido a una mala conectividad de red, la miniapp se abre independientemente. Para las miniapps que el usuario abrió recientemente, cualquier posible actualización se descarga de forma asíncrona en segundo plano y se se aplicará la próxima vez que el usuario inicie la miniapp en frío.
Las apps mini pueden habilitar actualizaciones anteriores a través de la API de UpdateManager. Proporciona la siguiente funcionalidad:
- Notifica a la miniapp cuando se realiza una búsqueda de actualizaciones.
(
onCheckForUpdate) - Notifica a la miniapp cuando se descarga una actualización y está disponible.
(
onUpdateReady) - Notifica a la miniapp cuando no se puede descargar una actualización.
(
onUpdateFailed) - Permite que la miniapp instale de manera automática una actualización disponible, lo que reiniciará la app.
(
applyUpdate)
WeChat también proporciona opciones adicionales de personalización de actualizaciones para desarrolladores de miniapps en su sistema de backend: 1) Una opción les permite a los desarrolladores inhabilitar las actualizaciones síncronas para los usuarios que ya tienen un versión mínima de la miniapp instalada y, en su lugar, fuerza las actualizaciones para que sean asíncronas. 2. Otra opción les permite a los desarrolladores establecer una versión mínima requerida de su miniapp. Esto hará que las actualizaciones asíncronas de una versión inferior a la mínima requerida de manera forzosa volver a cargar la miniapp después aplicando la actualización. También bloqueará la apertura de una versión anterior de la miniapp si se descarga la la actualización falla.
Agradecimientos
Este artículo fue revisado por Joe Medley: Kayce Basques, Milica Mihajlija Alan Kent, y Keith Gu.