Développement de programmes WeChat.Introduction aux petits programmes

Table des matières

1. Cycle de vie

1. Le cycle de vie de l'applet enregistrée : 

 2. Cycle de vie de la page d'inscription

  Diagramme du cycle de vie :

 2. Routage des pages

1. Pile de pages

2. Méthode de routage

 3. wxml

 1. Rendu de liste

 2. Rendu conditionnel

4.balise d'image

5. zone mobile et vue mobile

---

1. Cycle de vie

1. Cycle de vie du mini-programme d'inscription : 

app.js :

// app.js 
App({ 
  onLaunch() { 
    // Afficher les capacités de stockage locales 
    const logs = wx.getStorageSync('logs') || [] 
    logs.unshift(Date.now()) 
    wx.setStorageSync('logs' , logs) 

    // Connectez-vous 
    wx.login({ 
      success: res => { 
        // Envoie res.code en arrière-plan en échange de openId, sessionKey, unionId 
      } 
    }) 
  }, 
  onShow (options) { 
    // Faire quelque chose quand show. 
    console. log("display") 
  }, 
  onHide () { 
    // Faire quelque chose quand hide. 
    console.log("hide") 
  }, 
  onError (msg) { 
    console.log(msg) 
  }, 
  globalData : {
    Infoutilisateur : null  
  }
})

 

 2. Cycle de vie de la page d'inscription

index.js :

 

// index.js 
// Récupère l'instance d'application 
const app = getApp() 
//var est une variable globale 
//let est une variable locale 
//const définit la constante 
Page({ 
  data: { 
    devise: 'Hello World', 
    userInfo : { }, 
    hasUserInfo : false, 
    canIUse : wx.canIUse('button.open-type.getUserInfo'), 
    canIUseGetUserProfile : false, 
    canIUseOpenData : wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse ('open -data.type.userNickName') // Si vous souhaitez essayer d'obtenir des informations sur l'utilisateur, remplacez-les par false 
  }, 
  onLoad() { 
    if (wx.getUserProfile) { 
      this.setData({ 
        canIUseGetUserProfile: true 
      }) 
    } 
  }, 
  onLoad : fonction (options) {
    // Exécute console.log("onLoad") 
    lorsque la page est créée 
  }, 
  onShow : function() { // Exécute 
    console.log("onShow") 
    lorsque la page apparaît au premier plan 
  }, 
  onReady : function() { 
    // La première fois que la page exécute 
    console.log("onReady") 
  }, 
  onHide: function() { // Exécute 
    console.log("onHide") 
    lorsque la page passe du premier plan à l'arrière-plan 
  } , 
  onUnload : function() { 
    // Page détruite Exécuter 
    console.log("onUnload") 
  } 
})

  Diagramme du cycle de vie :

 2. Routage des pages

Le routage de toutes les pages du mini programme est géré par le framework.

1. Pile de pages

Le framework conserve toutes les pages actuelles sous la forme d'une pile. Lorsqu'un changement de routage se produit, la pile de pages se comporte comme suit : 

méthode de routage	Performances de la pile de pages
initialisation	Nouvelle page poussée dans la pile
Ouvrir une nouvelle page	Nouvelle page poussée dans la pile
redirection de page	La page actuelle est sortie de la pile et la nouvelle page est poussée dans la pile.
Retour de page	La page continue de sortir de la pile jusqu'à ce que la cible revienne à la page
Commutateur d'onglet	Toutes les pages sont extraites de la pile, ne laissant que la nouvelle page à onglet.
Recharger	Toutes les pages sont extraites de la pile, ne laissant que de nouvelles pages.

Les développeurs peuvent utiliser  getCurrentPages() des fonctions pour obtenir la pile de pages actuelle.

2. Méthode de routage

La méthode de déclenchement du routage et les fonctions de cycle de vie des pages sont les suivantes :

