Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "developing WeChat Mini Programs case Analysis". The editor shows you the operation process through the actual case, and the operation method is simple, fast and practical. I hope this article "Development WeChat Mini Programs case Analysis" can help you solve the problem.

Summary

1: pass parameters, method judgment

A method can be passed as a formal parameter in a method in js, but not in java. Such as in the start project

GetUserInfo:function (cb) {var that = this if (this.globalData.userInfo) {typeof cb = = "function" & & cb (this.globalData.userInfo)} else {/ / call login interface wx.login ({success: function () {wx.getUserInfo ({success: function (res) {that.globalData.userInfo = res.userInfo typeof cb = = "function" & & cb (that.globalData.userInfo)})}})}}

Here is the method of passing a parameter, cb, and there is also a very clever method of judgment.

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

Using the operation law of & &, first determine whether cb is a method, where = = can be used as a judgment of whether the type is quite or not, and then if the former is not satisfied, the latter will not be executed; if cb is a method, call the cb method and pass in the userinfo parameter of the successful callback of success

Also, if (this.globalData.userInfo) can be used as a condition to judge whether it is null or not, but not in java.

2:log printing

Log printing, if you directly print "" + variable is not allowed, because people do not have toString () method

X console.log ("info" + info)

So we can only print separately.

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

3: json fetch object

With the use of json, you can fetch its child objects through json ["key"]

Person: {name: "jafir", age: "11",} var name = person ["name"]; var age = person ["age"]; info: {persons: [{name: "123", age:11}, {name: "jafir1", age:12}]} / / if an array gets console.log (that.data.info ["persons"] [1] .name) console.log (that.data.info ["persons"] [1] .age) by this method

4: define the boolean type value

Note that if you want to define a value of type boolean in the data of 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 the isSuccess here is not boolean, but a non-empty type, since it is not empty, if is true

If, the default 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 everywhere in the future, so as to avoid some places where this is not a context object that points to page.

/ / context object var that;page ({onLoad: function (options) {/ / parameters brought by page initialization options for page jump that = this;}... that.setData ({xxx: xxx,}))

Life cycle approach of 6:page

Only onload has the parameter options, you can get page values, and so on. Onload will only execute it once.

However, onShow can be executed every time the page is switched, so the data request for each refresh page can be placed in onShow. After testing, the performance experience is basically unaffected.

The life cycle of page is not as rich as Android, and there are certain restrictions on passing values between pages.

You can pass a value by ordinary url, xxx?key = value, but note: the value we pass is actually equivalent to a string concatenated with url, 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. Change the json object into a string. If it is, use it directly. If it is a json object, you need parseString (json).

two。 Parameter splicing with url? Key=value

3. Take it out in the options of onload when you get it.

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

Then JSON.stringify (value) is converted to json object use

7: jump between pages

Jump from the home page to a new interface how to inform the home page of the result after dealing with the success of the logic?

Generally speaking, there is no way to solve this kind of situation. After testing, if you want to navigator the home page directly from the second-level non-home page interface, it will not work and will report an error.

Therefore, our strategy is: after the secondary interface has finished processing the data, go back directly, and then pull the data again in the home page interface. So it will appear that our request interface is executed in the onShow method. Because onload only executes once.

8:wxml

1.text tags can use bindtap

You can use this way to display the default picture

3. Again, using data-xx-oo = "value" in the tag can be obtained through e.currentTarget.dataset.xxOo in the corresponding object, where the xx-oo-actually escapes the hump. In this general usage scenario, you can set a data for the view of the event you click or bind. For example, if you have five view in a picker, you can bind a different value for each view and get the corresponding value when the event is triggered.

4. If you want to show and hide view, you can use wx:if= "true/false" to deal with it, but in this way, if the view is not rendered for false,page, its location space will not be reserved, if the view below will be arranged up. If you want to keep its location space, you can modify its style style to solve the problem.

9: unify the results of network request processing

You can encapsulate the returned result of the network request and handle it uniformly.

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: start requesting interface [' + paramsData.url +']') / / start network request wx.request ({url: paramsData.url, data: paramsData.data, method: paramsData.method, success: function (res) {console.log ('requestInternal: API request succeeded [' + paramsData.url +']'); paramsData.success (res);}, fail: function (res) {console.log ('requestInternal: API request failed [' + paramsData.url +']'); console.log (res) / Unified processing wx.showToast ({title: 'network access failure', duration: 1500}) typeof paramsData.fail = = "function" & & paramsData.fail (res);}, complete: function (res) {/ / Unified processing completed here typeof paramsData.complete = = "function" & & paramsData.complete (res);}})

In this way, when using the request, you can directly wx.request ({}) so that IDE can generate the corresponding request format for your association, and then directly replace "wx.request" with "requestWithGet" or "requestWithPost" to OK.

This is the end of the content of "developing WeChat Mini Programs case Analysis". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.