Zusammenfassung der Erfahrungen bei der Entwicklung von WeChat-Miniprogrammen

In diesem Artikel werden hauptsächlich relevante Informationen zur Entwicklungserfahrung, Zusammenfassung und Entwicklungserfahrung von WeChat-Miniprogrammen vorgestellt

Zusammenfassung der Entwicklungserfahrungen von WeChat-Miniprogrammen

Vorwort:

Kürzlich kam ein Miniprogramm heraus, und das Unternehmen hat uns auch gebeten, ein Miniprogramm zu entwickeln.

Also habe ich fast eine Woche lang daran gearbeitet und bin auf viele Probleme gestoßen. (Vor allem aus der Sicht eines Android-Entwicklers kann es mit einigen Wissenspunkten und Erfahrungen fragmentiert sein. Wenn Sie Ergänzungen haben, sind wir willkommen)

Zusammenfassung

1 : Parameterübergabe, Methodenbeurteilung

Sie können eine Methode als formalen Parameter in der Methode in js übergeben, in Java ist dies jedoch nicht möglich. Beispielsweise ist

getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
  typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
  //调用登录接口
  wx.login({
   success: function () {
    wx.getUserInfo({
     success: function (res) {
      that.globalData.userInfo = res.userInfo
      typeof cb == "function" && cb(that.globalData.userInfo)
     }
    })
   }
  })
 }
},

im Startprojekt die Methode zum Übergeben eines formalen Parameters, cb, und es gibt auch ein sehr kluges Urteil Methode.

typeof cb == "function" && cb(that.globalData.userInfo)

Bestimmen Sie zunächst, ob cb eine Methode ist, um zu bestimmen, ob es sich um eine Methode handelt Äquivalent, und wenn die erste in && nicht erfüllt ist, wird die spätere nicht ausgeführt. Wenn cb eine Methode ist, rufen Sie die cb-Methode auf und übergeben Sie den userinfo-Parameter des Erfolgsrückrufs

Noch einer Ding, if(this.globalData .userInfo) kann als Bedingung verwendet werden, um zu bestimmen, ob es null ist, aber nicht in Java.

2: Protokolldruck

Protokolldruck, es ist nicht möglich, „“ + Variable direkt zu drucken, da es keine toString()-Methode

X console.log("info"+info);

Es kann also nur separat gedruckt werden

console.log("info");
console.log(info);

3: json erhält das Objekt

Um JSON zu verwenden, können Sie json["key"] verwenden, um sein Unterobjekt

person: {
   name: "jafir",
   age: "11",
}
var name = person["name"];
var age = person["age"];

info: {persons:[{name:"123",age:11},{name:"jafir1",age:12}]}
//如果有数组 通过这种方法获取
 console.log(that.data.info["persons"][1].name)
 console.log(that.data.info["persons"][1].age)

4: Booleschen Typwert definieren

Bitte beachten Sie, dass, wenn Sie einen booleschen Typwert in den Daten der Seite definieren möchten, dieser isSuccess: true statt sein muss isSuccess: „true“

if (this.data.isSccess) {
   console.log("true")
  } else {
   console.log("false")
  }

Denn wenn es isSucees: „true“ ist, ist das Ergebnis wahr, kein Problem, aber wenn es isSucess ist: „false“, das Ergebnis ist immer noch wahr,

Weil isSuccess hier kein boolescher Typ ist, sondern ein nicht leerer Typ, da es nicht leer ist, wenn es wahr ist

If, der Standardwert ist undefiniert, if ist false

5: Verwenden Sie „that“

Es wird empfohlen, eine Variable außerhalb von page{} zu definieren und sie dieser dann in onLoad zuzuweisen . Das kann in Zukunft an allen Stellen verwendet werden, um einige Stellen zu vermeiden. Es verweist nicht auf das Kontextobjekt der Seite

//上下文对象
var that;
page({
 onLoad: function (options) {
  // 页面初始化 options为页面跳转所带来的参数
  that = this;
 }

...
that.setData({
    xxx: xxx,
   })
})

6: Die Lebenszyklusmethode der Seite

