wechat mini program wiki
1.0.0
La principale application de messagerie chinoise, WeChat, a déployé quelque chose d'assez radical : des mini-programmes. Applications intégrées qui ne nécessitent aucun téléchargement, aucune installation. Ouvrez, utilisez, partagez, c'est fait !
Il y a un grand débat – et de nombreux pièges à clics – sur le caractère pratique de ces applications... En effet, le cadre fourni aux développeurs n'en est qu'à ses balbutiements, encore limité et, honnêtement, un peu frustrant. Néanmoins, Tencent investit des ressources sans précédent dans l’adoption de ce canal, créant ainsi une dynamique et ouvrant des opportunités aux premiers arrivés. Nous pensons que ces pirates peuvent trouver des gains rapides s’ils osent essayer.
Vous avez des idées de services que vous aimeriez déployer dans WeChat dès que possible ? Vous avez des connaissances de base en Javascript et souhaitez expérimenter ce framework ? Vous vous êtes perdu dans la traduction Google de la doc ? Besoin d’un petit coup de pouce pour décrypter ce qui est possible ou pas ? Bonjour et bienvenue.
Se repérer dans la doc officielle n’est pas chose aisée. En fait, cela nécessite beaucoup d'essais/erreurs, des recherches sur le code open source et de nombreuses hypothèses pour arriver à quelque chose. Vous vous êtes cogné la tête contre le mur. Nous comprenons.
Notre mission est d'aider les entrepreneurs créatifs à créer d'excellents produits technologiques. Nous vous aiderons à faire les petits pas.
Le contenu ci-dessous n’est pas une traduction de la documentation et sera sûrement rapidement obsolète. C'est simplement notre contribution pour aider chacun à démarrer et à créer rapidement un mini-programme WeChat sympa. Faites-le maintenant.
Travaillez-vous sur un mini-programme ? Contactez-nous si vous souhaitez partager votre travail, rencontrer notre équipe, demander de l'aide !
Si vous souhaitez contribuer, vous pouvez envoyer une Pull Request ici ou nous appeler sur shanghai(at)lewagon.com pour des suggestions !
Cette pièce originale a été écrite par les anciens du Wagon : Adrien Pelegri (Batch #30) avec le soutien de Thibault Genaitay (Driver China) et Stéphane Delgado (Batch #61).
Le processus d'inscription est vraiment difficile, surtout si vous n'avez aucune expérience du fantastique monde administratif chinois. Le processus de vérification de WeChat sera long. Gardez votre calme.
Depuis l'enregistrement du mini-programme WeChat jusqu'à la version de développement, vous devez essentiellement suivre ces étapes :
Voici une liste du matériel dont vous aurez besoin pour enregistrer un mini-programme en tant qu'entreprise :
Nous vous recommandons de suivre ce manuel complet en anglais pour savoir comment vous inscrire et créer un projet de mini-programme : article Medium ou consulter cette documentation officielle de WeChat (dernière mise à jour : 08/02/2017).
Un IDE (environnement de développement intégré) est un ensemble d’outils de programmation permettant d’écrire une application. Il se compose d'un éditeur de code, d'un compilateur et d'un débogueur, accessibles via une seule interface utilisateur graphique.
Téléchargez l'IDE WeChat ici : Mac, Windows 64, Windows 32
Voici un tutoriel rapide pour maîtriser l'IDE WeChat et en tirer le meilleur parti.
Un éditeur de Code avec l'arborescence de vos fichiers sur le côté et un Simulateur à gauche, qui affiche l'aperçu de votre application. 
Voici une liste complète des boutons pour effectuer des tâches lorsque vous êtes en développement :
1. Profil : cliquez dessus pour vous déconnecter de l'EDI. 2. Édition du code 3. Débogage/Inspection : voir ci-dessous. 4. Informations sur le projet : voir ci-dessous. 5. Compilateur : Peut être utile pour compiler l'application lorsque l'actualisation automatique de la vue ne fonctionne pas. 
6. Valeur de la scène 7. Cache 8. Arrêter : Quittez le projet sur lequel vous vous trouvez et passez à un autre. 9. Masquer le simulateur 10. Appareils : Il donne une liste d'appareils pour tester la réactivité du mini-programme. 11. Vous pouvez travailler sur : wifi, 4G, 3G, 2G. 12. Masquer l'arborescence 13. Gérer vos fichiers : Rechercher, ajouter et supprimer un dossier ou un fichier.
Débogueur/Inspecteur : Cet outil est une partie importante de l’IDE, il ressemble au bon vieux Chrome DevTools . 
1. Barre supérieure Réseau : ce panneau sert à déboguer les problèmes de requêtes et de sockets ou les performances de chargement des pages. Stockage : permet d'accéder à toutes les données que vous avez dans votre cache. AppData : est utilisé pour afficher les données du projet en cours. Vous pouvez directement modifier les données dans le panneau et les prévisualiser. Wxml : vous permet d'inspecter et d'éditer à la volée tous les éléments de votre page. Capteur : vous pouvez simuler l'emplacement et les performances de l'appareil mobile pour déboguer la détection de la gravité.
2. Panneau Sources Le panneau Sources affiche les fichiers de script du projet actuel.
3. Console La console vous indiquera les erreurs que vous avez dans votre code en enregistrant les informations de diagnostic et en interagissant avec javascript dans la page en tant que console.log() que vous avez placé et plus encore.
Informations sur le projet : cette page est l'endroit où vous trouverez les détails du projet en cours tels que votre AppID, des informations sur l'annuaire et plus encore. En cliquant sur l' option aperçu vous pourrez tester le mini-programme directement sur votre téléphone après avoir scanné un QR code.
Remarque : Pendant que vous testez votre mini-programme sur votre téléphone, vous pouvez activer l'outil de débogage directement sur votre appareil.
Cette section présentera la structure du « quickstart » fourni par WeChat (passe-partout) et les principes fondamentaux dont vous avez besoin pour vous conformer à ce cadre.
Téléchargez WeChat quickstart.zip.
Arborescence de démarrage rapide :
.
├── app.js
├── app.json
├── app.wxss
├── pages
│ ├── indice
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── journaux
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└──utilitaires
└── util.js
La page d'index de ce passe-partout affiche une page d'accueil avec les informations du profil utilisateur actuel. Un clic sur votre avatar vous redirigera vers une nouvelle page affichant vos journaux de mini-programmes actuels.
Les mini-programmes WeChat commencent par des fichiers « app » (voir la capture d'écran ci-dessous). Ces fichiers sont le répertoire racine du mini-programme donc l'entrée de votre mini-programme. (Voici la documentation officielle de WeChat).
app.js est le code du script, la logique globale de votre mini-programme. Vous pouvez configurer et manipuler les fonctions de cycle de vie de votre MP, déclarer des variables globales ou appeler une API.
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json est la configuration globale du mini-programme global. Vous pouvez configurer le chemin de la page MP (mini-programme), le style de la fenêtre MP, définir le délai d'expiration du réseau et la configuration du débogage.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}Remarque : Les commentaires ne sont pas autorisés dans le fichier app.json .
app.wxss est la feuille de style globale du mini-programme. Vous devez déclarer ici les règles de style communes.
Les deux pages du démarrage rapide de WeChat sont :
Le dossier Pages est l’endroit où vous avez ou créez vos pages de mini-programme. Chaque page que vous créez doit contenir deux fichiers :
Vous pouvez ajouter deux fichiers supplémentaires dans chaque page que vous créez :
Fichier .json pour la configuration de la page.
Fichier .wxss pour la feuille de style de votre interface.
Règle : Chaque page de votre mini-programme peut être composée de quatre extensions de fichiers différentes (js ; json ; wxml ; wxss) mais doivent avoir le même nom.
Plus de détails : Une nouvelle page contiendra toujours un fichier .js et un minimum de fichier .wxml . L'extension de fichier .json est utilisée au cas où vous souhaiteriez remplacer la configuration de la fenêtre dans cette page particulière. Ajoutez .wxss si vous souhaitez ajouter une feuille de style à votre page.
Voyons ce qui se passe dans chaque page du projet de démarrage rapide.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )Commentaires d’extrait :
Page() pour collecter des informations sur l'utilisateur.Page() et définit data: pour lier dynamiquement les données dans la vue.Tapped redirige l'utilisateur actuel vers sa page de journaux.onLoad obtient les informations utilisateur et met à jour les données userinfo . Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )Commentaires d’extrait :
formatTime ultérieurement.Page() et définit data: .onLoad récupère les journaux de l'utilisateur actuel du cache wx.getStorageSync('logs') . Restituez ensuite les journaux au formatTime qui est fourni par les exigences de util.js . Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}Note:
Dans Utils sont stockées les bibliothèques importées dont vous pourriez avoir besoin ailleurs (dans notre exemple, util.js est requis dans log.js). Dans l'extrait de code ci-dessus, la fonction formatTime est définie dans util.js pour afficher correctement la date de vos journaux.
Jusqu'à présent, vous comprenez que vous aurez deux calques sur chaque page :
Couche logique (.js) : traite les données et les envoie à la couche de vue, tout en recevant les événements déclenchés depuis la couche de vue.
Couche vue (.wxml/.wxss) : affiche les données traitées par la couche logique dans une vue, tout en envoyant les événements de la couche vue à la couche logique.
On peut décomposer le cycle de vie d'un mini-programme en deux cycles, le cycle d'application et le cycle de page. Le cycle de vie App() est le point de début et de fin du mini-programme tandis que le cycle de vie Page() est activé lorsque les utilisateurs parcourent le mini-programme.
La fonction App() est utilisée pour enregistrer un mini-programme. Il prend un objet comme paramètre qui spécifie les fonctions de cycle de vie d'un MP.
Commentaires :
onLaunch et initialise le MP.onShow est déclenchée.onHide est déclenchée lorsque l'utilisateur actuel quitte le mini-programme. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) Le framework WeChat propose une fonction globale appelée getApp() qui est une instance de App() .
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data La fonction getApp() peut être utile pour la simple raison que vous ne pouvez pas définir la fonction App() à l'intérieur d'une fonction Page() . Pour accéder à l'instance d'application, vous devez appeler la fonction getApp() .
La fonction Page() est utilisée pour enregistrer une page. Il accepte un objet comme paramètre, qui spécifie les données initiales de la page, les fonctions de cycle de vie, le gestionnaire d'événements, etc.
Commentaires :
onLoad .onShow .onShow appelle onReady pour restituer la vue.onShow restitue directement une vue.onHide est déclenché lorsque le mini-programme passe à une autre page.onUnload est appelée lorsque vous quittez une page à l'aide de wx.redirectTo() et wx.navigateBack() . Ou lorsque la page en cours est relancée, wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
Lorsque le cycle de vie App() est terminé, la page se charge en appelant onLoad pour la première fois et ne l'appellera qu'une seule fois.
Lorsque le mini-programme s'exécute de l'arrière-plan (cycle de vie de l'application) au premier plan (cycle de vie de la page), il appelle d'abord la fonction App() onShow , puis appelle la fonction Page() onShow lors du passage au premier plan.
Recommandations WeChat :
App() ne peut pas être réutilisée et doit être enregistrée une fois dans le app.js .onLaunch lorsque la page getCurrentPages() n'est pas encore générée.getApp() vous pouvez obtenir une instance de App() mais les fonctions de cycle de vie ne tentent pas d'appeler les fonctions App() . La configuration de votre mini-programme est simple et conçue pour vous faire gagner du temps et vous éviter des frustrations lorsque vous avez des besoins de personnalisation.
WeChat divise la configuration app.json en cinq parties :
Dans cette partie, nous allons détailler cet exemple complet de configuration de app.json .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} Le rôle pages dans app.json est de définir toutes les routes de votre mini-programme. La configuration de cet élément est obligatoire et nécessite un tableau de chaînes . Chaque sous-dossier et fichier du dossier des pages parent correspond à un chemin de routage .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} Astuce : Chaque fois que vous ajoutez un chemin de route à "pages" , l'IDE créera automatiquement le dossier et les fichiers qui correspondent au chemin que vous venez de créer.
Le framework WeChat apporte plusieurs logiques de routage :
Description du mode de routage :
Initialisation : Une fois le mini-programme lancé, la première page est chargée par les fonctions onLoad et onShow .
Ouvrir une nouvelle page : l'ouverture d'une nouvelle page masque la page actuelle et passe à une autre à l'aide de wx.navigateTo . En arrière-plan, la première page sera masquée par l'appel de la fonction onHide et sautera par-dessus l'autre page en appelant onLoad et onShow . 
Redirection de page : fermez la page actuelle en appelant onUnload et accédez à une page de l'application à l'aide de wx.redirectTo qui appelle les fonctions onLoad et onShow .
Retour de page : onUnload la page actuelle, appelle la fonction onLoad puis affiche la page cible en appelant onShow .
Rechargement, wx.reLaunch : Ferme toutes les pages et recharge la page actuelle. * Ne fonctionne pas sur certains appareils Android.
Changer d'onglet, wx.switchTab : passe d'une page tabBar à une autre et ferme ou masque toutes les autres pages non-tabBar en utilisant onUnload, onHide et onShow . Découvrez tous les scénarios possibles de changement d'onglet.
Changer d'onglet, restrictions de navigation :
Recommandations WeChat :
navigateTo , redirectTo ne peut ouvrir qu'une page non-tabBar. - switchTab ne peut ouvrir et afficher la page tabBar. - reLaunch peut être utilisée pour toutes les pages. getCurrentPages() : Cette fonction est utilisée pour obtenir l'instance de la pile de pages actuelle. Il est donné sous forme de tableau dans l’ordre de la pile des pages. Le premier élément du tableau est la première page et le dernier élément la page actuelle.
tabBar comme son nom l'indique, est l'élément qui configure la barre d'onglets supérieure ou inférieure. tabBar est un tableau pouvant accueillir un minimum de 2 et un maximum de 5 onglets.
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}Indication des attributs :
L’utilisation de la clé list tabBar nécessite un objet dans chaque élément du tableau.
Les valeurs des attributs List sont les suivantes :
Description des attributs TabBar : 
Recommandations WeChat :
tabBar en haut ne pouvait pas afficher les icônes.tabBar inférieure est de 40 Ko, 81 px * 81 px.L'élément window est utilisé pour définir le titre du mini-programme et le style de fenêtre commun.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}Description des attributs de la fenêtre :
| Attribut | Taper | Valeur par défaut | Description |
|---|---|---|---|
| navigationBarContexteCouleur | CouleurHex | #000000 | Couleur d'arrière-plan de la barre de navigation |
| navigationBarTextStyle | Chaîne | white | Couleur du titre de la barre de navigation, black ou white |
| navigationBarTitleText | Chaîne | Titre de la barre de navigation | |
| Style de navigation | Chaîne | default | Style de barre de navigation, default ou custom . Utilisez custom pour personnaliser le style de la barre de navigation. |
| Couleur de fond | CouleurHex | #ffffff | Couleur d’arrière-plan de l’application. Ex : la couleur d'arrière-plan que vous voyez lors du tirage pour actualiser n'affecte pas la couleur des éléments <page> . |
| style de texte d'arrière-plan | Chaîne | dark | Tirez pour actualiser le style du texte, dark ou light |
| fondCouleurHaut | Chaîne | #ffffff | Couleur de fond de la partie supérieure de la fenêtre. Uniquement pris en charge sur iOS |
| fondCouleurBas | Chaîne | #ffffff | Couleur de fond de la partie basse de la fenêtre. Uniquement pris en charge sur iOS |
| activerPullDownRefresh | Booléen | false | Activez ou désactivez l'extraction pour actualiser l'ensemble de l'application. |
| onReachBottomDistance | Nombre | 50 | Définissez la distance à partir du bas de la page à laquelle le rappel onReachBottom() doit être déclenché. |
| pageOrientation | Chaîne | portrait | Définir la prise en charge de la rotation de l'écran. Prend en charge les auto , portrait et landscape . |
L'orientation par défaut de l'application peut être configurée à l'aide de pageOrientation dans la window du fichier de configuration app.json . Cet attribut prend en charge 3 valeurs :
auto pour permettre au mini-programme de fonctionner en modes Portrait et Paysage.portrait pour forcer le mini programme à s'afficher uniquement en mode portraitlandscape pour forcer le mini programme à s'afficher uniquement en mode paysage "enablePullDownRefresh": true doit être configuré dans le app.json global comme ci-dessus et vous pouvez ensuite appeler onPullDownRefresh() dans les pages du mini-programme.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat offre la possibilité de modifier le titre de la barre de navigation supérieure de chaque page.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )Le délai d'attente du réseau peut être fourni dans diverses requêtes réseau. Voici le lien vers la documentation WeChat si vous souhaitez aller plus loin.
Voici un lien vers la documentation WeChat.
WXML est un langage de balisage WeChat similaire au HTML. Il combine une bibliothèque de composants de base et un système d'événements pour créer des pages dynamiques.
Le système d'événements WeChat se comporte comme des événements Javascript classiques qui gèrent les réponses logiques à la couche de visualisation.
Le tableau ci-dessous répertorie les différences significatives que vous rencontrerez en développement entre WXML / HTML :
Plus d'explications sur <block> :
<block> n'est pas un composant , c'est seulement un élément d'emballage , il ne fera aucun rendu dans la page et n'acceptera que les propriétés de contrôle .
Remarque : Tous les composants et attributs sont en minuscules.
Le framework Mini-program ne permet pas aux développeurs d'utiliser le DOM pour contrôler vos éléments WXML. Au lieu de cela, vous mettrez à jour votre couche de vue (fichier .wxml) via la méthode de liaison de données :
Afin de se conformer aux exigences de WeChat, l'attribut data doit être initialisé au format JSON dans la fonction Page() . La technique de liaison de données permet de mettre à jour les données de manière dynamique au sein de la couche de vue.
Une bonne pratique consiste à initialiser data en haut de la fonction Page() .
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} Les data: qui sont transmises à la couche de vue sont extraites des attributs de données dans la fonction Page() correspondante.
Syntaxe de liaison de données : la liaison de données utilise la syntaxe Moustache (doubles accolades) pour envelopper les variables. Cette syntaxe est une analyse de moteur de modèle sans logique. Bref, c'est très pratique et simple à utiliser !
WeChat offre de nombreuses possibilités concernant l'utilisation de la liaison de données. Vous avez la possibilité d'utiliser la liaison de données sur les attributs des composants, les propriétés, les opérations sur les chaînes, les opérations arithmétiques, le chemin des données et le tableau.
La propriété de contrôle wx:for lie un tableau de votre couche logique (fichier .js), le parcourt et attribue les données.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) Semblable à <view wx:for> vous pouvez utiliser <block wx:for> pour afficher un bloc de plusieurs lignes . (Voir bloc dans le tableau WXML ci-dessus).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >Pour plus de détails sur le code ci-dessus, consultez ce référentiel Github.
Autres ressources :
Semblable à wx:for , wx:if est utilisé pour définir une instruction conditionnelle et déterminer si le bloc doit être rendu ou non.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) Si vous souhaitez afficher plusieurs balises dans votre bloc d'instructions conditionnelles, vous pouvez utiliser <block wx:if> .
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > Creusez plus loin dans la documentation wx:if WeChat.
Les modèles permettent de définir des extraits de code que vous souhaitez réutiliser plusieurs fois dans différents fichiers de votre mini-programme.
L'élément de modèle WXML a sa propre portée et ne peut utiliser que des données à transmettre.
Tout d'abord, pour déclarer un modèle, vous devez définir son nom.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> Plus tard, si vous souhaitez appeler un modèle dans le même fichier, utilisez l' attribut is et le nom du modèle comme valeur pour déclarer le modèle requis. Et n'oubliez pas de transmettre les données au modèle en utilisant l'attribut data .
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) Pour déclarer un modèle déjà défini dans un nouveau fichier, vous devez d'abord l'importer.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />Plus de détails sur la documentation WeChat ici.
En plus des fonctions d'initialisation des données et de cycle de vie, le framework permet de définir des fonctions de gestion des événements.
L'élément WXML (gestionnaire d'événements) déclenche l'événement et la couche logique lie le gestionnaire d'événements pour recevoir un objet événement en tant que paramètre.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : Cette fonction met à jour les données au sein de la couche logique qui seront ensuite envoyées à la couche de vue. La fonction setData() reçoit un objet en tant que paramètre et met à jour la valeur de la clé en utilisant this.data comme chemin de données.
Il existe de nombreux types d'événements de liaison, la plupart des composants ont leur propre définition d'événement de liaison.
Événements de liaison des composants :
bindsubmit pour un formulaire.bindinput pour une entrée.bindscroll pour une vue défilante. Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )Événements de liaison classiques :
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) Les deux événements de liaison courants utilisés sont bind+event_type et catch+event_type . L' événement catch est celui qui empêche les événements bouillonnants.
Concept d'événement bouillonnant : pour les utilisateurs non javascript, un événement bouillonnant peut être défini lorsqu'un événement se produit dans un élément imbriqué dans un autre élément. Le nœud parent et les éléments imbriqués sont enregistrés en tant que gestionnaire d'événements pour cet événement particulier. Le nœud parent de l'élément imbriqué doit utiliser catch+event_type , ce qui empêchera l'événement de se propager aux éléments ancêtres.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )Principalement utilisé lorsque vous imbriquez des éléments et que vous ne souhaitez pas afficher le nœud parent de l'élément que vous liez.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )Voici des conseils pratiques pour activer le partage de mini-programmes. WeChat ouvre deux façons de partager un mini-programme :
Possibilité d' activer le bouton Suivant dans le menu déroulant qui apparaît en cliquant sur le coin supérieur droit ... de la page.
Créez un bouton Suivant dans la page de votre mini-programme. Cela rend le processus de partage plus convivial.
Dans les deux variantes, le framework transmettra automatiquement une mini-carte de programme avec une capture d'écran de votre en-tête MP.
Pour activer ce bouton, nous devons utiliser une fonction Page() appelée onShareAppMessage .
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,Dans cette fonction, vous devez définir un titre qui sera affiché en haut de la carte de transfert et le chemin de la page actuelle . Si vous oubliez d'ajouter un titre, WeChat en ajoutera un par défaut (le nom de votre mini-programme).
Restriction : La seule chose que vous pouvez définir dans ce cas est l' événement onShareAppMessage . Le bouton Suivant sera créé par le framework lui-même.
Cette fonctionnalité permet aux développeurs de créer un bouton suivant spécifique dans la page en utilisant la propriété du bouton open-type et sa valeur 'share' .
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > Contrairement au premier cas, nous devons créer le gestionnaire d'événements qui déclenche la fonction onShareAppMessage . Cette fonction appelle wx.showShareMenu et passe withShareTicket en paramètre.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) Remarque : les deux variantes utilisent une fonction Page() , ce qui implique que vous partagez la page spécifique sur laquelle vous déclarez la fonction.
WeChat vise à créer une expérience utilisateur conviviale , efficace et cohérente . Pour y parvenir, l’équipe de conception officielle de WeChat fournit un référentiel WeUI. Cette bibliothèque frontale de base (WeUI) est cohérente avec l'expérience visuelle native de WeChat. WeUI peut être compris comme une bibliothèque frontale WeChat, similaire à Bootstrap . Il comprend un large ensemble de composants tels qu'un bouton, une cellule, une boîte de dialogue, une progression, un toast, un article, une feuille d'action, une icône, etc.
Dépôts Github utiles :
Téléchargez le référentiel WeUI localement via le npm :
npm install weui-wxss
Le code téléchargé contient le code source WeUI et un exemple de mini-programme basé sur WeUI.
Ouvrons l'exemple de mini-programme WeUI dans l'IDE WeChat :
Importez le style WeUI dans votre app.wxss pour activer l'utilisation du style WeUI dans votre mini-programme :
@import "style/weui.wxss" ;
Pour plus de détails sur les directives de conception de WeChat, vous pouvez trouver ici la documentation complète.
WXSS possède presque toutes les fonctionnalités de CSS. La feuille de style définie dans app.wxss correspond aux règles de style communes identifiées sur chaque page. La feuille de style définie dans une page particulière est un style local qui agit uniquement sur la page actuelle et écrase ainsi les mêmes sélecteurs utilisés dans app.wxss . WXSS par rapport à CSS présente deux différences majeures :
WXSS utilise rpx (pixel réactif) comme unité. Il permet d'ajuster les pixels en fonction de la largeur de l'écran. Vous pouvez continuer à utiliser l’unité px classique (mais pas la manière de faire WeChat). (1rpx = 0.5px ; 1px = 2rpx)
Pour importer une feuille de style sortante , utilisez l'instruction @import suivie du chemin relatif et d'un ; à la fin de la déclaration.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;Le framework WeChat ne peut pas prendre en charge de nombreux sélecteurs CSS standards, tels que le sélecteur en cascade.
Sélecteurs pris en charge :
Recommandation WeChat :
Le framework WeChat fournit aux développeurs un large ensemble de composants de base, la liste exhaustive des composants est ici.
<navigator> est votre ancre en HTML. Il est utilisé pour créer un lien d’une page à une autre. L'attribut le plus important de l'élément navigateur est open-type .
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >Description des attributs du navigateur :
Description des valeurs de type ouvert :
Le composant Picker dans la documentation WeChat est divisé en trois sélecteurs, le sélecteur classique qui est celui par défaut, le sélecteur d'heure et le sélecteur de date .
Le cas d'utilisation ci-dessous est basé sur un sélecteur de date mais la logique reste la même pour un autre sélecteur.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )Attributs du sélecteur de date :
Un interrupteur est une bascule visuelle à deux états, activé et désactivé.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )Attributs du commutateur :
Un toast est un élément non modal utilisé pour afficher des composants brefs et à expiration automatique afin d'informer les utilisateurs.
Dans l'extrait de code ci-dessous, nous simulons une soumission de formulaire pour montrer comment un toast fonctionne et s'affiche.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >Dans l'extrait de code ci-dessus, nous avons créé un bouton dynamique dans le but de soumettre un formulaire . Le bouton est animé par une roulette de chargement lorsque vous cliquez dessus.
Ensuite, nous affichons un toast en utilisant l'API wx.showToast pour informer les utilisateurs.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )Une boîte modale permet de superposer un petit élément sur une page . Le principal avantage des boîtes modales est qu’elles évitent d’avoir à utiliser des fenêtres contextuelles conventionnelles ou des rechargements de pages.
Il existe cinq catégories de situations dans lesquelles les boîtes modales sont couramment utilisées :
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )Paramètres modaux :
Le composant map est un composant natif, il possède une longue liste d’attributs, nous allons passer en revue les principaux. Voici le lien vers la documentation WeChat pour plus de détails.
liste des attributs map :
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >Reportez-vous à la partie Services basés sur la localisation du wiki si vous souhaitez jeter un œil aux services basés sur la localisation proposés par WeChat via l'API.
Recommandations WeChat :
wx.getLocation doit spécifier type comme gcj02 Cette section vise à expliquer les différentes étapes que vous devez suivre si vous souhaitez conserver les données de votre application et récupérer des données dans une base de données. Nous avons sélectionné Leancloud.cn pour la simplicité de son installation pour les débutants.
Un peu de contexte d'abord : l'exemple ci-dessous est basé sur un mini-programme visant à recueillir des retours via un formulaire simple. Ce mini-programme conserve les données collectées sur Leancloud.cn. Nous expliquerons comment récupérer et afficher les données stockées sur la base de données. Pour illustrer cette deuxième section (récupérer des données), nous avons créé une nouvelle page qui affiche tous les avis stockés sur Leancloud.
Voici le dépôt Github du projet utilisé pour créer ce tutoriel.
Spécifications :
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >Lorsque la structure du formulaire est créée comme ci-dessus, nous devons ensuite créer l'événement déclenché par la soumission du formulaire.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) Stockage local : dans la fonction bindFormSubmit , nous avons attribué les entrées de l'utilisateur à des variables locales dans le but de tester si nous pouvons collecter localement les entrées de l'utilisateur du formulaire.
Avant de commencer l'installation, si vous êtes en développement, ajoutez votre nom de domaine à la liste blanche en cochant la dernière case de l'interface du projet dans votre IDE WeChat. Pour des besoins spécifiques de débogage, vous pouvez suivre ce tutoriel Leancloud.
Pour démarrer la configuration de Leancloud, créez d'abord un compte sur Leancloud.
Maintenant que vous êtes prêt pour l'installation et l'initialisation de Leancloud dans votre mini-programme vous pouvez suivre leur documentation qui vous permettra de suivre un processus en deux étapes :
appId et appKey dans votre app.js . // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;Si vous êtes perdu, référez-vous au référentiel Github du projet.
En premier lieu, créez un nouveau dossier appelé model et ajoutez un fichier form.js à ce dossier. Nommez votre fichier en fonction du type d'objet que vous souhaitez conserver, dans ce cas un formulaire. Cette étape n'est pas obligatoire mais permet de garder vos fichiers organisés.
Créons l'objet : Dans le fichier form.js que vous venez de créer, exigez av-weapp-min.js que vous avez installé dans util.js et attribuez-le à une constante AV . Instanciez ensuite l’objet Form .
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; Maintenant que vous avez instancié l'objet Form , créez l'objet formulaire pour encapsuler les données dans la couche logique (ici form.js) et redirigez l'utilisateur après la soumission du formulaire.
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )Débriefing de l'extrait de code :
binFormSubmit nous avons ajouté des autorisations qui permettent à Leancloud de lire et d'écrire via l'objet que nous avons créé et que nous souhaitons conserver.setTimeout qui encapsule les données dans le nouvel objet Form et rediriger l'utilisateur lorsque le formulaire est soumis. Remarque: setACL(acl) est une propriété intégrée LeanCloud.
Jusqu'à présent, tout se fait dans votre mini-programme, ce qui reste à faire est une projection des données collectées dans votre tableau de bord LeanCloud .
Form dans cet exemple.Testez-le pour vous assurer que les données collectées sont persistées dans votre tableau de bord LeanCloud.
Permettez-moi d'abord de vous rappeler le contexte de cette section. Nous voulons afficher dans une nouvelle page la liste des avis que nous avons collectés et persistés sur LeanCloud . Je suppose que vous avez suivi la première section du tutoriel (si vous l'avez manqué, voyez ci-dessus).
Spécifications :
review .Créons donc une nouvelle page de révision et un bouton qui redirige vers la page de révision . ( Conseil: ajoutez simplement le chemin d'accès à votre app.json , le framework créera le nouveau dossier de page et les fichiers en soi).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >L'étape suivante consiste à récupérer les données stockées sur LeanCloud et à les afficher .
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > Ci-dessus, nous avons créé un bloc de rendu de liste à l'aide de wx:for cela afficher chaque avis et nom de la personne qui crée la critique.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )Code d'extrait de code:
AV qui contient les données stockées.forms .Dans ce cas d'utilisation, nous venons de voir comment stocker des données que nous collectons localement à LeanCloud et comment récupérer les données stockées à partir de LeanCloud.
Nous vous recommandons de lire la documentation LeanCloud ou de vérifier le mini-programme LeanTodo créé par LeanCloud, GitHub Repository.
Lorsque vous êtes en production, vous devez configurer le nom de domaine LeanCloud dans la plate-forme WeChat. Suivez ce tutoriel LeanCloud.
Toutes les informations utilisateur auxquelles vous avez accès via wx.getUserInfo :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) WeChat "QuickStart" (WECHAT BULERPLAY) vous offre une fonction getUserInfo dans le fichier app.js. Comme son nom l'indique, cette fonction est destinée à obtenir des informations utilisateur . Passons par étape par étape par cette fonction.
Descriptif général :
getUserInfo a un paramètre CB , qui est également une fonction.If Block of getUserInfo sera transmise si userInfo de globalData n'est pas nul.userInfo est null, la fonction getUserInfo appelle l'interface de connexion. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) Premier cas, le formulaire userInfo globalData n'est pas nul
L'instruction IF Condition vise à déterminer si l'argument CB est passé pour obtenir getUserInfo est un type de fonction et si c'est le cas, il passera userInfo .
Comment déterminent-ils si le paramètre CB est une fonction?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} Passons par cette fonction onLoad de index.js
onLoad appelle la fonction getUserInfo sur l'instance de l'application .userInfo vers les informations utilisateur actuelles.userInfo mis à jour vers globalData dans le fichier app.js.Deuxième cas, UserInfo est nul
userInfo est NULL getUserInfo Fonction Renvoie l'instruction else qui appelle l'interface de connexion.getUserInfo est appelé et agit comme le bloc if que nous avons vu ci-dessus. Si l'utilisateur actuel est déjà connecté, les informations de l'utilisateur sont affectées à globalData via la page index.js qui appelle la fonction onLaod . Et puis la même logique est appliquée.
Les mini-programmes WeChat ont un mécanisme de cache dans leur API. En fait, chaque mini-programme a son propre stockage de cache local.
Rappel: le stockage du cache est utilisé pour stocker les données auxquelles nous souhaitons accéder rapidement. Il réduit le temps d'attente des utilisateurs , car la demande est satisfaite du cache local qui est plus proche des clients par rapport au serveur d'origine utilisé pour demander votre base de données.
Cache Storage propose deux types de méthodes pour stocker des données dans le cache:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage Build Paramètres en tant que JSON, une clé pour spécifier la clé et les données stockées pour spécifier la valeur de clé à stocker.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; La syntaxe wx.setStorageSync est plus simple, les paramètres sont directement passés. Et peut obtenir des données via la fonction de rappel entrante.
WeChat fournit trois actions principales sur le cache:
wx.setStorage ou wx.setStorageSync .wx.getStorage ou wx.getStorageSync .wx.clearStorage ou wx.clearStorageSync .wx.removeStorage ou wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) Vous pouvez appeler l'interface utilisateur du scanner de code client à l'aide de l'API wx.scanCode . Il donne un accès direct au scanner WeChat via un bouton CTA dans le but de scanner un code QR.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}L'API WeChat fournit un ensemble complet de services basés sur la localisation:
wx.chooseLocation pour choisir l'emplacement que vous souhaitez afficher.wx.getLocation pour obtenir l'emplacement de l'utilisateur actuel.wx.openLocation pour afficher l'emplacement sur leur vue de carte de BUIT-in .wx.createMapContext pour personnaliser votre carte. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} Ci-dessus, nous avons utilisé le wx.getLocation pour récupérer la position actuelle de l'utilisateur en obtenant sa latitude et sa longitude.
wx.getLocation Détails supplémentaires: Si un utilisateur quitte le mini-programme mais affichez en plus de son chat, le mini-programme, vous pouvez continuer à appeler wx.getLocation et donc obtenir l'emplacement de l'utilisateur continuellement.
Affichez l'emplacement de l'utilisateur actuel sur la carte intégrée WECHAT: Call API wx.openLocation , permet l'ouverture de la vue de carte intégrée WeChat afin d'afficher l'emplacement que vous avez obtenu à partir de la fonction listenerBtnGetLocation que nous avons créée ci-dessus.
Remarque: Call API wx.openLocation , redirige l'utilisateur vers une nouvelle fenêtre de carte.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}L'API WECHAT Image offre quatre possibilités:
wx.chooseImage pour choisir une image de votre album ou de votre appareil photo.wx.previewImage pour prévisualiser l'image avant le téléchargement de l'application.wx.getImageInfo pour obtenir des informations d'image (hauteur, largeur, chemin, src).wx.saveImageToPhotosAlbum pour sauver l'image du mini-programme à votre album. Dans l'exemple ci-dessous, nous créons une fonction appelée listenerBtnChooseImage dans le but d'appeler l'album ou la caméra utilisateur en utilisant wx.chooseImage . Ensuite, nous utilisons wx.getImageInfo pour obtenir des informations d'image.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )Maintenant que nous avons une image sur la page, enregistrons l'image du mini-programme à l'album utilisateur actuel en appuyant longtemps sur l'image.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )L'API WECHAT Network propose des demandes HTTPS courantes, WebSocket, téléchargez et téléchargez des fichiers.
wx.request pour faire une demande HTTPS standard.wx.uploadFile pour télécharger un fichier sur le serveur désigné.wx.downloadFile pour télécharger un fichier depuis le serveur désigné. 
Dans l'exemple ci-dessous, nous avons une fonction et un gestionnaire d'événements: addNewPost et onPullDownRefresh respectivement, comme indique leur nom, vous devriez être en mesure d'ajouter un nouveau message et d'obtenir des publications à l'aide d'un appel wx.request .
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )Maintenant que nous avons publié, obtenons et affichons-le sur la couche de vue. Pour une simplicité, nous profiterons de OnPullDownRefresh pour recharger de nouveaux messages.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) Tout au long de notre chemin de création de mini-programmes que nous avons rencontré des problèmes et des questions, nous voulons partager avec vous. Si vous avez eu des problèmes que vous souhaitez partager, contactez-nous.
WeChat n'autorise que l'API qui a une licence ICP, vous pouvez donc oublier la plupart des API que vous connaissez dans les pays occidentaux.
Voici un répertoire des API disponibles en Chine, vérifiez-le.
background-image: propriété Les Ressources d'image ne peuvent pas être obtenues via le CSS background-image: url(../../images/banner.png); . Je sais que c'est terrible, mais nous devons y faire face.
Il y a deux façons de contourner cette frustration:
Vous pouvez utiliser l' background-image: mais vous ne pouvez pas utiliser un chemin immobilier , vous devez coder votre image dans Base64, puis la transmettre à l' background-image: url(base64 image); . Voici un outil pour coder les images dans Base64.
Ou vous pouvez utiliser la balise <image> et traiter les images avec mode d'attribut <image> TAG. WeChat a 13 modes , 9 sont en mode de coupe et 4 sont en mode zoom . Voici un lien vers la documentation.
RPX signifie Pixel réactif qui est l'unité des mini-programmes WeChat. Selon la définition officielle, rpx est basé sur la largeur de l'écran adaptative.
En fait, l'unité RPX est basée sur l'unité rem qui signifie "Root EM" . Pourquoi pas l'unité em ?
L'unité em est relative à la taille de la police du parent , ce qui provoque un problème de composition . L'unité rem est relative à l'élément racine qui conterre le problème de composition (devoir de dimensionnement des polices).
Cependant, pour revenir à l'unité rpx , les avantages RPX sont:
Travaillez-vous sur un mini-programme? Contactez-nous si vous souhaitez partager votre travail, rencontrez notre équipage, demandez de l'aide!
Si vous souhaitez contribuer, vous pouvez envoyer une demande de traction ici ou nous donner un cri sur Shanghai (at) Lewagon.com pour des suggestions!
