Summary of WeChat mini program development experience

This article mainly introduces the relevant information of WeChat mini program development experience, summary and development experience. Friends in need can refer to

WeChat mini program development experience compilation

Foreword:

Recently, the mini program came out, and the company also asked us to develop a mini program.

So, I started working on it. I worked on it for almost a week and encountered many problems. Let’s summarize it here. (This is mainly told from the perspective of an Android developer. It may be fragmented with some knowledge points and experiences. If you have any additions, welcome)

Summary

1: Parameter passing, method judgment

You can pass a method as a formal parameter in a method in js, but this is not possible in java. For example,

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

in the start project is the method of passing a formal parameter, cb, and there is also a very clever judgment method

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

Using the operation rule of &&, first determine whether cb is a method. The == here can be used to determine whether the types are equivalent. Then in &&, if the previous is not satisfied, the following will not be executed; if cb is a method, call the cb method, and pass in the userinfo parameter of the success callback

One more thing, if(this.globalData.userInfo) can As a judgment condition for whether it is null, it is not possible in Java.

2: Log printing

For log printing, it is not possible to print ""+variable directly, because there is no toString() method

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

So it can only be printed separately

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

3: json gets the object

json For use, you can use json["key"] to get its sub-object

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: Define a boolean type value

It should be noted that if you want to define a boolean type value in the data of the page, it must be isSuccess: true instead of isSuccess: "true"

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

Because if it is isSucees: "true", the result is true, no problem, but if it is isSucess: "false", the result is still true,

Because here isSuccess It is not boolean, but a non-empty type. Since it is not empty, if is true

If, the default is undefined, if is false

5: Use "that"

It is recommended to define a that variable outside page{}, and then assign it to this in onLoad. That can be used in all places in the future, so as to avoid some places where this does not point to the context object of the page

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

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

#6: Page life cycle method

1. Only there are options parameter in onload, which can get the page value and so on. onload will only be executed once

2. but onShow can be executed every time the page is switched. Therefore, data requests that need to refresh the page every time can be placed in onShow. Tested and performance experience Basically no impact

3. #The life cycle of page is not as rich as Android, and there are certain restrictions on value transfer between pages.

4. You can pass the value through the ordinary URL value transmission method, xxx?key = value, but please note: the value we pass is actually equivalent to splicing the string and the URL together. Please do not pass an object directly, because the object does not have a toString method.

The steps to pass the json object are:

1. Convert the json object into a string. If it is a string, use it directly. If it is a json object, parseString is required. (json)

2. Splice parameters with url? key=value

3. When obtaining, take it out from the onload options,

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

and then JSON.stringify( value) into a json object using

7: Jump between pages

Jump from the home page to a new interface. How to notify the home page of the result after the new interface has processed the logic successfully or not? ?
There is generally no way to solve this situation. After testing, if you want to directly open the home page from the navigator from the secondary non-home page interface, it will not work and an error will be reported.

So, the strategy we adopt is: after the secondary interface has processed the data, return directly, and then re-pull the data on the home page interface. So it will appear that our request interface is executed in the onShow method. Because onload will only be executed once

8: wxml

1.text tag can use bindtap

##

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

You can use this method to display the default picture

3. Again, use data-xx-oo = "value" in the tag, and e.currentTarget.dataset in the corresponding object. xxOo is obtained. The xx-oo and -

here actually escape the camel case. This general usage scenario is that you can set a data for the view you clicked or bound the event. For example, if you have 5 views in a picker, you can bind different values ​​​​for each view. Get the corresponding value when the event is triggered

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了

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

The above is the detailed content of Summary of WeChat mini program development experience. For more information, please follow other related articles on the PHP Chinese website!