Markup languages
Comme indiqué précédemment, les mini-applications sont écrites avec des dialectes HTML plutôt qu'en HTML brut. Si vous avez déjà utilisé l'interpolation de texte et les directives Vue.js, vous vous sentirez immédiatement à l'aise. Cependant, des concepts similaires existaient bien avant dans les transformations XML (XSLT). Vous trouverez ci-dessous des exemples de code WXML de WeChat, mais le concept est le même pour toutes les plates-formes de mini-applications, à savoir AXML d'Alipay, Swan Element de Baidu, TTML de ByteDance (malgré le nom Bxml dans les outils pour les développeurs) et HTML de Quick App. Comme avec Vue.js, le concept de programmation de miniapplication sous-jacent est le modèle-vue-vue-modèle (MVVM).
Liaison de données
La liaison de données correspond à l'interpolation de texte de Vue.js.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Affichage de liste
L'affichage de listes fonctionne comme la directive v-for de Vue.js.
<!-- wxml -->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5],
},
});
Rendu conditionnel
Le rendu conditionnel fonctionne comme la directive v-if de 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",
},
});
Modèles
Plutôt que d'exiger le clonage impératif du content d'un modèle HTML, les modèles WXML peuvent être utilisés de manière déclarative via l'attribut is qui renvoie à une définition de modèle.
<!-- 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" },
},
});
Attribution d'un style
La mise en forme s'effectue avec des dialectes CSS. Celui de WeChat s'appelle WXSS.
Pour Alipay, il s'agit d'ACSS, pour Baidu de CSS et pour ByteDance de TTSS.
Leur point commun est qu'ils étendent le CSS avec des pixels responsifs. Lorsqu'ils écrivent du code CSS normal, les développeurs doivent convertir toutes les unités en pixels pour s'adapter aux différents écrans d'appareils mobiles, qui ont des largeurs et des ratios de pixels différents. TTSS prend en charge l'unité rpx comme couche sous-jacente, ce qui signifie que la mini-app prend le relais du développeur et convertit les unités à sa place, en fonction d'une largeur d'écran spécifiée de 750rpx. Par exemple, sur un téléphone Pixel 3a avec une largeur d'écran de 393px (et un ratio de pixels de l'appareil de 2.75), les 200rpx responsifs deviennent 104px sur l'appareil réel lorsqu'ils sont inspectés avec les outils pour les développeurs Chrome (393 px / 750 rpx * 200 rpx ≈ 104 px). Dans Android, le même concept est appelé pixel indépendant de la 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;
}
Étant donné que les composants (voir plus loin) n'utilisent pas Shadow DOM, les styles déclarés sur une page s'appliquent à tous les composants. L'organisation courante des fichiers de feuille de style consiste à avoir une feuille de style racine pour les styles globaux et des feuilles de style individuelles par page spécifiques à chaque page de la mini-app. Les styles peuvent être importés avec une règle @import qui se comporte comme la règle CSS @import. Comme en HTML, les styles peuvent également être déclarés en ligne, y compris l'interpolation de texte dynamique (voir before).
<view style="color:{{color}};" />
Script
Les mini-applications sont compatibles avec un "sous-ensemble sécurisé" de JavaScript qui inclut la prise en charge des modules utilisant différentes syntaxes rappelant CommonJS ou RequireJS.
Le code JavaScript ne peut pas être exécuté via eval() et aucune fonction ne peut être créée avec new Function(). Le contexte d'exécution du script est V8 ou JavaScriptCore sur les appareils, et V8 ou NW.js dans le simulateur. Il est généralement possible de coder avec la syntaxe ES6 ou une syntaxe plus récente, car les outils de développement spécifiques transpilent automatiquement le code en ES5 si la cible de compilation est un système d'exploitation avec une ancienne implémentation WebView (voir plus loin). La documentation des fournisseurs de super-applications mentionne explicitement que leurs langages de script ne doivent pas être confondus avec JavaScript et en sont distincts. Toutefois, cette affirmation ne concerne que le fonctionnement des modules, c'est-à-dire qu'ils ne sont pas encore compatibles avec les modules ES standards.
Comme mentionné précédemment, le concept de programmation des mini-applications est model-view-viewmodel (MVVM). Les couches logique et vue s'exécutent sur des threads différents, ce qui signifie que l'interface utilisateur n'est pas bloquée par les opérations de longue durée. En termes Web, vous pouvez considérer les scripts comme s'exécutant dans un Web Worker.
Le langage de script de WeChat s'appelle WXS, celui d'Alipay SJS et celui de ByteDance SJS.
Baidu parle de JS lorsqu'il fait référence au sien. Ces scripts doivent être inclus à l'aide d'un type spécial de balise, par exemple <wxs> dans WeChat. En revanche, Quick App utilise des balises <script> classiques et la syntaxe JS ES6.
<wxs module="m1">
var msg = "hello world";
module.exports.message = msg;
</wxs>
<view>{{m1.message}}</view>
Les modules peuvent également être chargés via un attribut src ou importés via 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 pont JavaScript
Le pont JavaScript qui relie les mini-applications au système d'exploitation permet d'utiliser les fonctionnalités de l'OS (voir Accès à des fonctionnalités puissantes). Il propose également plusieurs méthodes pratiques. Pour obtenir une vue d'ensemble, vous pouvez consulter les différentes API de WeChat, Alipay, Baidu, ByteDance et Quick App.
La détection des fonctionnalités est simple, car toutes les plates-formes fournissent une méthode canIUse() (littéralement appelée ainsi) dont le nom semble inspiré du site Web caniuse.com. Par exemple, tt.canIUse() de ByteDance permet de vérifier la compatibilité des API, des méthodes, des paramètres, des options, des composants et des attributs.
// Testing if the `<swiper>` component is supported.
tt.canIUse("swiper");
// Testing if a particular field is supported.
tt.canIUse("request.success.data");
Mises à jour
Les mini-applications ne disposent pas d'un mécanisme de mise à jour standardisé (discussion sur une éventuelle standardisation). Toutes les plates-formes de mini-applications disposent d'un système backend, qui permet aux développeurs de mini-applications d'importer de nouvelles versions de leurs mini-applications. Une super application utilise ensuite ce système backend pour rechercher et télécharger les mises à jour. Certaines super applications effectuent des mises à jour entièrement en arrière-plan, sans que la miniappli elle-même puisse influencer le processus de mise à jour. D'autres super applications offrent plus de contrôle aux mini-applications elles-mêmes.
Pour illustrer un processus sophistiqué, les paragraphes suivants décrivent plus en détail le mécanisme de mise à jour des mini-applications de WeChat. WeChat recherche les mises à jour disponibles dans les deux cas suivants :
- WeChat recherche régulièrement les mises à jour des mini-programmes récemment utilisés tant que WeChat est en cours d'exécution. Si une mise à jour est trouvée, elle est téléchargée et appliquée de manière synchrone la prochaine fois que l'utilisateur redémarrera l'application. Le redémarrage à froid d'une mini-app se produit lorsque la mini-app n'était pas en cours d'exécution lorsque l'utilisateur l'a ouverte (WeChat ferme de force les mini-apps après 5 minutes en arrière-plan).
- WeChat recherche également les mises à jour lorsqu'une mini-app est démarrée à froid. Pour les mini-applications que l'utilisateur n'a pas ouvertes depuis longtemps, la mise à jour est recherchée et téléchargée de manière synchrone. L'utilisateur doit patienter pendant le téléchargement de la mise à jour. Une fois le téléchargement terminé, la mise à jour est appliquée et la mini-app s'ouvre. Si le téléchargement échoue, par exemple en raison d'une mauvaise connectivité réseau, la mini-app s'ouvre quand même. Pour les mini-applications que l'utilisateur a ouvertes récemment, toute mise à jour potentielle est téléchargée de manière asynchrone en arrière-plan et sera appliquée la prochaine fois que l'utilisateur démarrera la mini-application à froid.
Les mini-applications peuvent choisir de recevoir les mises à jour plus tôt en utilisant l'API UpdateManager. Elle offre les fonctionnalités suivantes :
- Avertit la mini-app lorsqu'une recherche de mises à jour est effectuée.
(
onCheckForUpdate) - Avertit la mini-app lorsqu'une mise à jour a été téléchargée et est disponible.
(
onUpdateReady) - Avertit la mini-app lorsqu'une mise à jour n'a pas pu être téléchargée.
(
onUpdateFailed) - Permet à la mini-app d'installer de force une mise à jour disponible, ce qui redémarrera l'application.
(
applyUpdate)
WeChat propose également des options de personnalisation supplémentaires pour les développeurs de mini-programmes dans son système backend : 1. Une option permet aux développeurs de désactiver les mises à jour synchrones pour les utilisateurs qui ont déjà installé une version minimale spécifique de la mini-app, et de forcer les mises à jour à être asynchrones. 2. Une autre option permet aux développeurs de définir une version minimale requise pour leur mini-app. Les mises à jour asynchrones à partir d'une version inférieure à la version minimale requise forceront le rechargement de la mini-app après l'application de la mise à jour. Il empêchera également l'ouverture d'une ancienne version de la mini-app si le téléchargement de la mise à jour échoue.
Remerciements
Cet article a été examiné par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, et Keith Gu.