méthode de routage	timing de déclenchement	page de pré-routage	Page post-routage
initialisation	La première page ouverte par le mini programme		en chargement, en affichage
Ouvrir une nouvelle page	Appelez l'API  wx.navigateTo à l'aide du composant  <navigator open-type="navigateTo"/>	surMasquer	en chargement, en affichage
redirection de page	Appelez l'API  wx.redirectTo à l'aide du composant  <navigator open-type="redirectTo"/>	onDécharger	en chargement, en affichage
Retour de page	Appelez l'API  wx.navigateBack à l'aide du composant <navigator open-type="navigateBack"> L'utilisateur appuie sur le bouton de retour dans le coin supérieur gauche	onDécharger	surAfficher
Commutateur d'onglet	Appelez l'API  wx.switchTab pour utiliser le composant  <navigator open-type="switchTab"/> pour changer d'onglet.		Veuillez vous référer au tableau ci-dessous pour diverses situations
Redémarrage	Appelez l'API  wx.reLaunch à l'aide du composant  <navigator open-type="reLaunch"/>	onDécharger	en chargement, en affichage

 Fichier index.wxml :

<!--index.wxml--> 
<view class="container"> 
  <!-- la vue est équivalente à div--> 
  <!-- le texte est une vue en ligne--> 

  <text>{ 
   
   {devise} ​​} </text> 
  <navigator url="/pages/logs/logs" open-type="redirect">Cliquez sur moi pour accéder à la page d'accueil</navigator> 

</view>

 3. wxml

 1. Rendu de liste

Défini dans index.js :

 

  Traversée dans le fichier index.wxml : Dans la carte, i est la clé, e est la valeur, wx:key="*this" est l'identifiant, s'il n'est pas ajouté, une erreur sera signalée

<!--index.wxml--> 
<view class="container"> 
  <!-- la vue est équivalente à div--> 
  <!-- le texte est une vue en ligne--> 

  <text>{ 
   
   {devise} ​​} </text> 
  <navigator url="/pages/logs/logs" open-type="redirect">Cliquez sur moi pour accéder à la page d'accueil</navigator> 
<view wx:for="{ 
   
   {cities}}" wx : for-item="e" wx:for-index="i" wx:key="*this"> 
{ 
   
   {e}}-{
    
   {i}} 
</view> 
</view>

 

 

 2. Rendu conditionnel

 Fichier index.wxml :

<view wx:if="false">Bonjour</view>

Cela sera considéré comme vrai ici, car faux n'est qu'un littéral. Tout le texte en js, à l'exception des caractères vides, est vrai 

 

  L'expression correcte est :

  <view wx:if="{ {false}}">Bonjour</view>

 

4.balise d'image

Créez un nouveau répertoire pour mettre les images :

Fichier index.wxml :

<image src="/asset/1.png"></image>

 

 

5. zone mobile et vue mobile

 Fichier index.wxml :

<movable-area style="largeur:300px;hauteur:300px;background:jaune"> 
  <movable-view direction="all"> 
    <image src="/asset/1.png" style="width:100px;height :100px"></image> 
  </movable-view> 
</movable-area>

 

00. Une mini-page de programme se compose de quatre fichiers, qui sont :
  xxx     
    xxx.js Logique de la page
    xxx.json Configuration
    de la page xxx.wxml Structure
    de la page xxx.wxss Style de la page

01. Le cadre du mini-programme est composé
   de mini-programmes. Enregistrez un mini-programme via App() et enregistrez une page via Page()
   1. Couche logique
     1. Enregistrez le mini-programme
     2. Enregistrez la page
     3. Cycle de vie de la page
     4. Routage des pages
     5. Modularité
     6. API
   2. Couche de vue
     1.
     wxml 2. wxss
     3. wxs
       wxs est le langage de script de l'applet WeChat elle-même, utilisé pour le filtrage et le calcul. wxs peut être défini via des balises de fichier ou de module. Le fichier nécessite le suffixe .wxs. Le fichier
       wxs est spécialement utilisé pour les pages wxml. Si vous devez utiliser des scripts js dans la page, vous pouvez l'utiliser, mais wxs ne peut pas être référencé par d'autres js. fichiers
       . Le développement devrait choisir d'utiliser js ou wxs selon la situation, mais la plupart de mon développement se fait en js