Comment développer des mini-programmes WeChat

Cette fois, je vais vous montrer comment développer des mini-programmes WeChat et quelles sont les précautions pour développer des mini-programmes WeChat. Voici des cas pratiques, jetons un coup d'œil.

n°1 L'image d'arrière-plan n'est pas affichée

L'applet WeChat permet aux utilisateurs de personnaliser l'image d'arrière-plan, mais le chemin et l'adresse de l'image d'arrière-plan sont limités. Auparavant, il s'agissait d'utiliser un chemin relatif pour écrire et l'image d'arrière-plan est également affichée dans les outils de développement WeChat. J'ai pensé à tort qu'il n'y avait pas de problème, mais lorsque je l'ai prévisualisée, j'ai constaté que l'image d'arrière-plan n'était pas affichée. le téléphone. C'est le premier écueil introduit aujourd'hui. L'image de fond n'est pas autorisée à être des images locales.

Solution :

Tout d'abord, utilisez la méthode de conversion des images en ligne en code base64. L'avantage de cette méthode est que les images ne le sont pas. stocké localement. Ou sur le serveur, il prend moins de place et est facile à modifier. L'inconvénient est que l'effet de traitement des petites images est assez long. c'est trop long...

Deuxièmement, téléchargez la photo Allez sur le serveur et citez l'adresse de l'image, c'est pratique et rapide, mais c'est compliqué à modifier et prend du temps sur le serveur. espace.

Le pull-down n°2 ne se déclenche pas surPullDownRefresh

//下拉事件
onPullDownRefresh: function() {
 console.log("好用不?")
 wx.showToast({
  title: '没事儿别乱拉',
  icon: 'success',
  duration: 2000
 })
},
//上拉事件
onReachBottom: function() {
 wx.showToast({
  title: '没事儿别乱拽',
  icon: 'success',
  duration: 2000
 })
}

Le code ci-dessus est tout à fait correct, mais après l'avoir prévisualisé, j'ai trouvé que seul l'extraction vers le haut est utile et déroulant Il n'y a aucune réponse du tout, ce qui est déprimant. Y a-t-il quelque chose qui ne va pas avec la méthode officielle ?

En fait non, la raison est que la valeur par défaut officielle est de désactiver l'événement déroulant. Allez simplement dans le fichier app.json et modifiez les paramètres dans les fenêtres. Le code est le suivant :

"window": {
 "enablePullDownRefresh":true //开启下拉功能
}

no.3 Comment annuler la surveillance de l'API de détection de gravité

L'applet WeChat ne fournit pas d'interface API de secousse, mais elle fournit une API de détection de gravité "wx .onAccelerometerChange(CALLBACK)", nous pouvons utiliser cette méthode pour simuler la fonction de tremblement de WeChat. Le code est le suivant :

Page({
 onShow: function () {
  wx.onAccelerometerChange(function (e) {
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  
 }
})

Mais si le mini-programme doit activer la barre d'onglets, activez l'API de détection de gravité toutes les pages sous la barre d'onglets surveilleront les données de détection de gravité. En conséquence, la secousse simulée produira des résultats de secousses sur toutes les pages. Ce n'est pas ce que nous voulons obtenir. les données de détection de gravité, nous devons donc ajouter un if. En fonction du jugement de la page actuelle, activer la surveillance de l'API de détection de gravité en fonction des résultats du jugement. La modification du code est la suivante :

Page({
 isShow: false,
 onShow: function () {
  var that = this;
  this.isShow = true;
  wx.onAccelerometerChange(function (e) {
   if(!that.isShow){
    return
   }
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  this.isShow = false;
 }
})

. Après modification, recompilez l'aperçu pour obtenir l'effet souhaité.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Explication détaillée des étapes de traitement des événements de modificateur de clé Vue

Comment utiliser JS pour implémenter un hachage tableau

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!