So entwickeln Sie WeChat-Miniprogramme

Dieses Mal zeige ich Ihnen, wie Sie WeChat-Miniprogramme entwickeln und welche Vorsichtsmaßnahmen für die Entwicklung von WeChat-Miniprogrammen gelten. Hier sind praktische Fälle, werfen wir einen Blick darauf.

Nr.1 Das Hintergrundbild wird nicht angezeigt

Mit dem WeChat-Applet können Benutzer das Hintergrundbild anpassen, der Pfad und die Adresse des Hintergrundbilds sind jedoch begrenzt. Zuvor wurde zum Schreiben ein relativer Pfad verwendet, und das Hintergrundbild wird auch in den WeChat-Entwicklertools angezeigt. Ich dachte fälschlicherweise, dass es kein Problem gibt, aber als ich es in der Vorschau betrachtete, stellte ich fest, dass das Hintergrundbild nicht angezeigt wurde Das Telefon ist der erste Fallstrick, der heute eingeführt wird. Das Hintergrundbild darf kein lokales Bild sein.

Lösung:

Verwenden Sie zunächst die Online-Bildkonvertierungsmethode in Base64-Code. Der Vorteil dieser Methode besteht darin, dass das Bild nicht lokal gespeichert wird .Oder auf dem Server nimmt es weniger Platz ein und ist leicht zu ändern. Der Code für große Bilder ist ziemlich lang zu lang...

Zweitens laden Sie das Bild hoch Gehen Sie zum Server und geben Sie die Bildadresse an. Das ist bequem und schnell, aber es ist mühsam zu ändern und nimmt Serverplatz in Anspruch.

Nr.2 Pulldown löst bei PullDownRefresh nicht aus

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

Der obige Code ist völlig in Ordnung, aber nach der Vorschau habe ich festgestellt, dass nur Pulldown nützlich ist. und Pulldown funktioniert überhaupt nicht. Die Reaktion ist deprimierend. Stimmt etwas mit der offiziellen Methode nicht?

Nein, der Grund dafür ist, dass die offizielle Standardeinstellung darin besteht, das Dropdown-Ereignis zu deaktivieren. Gehen Sie einfach zur Datei app.json und ändern Sie die Parameter in den Fenstern.

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

nein .3 So brechen Sie die Überwachung der Schwerkrafterfassungs-API ab

Das WeChat-Applet bietet keine Shake-API-Schnittstelle, aber eine Schwerkrafterfassungs-API „wx .onAccelerometerChange(CALLBACK)“, wir können diese Methode verwenden, um die WeChat-Shake-Funktion zu simulieren. Der Code lautet wie folgt:

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(){
  
 }
})

Wenn das Miniprogramm jedoch die Tableiste aktivieren muss, wird die Schwerkrafterkennungs-API aktiviert Alle Seiten unter der Registerkartenleiste überwachen die Schwerkrafterfassungsdaten, was zu einer simulierten Erschütterung führt. Das Ergebnis der Erschütterung wird auf allen Seiten angezeigt. Dies ist nicht das, was wir wollen. Wir möchten nur einer der Seiten unter der Registerkartenleiste erlauben, die Schwerkrafterfassung zu erhalten Dann müssen wir eine Überprüfung hinzufügen, ob sie sich auf der aktuellen Seite befindet, die Überwachung der Schwerkrafterfassungs-API basierend auf dem Beurteilungsergebnis aktivieren und den Code wie folgt ändern:

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;
 }
})

Nach der Änderung neu kompilieren und eine Vorschau anzeigen um den gewünschten Effekt zu erzielen.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Verarbeitungsschritte für Vue-Schlüsselmodifikatorereignisse

Wie man JS zum Implementieren eines Hashs verwendet Tabelle

Das obige ist der detaillierte Inhalt vonSo entwickeln Sie WeChat-Miniprogramme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!