Markup, stile, scripting e aggiornamento delle app mini

Thomas Steiner

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:

1. 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).
2. 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.