Markup languages
Come spiegato in precedenza, le mini app sono scritte con i dialetti HTML, anziché utilizzare il codice HTML. Se mai avuto a che fare con l'interpolazione e le direttive di testo Vue.js, ti rispetterai a casa, ma concetti simili esistevano molto prima in XML Transformations (XSLT). Di seguito, puoi vedere alcuni esempi di codice da WeChat WXML, ma il concetto è la stessa cosa per tutte le piattaforme mini-app, vale a dire la piattaforma AXML, Baidu Swan Element, ByteDance TTML (nonostante DevTools lo chiami Bxml) e Quick App HTML. Proprio come con Vue.js, la struttura concetto di programmazione di mini app è model-view-viewmodel (MVVM).
Associazione di dati
L'associazione di dati corrisponde a quella di Vue.js interpolazione del testo.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Rendering elenco
Il rendering degli elenchi funziona come l'istruzione 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 quello di Vue.js
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",
},
});
Modelli
Invece di richiedere l'imperativo
clonazione della versione 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 ai dialetti dei CSS. WeChat ha un nome
WXSS.
Per Alipay si chiama ACSS, l'agente di Baidu
CSS e, per ByteDance, i loro
dialetto è definito come
Servizio di assistenza tecnica.
Ciò che hanno in comune è che estendono i CSS con pixel adattabili. Quando scrivi un codice CSS normale,
gli sviluppatori devono convertire tutte le unità pixel per adattarsi ai diversi schermi dei dispositivi mobili
con larghezze e proporzioni pixel diverse. La sintesi vocale supporta l'unità rpx come livello sottostante, il che significa
la mini app prende il lavoro dallo sviluppatore e converte le unità per suo conto, in base
una larghezza dello schermo specificata di 750rpx. Ad esempio, su uno smartphone Pixel 3a con schermo largo
393px (e rapporto pixel del dispositivo di 2.75), gli 200rpx adattabili diventano 104px sul dispositivo reale
quando viene controllato con Chrome DevTools (393 px / 750rpx * 200rpx ≈ 104 px). Anche 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 copertura coprono una pagina
in tutti i componenti. L'organizzazione comune dei file dei fogli di stile prevede un foglio di stile radice per
stili globali e singoli fogli di stile per pagina specifici per ogni pagina della mini app. Gli stili possono
importata con una regola @import che si comporta come
@import Regola at-rule di CSS. Come in HTML,
Gli stili possono anche essere dichiarati in linea, inclusa l'interpolazione di testo dinamica (vedi
prima).
<view style="color:{{color}};" />
Definisci i tuoi contenuti
Le mini app supportano un "sottogruppo sicuro" di JavaScript che include il supporto per moduli che usano
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 oppure
JavaScriptCore sui dispositivi e V8 o
NW.js nel simulatore. Di solito è possibile programmare con una sintassi ES6 o più recente.
poiché i particolari DevTools inviano automaticamente il codice a ES5 se il target della build è un
un sistema operativo con una precedente implementazione di WebView (vedi più avanti). La
dei fornitori di superapp dichiara esplicitamente che i loro linguaggi di scripting non sono
essere confusi con JavaScript. Questa affermazione, tuttavia, si riferisce principalmente a
il funzionamento dei moduli, ovvero non supportano
Moduli ES.
Come accennato prima, il concetto di programmazione di mini app è model-view-viewmodel (MVVM). Il livello logico e il livello vista vengono eseguiti su thread diversi, il che significa che l'interfaccia utente vengono bloccati dalle operazioni a lunga esecuzione. In termini web, si possono pensare agli script in esecuzione in una Web worker.
Il linguaggio di scripting di WeChat si chiama
WXS, Alipay
SJS, la serie ByteDance
SJS.
Baidu parla di JS quando fa riferimento
le loro. Questi script devono essere inclusi utilizzando un tipo speciale di tag, ad esempio <wxs> in
WeChat. Al contrario, l'app rapida utilizza i normali tag <script> e l'ES6
Sintassi JS.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
I moduli possono essere caricati anche 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 JavaScript bridge
Il bridge JavaScript che collega le mini app al sistema operativo consente di per utilizzare le funzionalità del sistema operativo (vedi Accesso a funzionalità efficaci. it offre anche una serie di metodi pratici. Per una panoramica, puoi dare un'occhiata alle diverse API di WeChat, Alipay Baidu ByteDance, e Quick App.
Il rilevamento delle caratteristiche è semplice, poiché tutte le piattaforme offrono una funzione (letteralmente chiamata così)
Metodo canIUse() il cui nome sembra ispirato al sito web caniuse.com. Per
ad esempio, ByteDance
tt.canIUse()
consente di controllare 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 dispongono di un meccanismo di aggiornamento standardizzato (discussione sulla potenziale standardizzazione). Tutte le piattaforme di mini app hanno un sistema di backend che consente ai mini sviluppatori di app di caricare nuove versioni di le loro mini app. Una superapp utilizza quindi questo sistema di backend per verificare la disponibilità di aggiornamenti e scaricarli. Alcune super app Eseguire aggiornamenti interamente in background, senza che la mini app stessa influisca sull'aggiornamento flusso di lavoro. Altre super app offrono un maggiore controllo sulle mini app stesse.
Come esempio di un processo sofisticato, i paragrafi seguenti descrivono il meccanismo di aggiornamento di WeChat per le mini app in modo più dettagliato. WeChat verifica la presenza di aggiornamenti disponibili nei due scenari seguenti:
- WeChat controllerà regolarmente la presenza di aggiornamenti delle mini app utilizzate di recente, purché sia in esecuzione. Se viene trovato, l'aggiornamento viene scaricato e applicato in modo sincrono al successivo avvio a freddo dell'utente mini app. L'avvio a freddo di mini app si verifica quando la mini app non era in esecuzione mentre l'utente aperta (WeChat forza la chiusura delle mini app dopo essere state in background per 5 minuti).
- WeChat verifica la presenza di aggiornamenti anche quando si avvia a freddo una mini app. Per le mini app che l'utente non ha aperto per un lungo periodo, 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 va a buon fine, ad esempio a causa di una cattiva connettività di rete, si apre comunque la mini app. Per le mini app che aperto di recente dall'utente, qualsiasi potenziale aggiornamento viene scaricato in modo asincrono in background verrà applicata 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 alla mini app quando viene effettuato un controllo della disponibilità di 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 fornisce inoltre ulteriori opzioni di personalizzazione degli aggiornamenti per gli sviluppatori di mini app nel proprio sistema di backend: 1. Un'opzione consente agli sviluppatori di disattivare gli aggiornamenti sincroni per gli utenti che hanno già una determinata versione minima della mini app installata, forza invece gli aggiornamenti a 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 forza il ricaricamento della mini app dopo e applicare l'aggiornamento. Inoltre, l'apertura di una versione precedente della mini app verrà bloccata se scarichi l'aggiornamento non riesce.
Ringraziamenti
Questo articolo è stato esaminato da Mario Rossi Kayce Basques, Milica Mihajlija, Alan Kent e Keith Gu.