ist nur in Onload Es gibt Optionsparameter, Sie können den Seitenwert usw. abrufen, Onload wird nur einmal ausgeführt
onShow kann jedoch jedes Mal ausgeführt werden, wenn Sie die Seite wechseln. Daher müssen Sie die Seitendatenanforderung jedes Mal aktualisieren. Nach dem Testen gibt es grundsätzlich keine Auswirkungen auf die Seite Leistungserlebnis
Der Lebenszyklus einer Seite ist nicht so umfangreich wie bei Android und es gibt bestimmte Einschränkungen bei der Wertübertragung zwischen Seiten.
Sie können den Wert über die gewöhnliche URL-Wertübergabemethode xxx?key = value übergeben, aber bitte beachten Sie: Der von uns übergebene Wert entspricht tatsächlich dem Zusammenfügen von Zeichenfolge und URL . Bitte übergeben Sie ein Objekt nicht direkt, da das Objekt keine toString-Methode hat.
Die Schritte zum Übergeben des JSON-Objekts sind:

1. Konvertieren Sie das JSON-Objekt in einen String. Wenn es sich um ein JSON-Objekt handelt, verwenden Sie es direkt ist ein JSON-Objekt, Sie benötigen parseString (json)

2. Schlüssel=Wert

3. Wenn Sie es erhalten, entfernen Sie es aus den Onload-Optionen,

onLoad: function (options) {
var value= options.key
}

und dann JSON. Konvertieren Sie stringify(value) in ein JSON-Objekt mit

7: Zwischen Seiten springen

So benachrichtigen Sie nach der neuen Schnittstelle Wurde die Logik erfolgreich verarbeitet oder nicht?

Im Allgemeinen gibt es keine Möglichkeit, diese Situation zu lösen. Wenn Sie nach dem Testen die Homepage direkt über den Navigator über die sekundäre Nicht-Homepage-Schnittstelle öffnen möchten, funktioniert dies nicht und es wird ein Fehler gemeldet.

Daher verfolgen wir die folgende Strategie: Nachdem die sekundäre Schnittstelle die Daten verarbeitet hat, kehren Sie direkt zurück und rufen die Daten dann erneut auf der Homepage-Schnittstelle ab. Es scheint also, dass unsere Anforderungsschnittstelle in der onShow-Methode ausgeführt wird. Da Onload nur einmal ausgeführt wird

8: wxml

1.text-Tag kann bindtap

<image src="{{logoUrl?logoUrl:&#39;../../img/paihao.png&#39;}}"></image>

verwenden

Sie können diese Methode verwenden, um das Standardbild anzuzeigen

3. Verwenden Sie erneut data-xx-oo = „value“ im Tag und e.currentTarget im entsprechenden Objekt aus dataset.xxOo, dem xx-oo hier, -

entgeht tatsächlich dem Kamelfall.

Dieses allgemeine Verwendungsszenario besteht darin, dass Sie Daten für die Ansicht festlegen können, auf die Sie geklickt haben, oder das Ereignis binden können. Wenn Sie beispielsweise 5 Ansichten in einer Auswahl haben, können Sie für jede unterschiedliche Werte binden Ansicht. Erhalten Sie den entsprechenden Wert, wenn das Ereignis ausgelöst wird

4.如果你想要显隐view你可以通过wx:if="true/false"来处理，但是这样的话，如果为false，page不会去渲染这个view,它所在的位置空间也不会预留，假如下面的view就会往上排。如果想要留存它的位置空间，可以修改其style样式来解决

style="visibility:{{isShow?'visible':'hidden'}}"

9:统一网络请求处理结果

你可以封装一下网络请求的返回结果，做统一处理

requestWithGet: function(paramsData) {
 data.method = 'GET'
 this.requestInternal(paramsData)
},
requestWithPost: function(paramsData) {
 data.method = 'POST'
 this.requestInternal(paramsData)
},
requestInternal: function (paramsData) {
 var that = this;
 console.log('requestInternal: 开始请求接口[' + paramsData.url + ']');
 //开始网络请求
 wx.request({
  url: paramsData.url,
  data: paramsData.data,
  method: paramsData.method,
  success: function (res) {
   console.log('requestInternal: 接口请求成功[' + paramsData.url + ']');
   paramsData.success(res);
  },
  fail: function (res) {
   console.log('requestInternal: 接口请求失败[' + paramsData.url + ']');
   console.log(res);
   ////在这里做请求失败的统一处理
   wx.showToast({
    title: '网络访问失败',
    duration: 1500
   })
   typeof paramsData.fail == "function" && paramsData.fail(res);
  },
  complete: function (res) {
//在这里做完成的统一处理
   typeof paramsData.complete == "function" && paramsData.complete(res);
  }
 })
}

这样在使用请求的时候，可以直接先wx.request({}) 这样，就可以IDE给你联想生成对应的请求格式，然后直接把“wx.request” 替换 “requestWithGet”或者“requestWithPost”就OK了

 感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

Das obige ist der detaillierte Inhalt vonZusammenfassung der Erfahrungen bei der Entwicklung von WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!