Markup languages
Come accennato in precedenza, le mini app vengono scritte con dialetti di HTML anziché con HTML semplice. Se hai mai avuto a che fare con l'interpolazione e le direttive di testo Vue.js, ti sentirai subito a tuo agio, ma concetti simili esistevano molto prima nelle trasformazioni XML (XSLT). Di seguito puoi vedere esempi di codice di 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 DevTools lo chiami Bxml) e HTML di Quick App. Come per Vue.js, il concetto di programmazione delle mini app sottostante è il model-view-viewmodel (MVVM).
Data binding
Il data binding corrisponde all'interpolazione del testo di Vue.js.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Rendering dell'elenco
Il rendering degli elenchi funziona come la direttiva v-for di 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 la direttiva
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
Anziché richiedere la
clonazione imperativa del content di un modello HTML,
i modelli WXML possono essere utilizzati in modo dichiarativo tramite l'attributo is che rimanda a una definizione di 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 viene applicato con dialetti di CSS. Quella di WeChat si chiama
WXSS.
Per Alipay, il suo si chiama ACSS, quello di Baidu semplicemente
CSS e per ByteDance, il suo
dialetto è chiamato
TTSS.
Ciò che hanno in comune è che estendono CSS con pixel adattabili. Quando scrivono CSS regolari,
gli sviluppatori devono convertire tutte le unità pixel per adattarsi a schermi di dispositivi mobili diversi con
larghezze e proporzioni in pixel diverse. TTSS supporta l'unità rpx come livello sottostante, il che significa che
la mini app assume il compito dello sviluppatore e converte le unità per suo conto, in base
a una larghezza dello schermo specificata di 750rpx. Ad esempio, su uno smartphone Pixel 3a con una larghezza dello schermo di
393px (e un rapporto pixel del dispositivo di 2.75), 200rpx responsive diventano 104px sul dispositivo reale
se ispezionate con Chrome DevTools (393 px / 750 rpx * 200 rpx ≈ 104 px). In Android, lo stesso concetto
è chiamato
pixel indipendente 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 shadow DOM, gli stili dichiarati in una pagina raggiungono
tutti i componenti. L'organizzazione comune dei file di fogli di stile prevede un foglio di stile principale per gli stili globali e fogli di stile individuali per pagina specifici per ogni pagina della mini app. Gli stili possono essere importati con una regola @import che si comporta come la regola CSS at-rule @import. Come in HTML,
gli stili possono essere dichiarati anche 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 i moduli che utilizzano sintassi diverse 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 degli script è V8 o
JavaScriptCore sui dispositivi e V8 o
NW.js nel simulatore. Di solito è possibile codificare con la sintassi ES6 o versioni successive,
poiché i particolari DevTools transcompilano automaticamente il codice in ES5 se la destinazione di build è un
sistema operativo con un'implementazione WebView precedente (vedi più avanti). La
documentazione dei fornitori di super app menziona esplicitamente che i loro linguaggi di scripting non
devono essere confusi con JavaScript e sono distinti da quest'ultimo. Questa affermazione, tuttavia, si riferisce principalmente al modo in cui funzionano i moduli, ovvero al fatto che non supportano ancora i moduli ES standard.
Come accennato in precedenza, il concetto di programmazione delle mini app è il 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 di lunga durata. In termini web, puoi pensare agli script in esecuzione in un Web Worker.
Il linguaggio di scripting di WeChat si chiama
WXS, quello di Alipay
SJS, quello di ByteDance
SJS.
Baidu parla di JS quando fa riferimento
al proprio. Questi script devono essere inclusi utilizzando un tipo speciale di tag, ad esempio <wxs> in
WeChat. Al contrario, Quick App utilizza i normali tag <script> 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 una serie di metodi di convenienza. Per una panoramica, puoi consultare le diverse API di WeChat, Alipay, Baidu, ByteDance e Quick App.
Il rilevamento delle funzionalità è semplice, poiché tutte le piattaforme forniscono un metodo (chiamato letteralmente così)
canIUse() il cui nome sembra ispirato al sito web caniuse.com. Ad esempio, il metodo
tt.canIUse()
di ByteDance consente di verificare il supporto di 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 super app utilizza quindi questo sistema di backend per verificare la presenza di aggiornamenti e scaricarli. Alcune super app eseguono gli aggiornamenti completamente in background, senza che la mini app stessa possa influenzare il flusso di aggiornamento. Altre super app offrono un maggiore controllo alle mini app stesse.
Come esempio di procedura sofisticata, i paragrafi seguenti descrivono in dettaglio il meccanismo di aggiornamento delle mini app di WeChat. WeChat verifica la disponibilità di aggiornamenti nei seguenti due scenari:
- WeChat controllerà regolarmente gli aggiornamenti delle mini app utilizzate di recente finché WeChat è in esecuzione. Se viene trovato un aggiornamento, questo viene scaricato e applicato in modo sincrono al successivo avvio a freddo della mini app da parte dell'utente. L'avvio a freddo di una mini app si verifica quando la mini app non era in esecuzione quando l'utente l'ha aperta (WeChat chiude forzatamente le mini app dopo 5 minuti in background).
- WeChat verifica la disponibilità di aggiornamenti anche 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 si apre la mini app. Se il download non riesce, ad esempio a causa di una connettività di rete scadente, 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 da parte dell'utente.
Le mini app possono attivare gli aggiornamenti anticipati utilizzando l'API UpdateManager. Offre le seguenti funzionalità:
- Notifica alla mini app quando viene eseguito un controllo degli aggiornamenti.
(
onCheckForUpdate) - Invia una notifica alla mini app quando un aggiornamento è stato scaricato ed è disponibile.
(
onUpdateReady) - Invia una notifica alla mini app quando non è stato possibile scaricare un aggiornamento.
(
onUpdateFailed) - Consente alla mini app di forzare l'installazione di un aggiornamento disponibile, che riavvierà l'app.
(
applyUpdate)
WeChat offre anche opzioni di personalizzazione aggiuntive per gli aggiornamenti per gli sviluppatori di mini app nel suo sistema di backend: 1. Una delle opzioni consente agli sviluppatori di disattivare gli aggiornamenti sincroni per gli utenti che hanno già installato una determinata versione minima della mini app e di forzare gli aggiornamenti asincroni. 2. Un'altra opzione consente agli sviluppatori di impostare una versione minima richiesta della mini app. In questo modo, gli aggiornamenti asincroni da una versione inferiore a quella minima richiesta forzeranno il ricaricamento della mini app dopo l'applicazione dell'aggiornamento. Inoltre, bloccherà l'apertura di una versione precedente della mini app se il download dell'aggiornamento non va a buon fine.
Ringraziamenti
Questo articolo è stato rivisto da Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.