Markup languages
Comme indiqué précédemment, plutôt qu'en HTML brut, les mini-applications sont écrites avec les dialectes du HTML. Si vous avez déjà utilisé l'interpolation du texte et des directives Vue.js, vous vous sentirez à la maison, mais des concepts similaires existaient bien avant dans les transformations XML. (XSLT). Vous trouverez ci-dessous des exemples de code du WXML, mais le concept est Il en va de même pour toutes les mini-plates-formes d'applications : AXML, Swan Element, ByteDance TTML (bien que les outils de développement l'appellent Bxml), et Quick App HTML : Tout comme avec Vue.js, la couche sous-jacente le concept de programmation de mini-applications est model-view-viewmodel (MVVM).
Liaison de données
La liaison de données correspond à Vue.js interpolation du texte.
<!-- wxml -->
<view>{{message}}</view>
// page.js
Page({
data: {
message: "Hello World!",
},
});
Affichage de la liste
Le rendu de liste fonctionne comme la directive v-for 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 Vue.js.
Directive 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",
},
});
Modèles
Plutôt que d'exiger l'impératif
le clonage de l'élément 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 vers 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" },
},
});
Attribuer un style
Le style est appliqué aux dialectes CSS. Le nom de WeChat
WXSS.
Pour Alipay, il s'agit de ACSS.
CSS, et pour ByteDance,
dialecte est appelé
TTSS
Elles ont un point commun : elles étendent le CSS à l'aide de pixels responsifs. Lorsque vous écrivez du code CSS standard,
les développeurs doivent convertir toutes les unités de pixels pour les adapter à différents écrans d'appareils mobiles avec
des largeurs et des rapports de pixels différents. Le TTSS accepte l'unité rpx comme couche sous-jacente, ce qui signifie
la mini-application prend en charge le travail du développeur et convertit les unités en son nom, en fonction
une largeur d'écran spécifiée de 750rpx. Par exemple, sur un téléphone Pixel 3a dont la largeur d'écran est de
393px (avec un ratio de pixels de 2.75), les 200rpx responsives deviennent 104px sur l'appareil réel
lorsqu'il est inspecté avec les outils pour les développeurs Chrome (393 px / 750 rpx * 200 rpx environ 104 px). Dans Android, le même concept
s'appelle
pixel indépendant de la densité.
<ph type="x-smartling-placeholder">/* 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 tard) n'utilisent pas le Shadow DOM, les styles déclarés sur l'audience d'une page
dans tous les composants. L'organisation courante des fichiers d'une feuille de style consiste à avoir une feuille de style racine pour
des styles généraux et des feuilles de style individuelles par page, spécifiques à chaque page de la mini-application. Les styles peuvent
être importée avec une règle @import qui se comporte comme
Règle de règle CSS @import. Comme en HTML,
peuvent également être déclarés de façon intégrée, y compris l'interpolation du texte dynamique (voir
avant).
<view style="color:{{color}};" />
Script
Les mini-applications sont compatibles avec un "sous-ensemble sécurisé" de JavaScript, qui prend en charge des modules utilisant différentes
syntaxes qui rappellent 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. Le codage avec une syntaxe ES6 ou
plus récente est généralement possible,
car ces outils de développement transpilent automatiquement le code en ES5 si la cible de la compilation est
système d'exploitation avec une ancienne implémentation WebView (voir plus tard). La
la documentation des fournisseurs de super-applications mentionne explicitement que leurs langages de script ne sont pas
être confondus avec et
sont différents de JavaScript. Toutefois, cette affirmation se réfère principalement
fonctionnement des modules, c'est-à-dire qu'ils ne sont pas compatibles
modules ES.
Comme indiqué précédemment, le concept de programmation de mini-applications est model-view-viewmodel (MVVM). La couche logique et la couche vue s'exécutent sur des threads différents, ce qui signifie que l'interface utilisateur n'utilise pas sont bloquées par des opérations de longue durée. En termes Web, vous pouvez penser aux scripts exécutés Nœud de calcul Web
Le langage de script de WeChat s'appelle
WXS, Alipay's
Il en va de même pour SJS et ByteDance.
SJS.
Baidu utilise le langage JS lorsqu'il fait référence
les leurs. Ces scripts doivent être inclus à l'aide d'un type de tag spécial, par exemple <wxs> dans
WeChat. En revanche, Quick App utilise des balises <script> standards et l'ES6
Syntaxe JS.
<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 JavaScript Bridge
Le pont JavaScript qui connecte les mini-applications au système d'exploitation permet pour utiliser les fonctionnalités du système d'exploitation (consultez Accès à des fonctionnalités puissantes. Il propose également un certain nombre de méthodes pratiques. Pour un aperçu, vous pouvez consulter les différentes API de WeChat, Alipay, Baidu ByteDance, et Quick App.
La détection de caractéristiques est simple, car toutes les plates-formes fournissent un (littéralement appelé comme ceci)
canIUse() dont le nom semble inspiré du site Web caniuse.com. Pour
exemple, la fonction
tt.canIUse()
permet de vérifier la compatibilité des API, méthodes, paramètres, options, composants et 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 n'ont pas de mécanisme de mise à jour standardisé (discussions autour d'une éventuelle standardisation). Toutes les plates-formes de mini-applications disposent d'un système de backend, ce 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. Quelques super applis effectuer des mises à jour entièrement en arrière-plan, sans que la mini-application ne puisse les influencer. le flux de travail. D'autres super-applications offrent plus de contrôle sur les mini-applications elles-mêmes.
À titre d'exemple de processus sophistiqué, les paragraphes suivants décrivent le mécanisme de mise à jour de WeChat pour les mini-applications. plus en détail. WeChat recherche les mises à jour disponibles dans les deux scénarios suivants:
- Tant que WeChat est en cours d'exécution, WeChat recherche régulièrement les mises à jour des mini-applications récemment utilisées. Si un est détectée, elle est téléchargée et appliquée de manière synchrone la prochaine fois que l'utilisateur démarre mini-application. Le démarrage à froid d'une mini-application se produit lorsque celle-ci n'était pas en cours d'exécution lorsque l'utilisateur l'a ouverte (WeChat ferme les mini-applications de force après cinq minutes en arrière-plan).
- WeChat recherche également des mises à jour lorsqu'une mini-application est démarrée à froid. Pour les mini-applications que l'utilisateur n'a pas ouvertes pendant une longue période, la mise à jour est recherchée et téléchargée de manière synchrone. Pendant le téléchargement de la mise à jour, l'utilisateur doit attendre. Une fois le téléchargement terminé, la mise à jour est appliquée et la mini-application s'ouvre. Si le Le téléchargement échoue. Par exemple, en raison d'une mauvaise connexion réseau, la mini-application s'ouvre malgré tout. Pour les mini-applis qui ouverte récemment par l'utilisateur, toute mise à jour potentielle est téléchargée de manière asynchrone en arrière-plan et la prochaine fois que l'utilisateur démarrera à froid la mini-application.
Les mini-applications peuvent activer les mises à jour antérieures à l'aide de l'API UpdateManager. Il offre les fonctionnalités suivantes:
- Notifie la mini-application lorsqu'une recherche de mises à jour est effectuée.
(
onCheckForUpdate) - Notifie la mini-application lorsqu'une mise à jour a été téléchargée et est disponible.
(
onUpdateReady) - Notifie la mini-application lorsqu'une mise à jour n'a pas pu être téléchargée.
(
onUpdateFailed) - Permet à la mini-application d'installer d'office une mise à jour disponible, ce qui redémarrera l'application.
(
applyUpdate)
WeChat propose également des options de personnalisation des mises à jour supplémentaires pour les développeurs de mini-applications dans son système backend: 1. Une option permet aux développeurs de désactiver les mises à jour synchrones pour les utilisateurs ayant déjà une certaine version minimale de la mini-application installée et force à la place les mises à jour à être asynchrones. 2. Une autre option permet aux développeurs de définir la version minimale requise de leur mini-application. Ainsi, les mises à jour asynchrones à partir d'une version antérieure à la version minimale requise. Forcez le rechargement de la mini-application après et appliquer la mise à jour. L'ouverture d'une ancienne version de la mini-application sera également bloquée si vous téléchargez la mise à jour échoue.
Remerciements
Cet article a été examiné par Joe Medley, Kayce Basques, Milica Mihajlija, Alan Kent, et Keith Gu.