Markup languages
Come spiegato in precedenza, le mini app sono scritte con i dialetti HTML anziché con il semplice codice HTML. Se hai mai avuto a che fare con l'interpolazione e le istruzioni di testo Vue.js, ti sentirai subito a tuo agio, ma concetti simili esistevano molto prima in XML Transformations (XSLT). Di seguito puoi vedere esempi di codice da WXML di WeChat, ma il concetto è lo stesso per tutte le piattaforme di mini app, ovvero AXML di Alipay, Swan Element di Baidu, TTML di ByteDance (nonostante il DevTools lo chiami Bxml) e HTML dell'app rapida. Proprio come con Vue.js, il concetto di programmazione di mini app di base è model-view-viewmodel (MVVM).
Associazione di dati
L'associazione di dati corrisponde all'interpolazione del testo di Vue.js.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Rendering dell'elenco
Il rendering dell'elenco funziona come l'istruzione v-for Vue.js.
<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});
Rendering condizionale
Il rendering condizionale funziona come l'istruzione v-if di Vue.js.
<!-- 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",
},
});
Modelli
Invece di richiedere la clonazione imperativa di content di un modello HTML, i modelli WXML possono essere utilizzati in modo dichiarativo tramite l'attributo is che rimanda alla definizione di un modello.
<!-- 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" },
},
});
Stili
Lo stile avviene con i dialetti dei CSS. WeChat è denominato
WXSS.
Per Alipay, il loro dialetto si chiama ACSS, il semplice CSS di Baidu, mentre per ByteDance il dialetto viene chiamato TTSS.
Ciò che hanno in comune è che estendono il codice CSS con i pixel adattabili. Quando scrivono normali CSS, gli sviluppatori devono convertire tutte le unità di pixel per adattarle ai diversi schermi dei dispositivi mobili con larghezza e proporzioni pixel differenti. TTSS supporta l'unità rpx come livello sottostante, il che significa che la mini app assume il lavoro dello sviluppatore e converte le unità per suo conto, in base a una larghezza dello schermo specificata pari a 750rpx. Ad esempio, su un telefono Pixel 3a con una larghezza dello schermo pari a 393px (e un rapporto pixel del dispositivo pari a 2.75), gli elementi adattabili 200rpx diventano 104px sul dispositivo reale quando vengono ispezionati con Chrome DevTools (393 px / 750rpx * 200rpx ≈ 104 px). In Android, lo stesso concetto
è chiamato
pixel indipendenti dalla densità.
/* 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;
}
Poiché i componenti (vedi più avanti) non utilizzano lo shadow DOM, gli stili dichiarati su una pagina raggiungono tutti i componenti. Generalmente, l'organizzazione dei file dei fogli di stile prevede un singolo foglio di stile principale per gli stili globali e singoli fogli di stile per pagina specifici per ogni pagina della mini app. Gli stili possono essere importati con una regola @import che si comporta come la regola at-regola CSS @import. Come nel caso del codice HTML, anche gli stili possono essere dichiarati in linea, inclusa l'interpolazione del testo dinamico (vedi prima).
<view style="color:{{color}};" />
Definisci i tuoi contenuti
Le mini app supportano un "sottoinsieme sicuro" di JavaScript che include il supporto per moduli con diverse sintassi che ricordano CommonJS o RequireJS.
Il codice JavaScript non può essere eseguito tramite eval() e non è possibile creare funzioni con new Function(). Il contesto di esecuzione dello script è V8 o
JavaScriptCore sui dispositivi e V8 o
NW.js nel simulatore. In genere è possibile codificare con una sintassi ES6 o successiva, poiché un particolare DevTools trasloca automaticamente il codice in ES5 se la destinazione della build è un sistema operativo con un'implementazione WebView precedente (vedi più avanti). La documentazione dei provider di superapp afferma esplicitamente che i loro linguaggi di scripting non devono essere confusi con JavaScript e sono diversi da JavaScript. Questa affermazione, tuttavia, si riferisce principalmente al funzionamento dei moduli, ovvero al fatto che non supportano ancora i moduli ES standard.
Come accennato prima, il concetto di programmazione di mini app è model-view-viewmodel (MVVM). Il livello logico e il livello di visualizzazione vengono eseguiti su thread diversi, il che significa che l'interfaccia utente non viene bloccata da operazioni a lunga esecuzione. In termini di Web, puoi pensare agli script eseguiti in un web worker.
Il linguaggio di scripting di WeChat si chiama WXS, SJS di Alipay e anch'esso SJS di ByteDance.
Baidu parla di JS quando fa riferimento
ai loro. Questi script devono essere inclusi utilizzando un tipo speciale di tag, ad esempio <wxs> in WeChat. Al contrario, l'app rapida utilizza tag <script> normali e la sintassi
JS ES6.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
I moduli possono anche essere caricati tramite un attributo src o importati tramite 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 bridge JavaScript
Il bridge JavaScript che collega le mini app al sistema operativo consente di utilizzare le funzionalità del sistema operativo (vedi Accesso a funzionalità avanzate. Offre anche diversi metodi di convenienza. Per una panoramica, puoi dare un'occhiata alle diverse API di WeChat, Alipay, Baidu, ByteDance e Rapid App.
Il rilevamento delle funzionalità è semplice poiché tutte le piattaforme forniscono un metodo canIUse() il cui nome sembra ispirato al sito web caniuse.com. Ad esempio, tt.canIUse() di ByteDance consente di verificare l'assistenza per API, metodi, parametri, opzioni, componenti e attributi.
// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
Aggiornamenti
Le mini app non hanno un meccanismo di aggiornamento standardizzato (discussione sulla potenziale standardizzazione). Tutte le piattaforme di mini app hanno un sistema di backend che consente agli sviluppatori di mini app di caricare nuove versioni delle loro mini app. Una superapp utilizza quindi quel sistema di backend per controllare e scaricare gli aggiornamenti. Alcune superapp eseguono aggiornamenti completamente in background, senza che la mini app stessa influisca sul flusso di aggiornamento. Altre superapp offrono un maggiore controllo sulle mini app.
Come esempio di processo sofisticato, i seguenti paragrafi descrivono in maggiore dettaglio il meccanismo di aggiornamento di WeChat per le mini app. WeChat verifica la disponibilità di aggiornamenti nei due casi seguenti:
- WeChat controllerà regolarmente la presenza di aggiornamenti delle mini app utilizzate di recente finché è in esecuzione. Se viene rilevato un aggiornamento, l'aggiornamento viene scaricato e applicato in modo sincrono la volta successiva che l'utente avvia la mini app. L'avvio a freddo di una mini app si verifica quando la mini app non era attualmente in esecuzione quando l'utente l'ha aperta (WeChat chiude forzatamente le mini app dopo essere state in background per 5 minuti).
- WeChat controlla anche la presenza di aggiornamenti quando viene avviata una mini app. Per le mini app che l'utente non apre da molto tempo, l'aggiornamento viene controllato e scaricato in modo sincrono. Durante il download dell'aggiornamento, l'utente deve attendere. Al termine del download, l'aggiornamento viene applicato e la mini app si apre. Se il download non riesce, ad esempio a causa di una cattiva connettività di rete, la mini app si apre comunque. Per le mini app che l'utente ha aperto di recente, qualsiasi potenziale aggiornamento viene scaricato in modo asincrono in background e verrà applicato al successivo avvio a freddo della mini app.
Le mini app possono attivare gli aggiornamenti precedenti utilizzando l'API UpdateManager. Offre le seguenti funzionalità:
- Invia una notifica all'app mini quando viene effettuato un controllo della disponibilità di aggiornamenti.
(
onCheckForUpdate) - Invia una notifica alla mini app quando è stato scaricato un aggiornamento e quando è disponibile.
(
onUpdateReady) - Invia una notifica all'app mini quando non è possibile scaricare un aggiornamento.
(
onUpdateFailed) - Consente all'app mini di forzare l'installazione di un aggiornamento disponibile che riavvierà l'app.
(
applyUpdate)
WeChat fornisce inoltre ulteriori opzioni di personalizzazione degli aggiornamenti per gli sviluppatori di mini app nel suo sistema di backend: 1. Un'opzione consente agli sviluppatori di disattivare gli aggiornamenti sincroni per gli utenti che hanno già installato una determinata versione minima della mini app e obbliga invece gli aggiornamenti ad essere asincroni. 2. Un'altra opzione consente agli sviluppatori di impostare una versione minima richiesta della loro mini app. In questo modo gli aggiornamenti asincroni da una versione inferiore alla versione minima richiesta verranno ricaricati forzatamente dalla mini app dopo l'applicazione dell'aggiornamento. Inoltre, nel caso in cui il download dell'aggiornamento non vada a buon fine, l'apertura di una versione precedente della mini app verrà bloccata.
Ringraziamenti
Questo articolo è stato esaminato da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, e Keith Gu.