Résumé de l'expérience de développement de mini-programmes WeChat

Cet article présente principalement les informations pertinentes sur l'expérience, le résumé et l'expérience de développement du mini-programme WeChat. Les amis dans le besoin peuvent se référer au

Résumé de l'expérience de développement du mini-programme WeChat

<.>

Avant-propos :

Récemment, un mini programme est sorti, et l'entreprise nous a également demandé de développer un mini programme.

Alors, j'ai commencé à travailler dessus pendant près d'une semaine et j'ai rencontré de nombreux problèmes. Résumons-le ici. (Principalement du point de vue d'un développeur Android, il peut être fragmenté avec quelques points de connaissances et expériences. Si vous avez des ajouts, bienvenue)

Résumé

1 : Passage de paramètres, jugement de méthode

Vous pouvez passer une méthode comme paramètre formel dans la méthode en js, mais ce n'est pas possible en java. Par exemple,

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

dans le projet de démarrage est la méthode de transmission d'un paramètre formel, cb, et il y a aussi un jugement très intelligent

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

À l'aide de la règle d'opération &&, déterminez d'abord si cb est une méthode. Le == ici peut être utilisé pour déterminer si les types sont. équivalent, puis Si le premier dans && n'est pas satisfait, le dernier ne sera pas exécuté si cb est une méthode, appelez la méthode cb et passez le paramètre userinfo du rappel de succès

Un de plus chose, if(this.globalData .userInfo) peut être utilisé comme condition pour déterminer s'il est nul, mais pas en Java.

2 : impression du journal

impression du journal, si vous imprimez directement la variable "" ce n'est pas possible, car il n'y a pas de méthode toString()

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

Il ne peut donc être imprimé que séparément

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

3 : json obtient l'objet

Pour utiliser json, vous pouvez utiliser json["key"] pour obtenir son sous-objet

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 : Définir une valeur de type booléen

Attention, si vous souhaitez définir une valeur de type booléen dans les données de la page, elle doit être isSuccess : true au lieu de isSuccess : "true"

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

Car si c'est isSucees : "true", le résultat est vrai, pas de problème, mais si c'est isSucess : "false", le résultat est toujours vrai,

Parce que isSuccess ici n'est pas un booléen, mais un type non vide Puisqu'il n'est pas vide, if est vrai

.

if, la valeur par défaut n'est pas définie, si est faux

5 : utilisez "that"

Il est recommandé de définir une variable that en dehors de la page{}, puis de l'attribuer à this dans onLoad. Cela peut être utilisé partout dans le futur, afin d'éviter certains endroits où ce n'est pas la même chose que ceci. Pas un objet contextuel pointant vers la page

<.>

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

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

6 : La méthode du cycle de vie de la page

n'est incluse que dans le paramètre des options de chargement, vous pouvez obtenir la valeur de la page, etc., le chargement ne sera exécuté qu'une seule fois
, mais onShow peut être exécuté à chaque fois que vous changez de page, vous devez donc actualiser la demande de données de page à chaque fois. Elle peut être placée dans onShow et a été testée. fondamentalement aucun impact sur l'expérience de performance
Le cycle de vie de la page n'est pas aussi riche qu'Android et il existe certaines restrictions sur le transfert de valeur entre les pages.
Vous pouvez transmettre la valeur via la méthode ordinaire de transmission de valeur d'URL, xxx?key = value, mais veuillez noter : la valeur que nous transmettons est en fait équivalente à l'épissage de la chaîne et de l'URL ensemble. . Veuillez ne pas transmettre un objet directement, car l'objet n'a pas de méthode toString.
Les étapes pour transmettre l'objet json sont :

1 Convertissez l'objet json en chaîne S'il s'agit d'un objet json, utilisez-le directement. est un objet json, vous avez besoin de parseString (json)

2. key=value

3. Lorsque vous l'obtenez, retirez-le des options de chargement,

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

puis JSON. Convertissez stringify(value) en objet json en utilisant

7 : Sauter entre les pages

Passer de la page d'accueil à une nouvelle interface. Comment notifier après la nouvelle interface. a traité la logique avec succès ou non ?

Il n'y a généralement aucun moyen de résoudre cette situation. Après test, si vous souhaitez ouvrir directement la page d'accueil depuis le navigateur depuis l'interface secondaire hors page d'accueil, cela ne fonctionnera pas et une erreur sera signalée.

Ainsi, la stratégie que nous adoptons est la suivante : une fois que l'interface secondaire a traité les données, revenez directement, puis extrayez à nouveau les données sur l'interface de la page d'accueil. Il apparaîtra donc que notre interface de requête est exécutée dans la méthode onShow. Parce que onload ne sera exécuté qu'une seule fois

8 : wxml

La balise 1.text peut utiliser bindtap

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

Vous pouvez utiliser cette méthode pour afficher l'image par défaut

3 Encore une fois, utilisez data-xx-oo ="value" dans la balise, et e.currentTarget dans l'objet correspondant obtenu. d'après dataset.xxOo, le xx-oo ici, -

échappe en fait au cas du chameau.

Ce scénario d'utilisation générale est que vous pouvez définir des données pour la vue sur laquelle vous avez cliqué ou lié l'événement. Par exemple, si vous avez 5 vues dans un sélecteur, vous pouvez lier différentes valeurs​​pour chacune. view. Obtenez la valeur correspondante lorsque l'événement est déclenché

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了

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

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!