Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to solve the problem of compatible Android and IOS data processing in Mini Program", interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn how to solve the problem of compatible Android and IOS data processing in Mini Program.

1. There are two common ways for Mini Program front end to send request to backend, one is get request, the other is POST request. First, give an example of get request.

Wx.request ({url: that.globalData.baseUrl + 'user/add',// request background interface data: {code: avatarUrl, username: nickName} header: {' content-type':'application/json',// default token: wx.getStorageSync ('token')}, method: "get" Success: function (res) {/ / console.log (res)}})

There is nothing wrong with this way of delivery. The back end will receive the data anyway, and the front end can also accept the data.

Mainly look at the second post method

Wx.request ({url: that.globalData.baseUrl + 'wx/getToken',// requests background interface data: {code: res.code}, header: {"Content-Type": "application/x-www-form-urlencoded",}, method: "POST", success: function (res) {console.log (res)) Wx.setStorageSync ('token', res.data.data)}})

In this case, the backend can accept data, but replacing "Content-Type": "application/x-www-form-urlencoded" with "content-type':'application/json', backend interface cannot receive data, but some Mini Program users can also receive data by replacing the header in the post request with" content-type':'application/json', ". But I just couldn't do it at the back end, and then I changed it to this.

two。 The back-end request is successful and the value, but the front end just can't get the data?

The main reason is that the type of request is not the same as the data type you returned to the front end. This is that you need to detect the data type in time and change it to the corresponding data type.

3. Provision headers are shown appears on the request interface.

The above phenomenon is mainly due to blocking, which mainly requires the following aspects: first, whether the breakpoint is used, if the breakpoint is not noticed, it will appear; whether the request connection in the database is too long, otherwise it will also occur. Mini Program requires high speed, so it is generally better to use the native database interface, the response speed is short, and the interface response is fast.

4. In the end, data appeared on the iPhone, but not on the Android phone.

For example, if the data returned by the backend appears as "{" code ": 1," data ":" 4f756fd91b8a81f1 "," msg ":" request successful "}", then you need to deal with it: first, determine which data type it is.

Var json = res.dataif (typeof json! = 'object') {if (json! = null) {json = json.replace ("\ ufeff", ") var ob = JSON.parse (json)}}

The character string or json object is usually transferred to json object. When it is worth passing, there are more json strings. Sometimes the returned value may appear in front of a hidden point, JSON.parse processing returned what "token has a 0", then you need to use the following processing data var aa = res.data.trim (); var bb = JSON.parse (aa); thank you, write for the first time. It used to be written in impression notes; now it's written in short books. Your advice are most welcome

Let me sum up a few pits that impressed me.

1. To answer the initial question, write a calendar by hand. Why can it be displayed in Android but not in Apple?

First of all, make sure that this is not a traversal of bug, it must be a compatibility problem, traversal is the most basic syntax, the problem must be in the traversal data processing stage, read the code sure enough, the conclusion is: ios system problems, such as newDate ("2018-08-08"), in the case of NaN in ios, ios only supports newDate ("2018-08-08").

2.video video format m3u8, can not be played in ios, but Android can play normally?

Analysis.

The official example is a file in mp4 format, which can be played by ios, and there are similar questions in the forum of WeChat Mini Programs developer platform, but there is no accurate answer. I began to consider converting the format, but the technology is not enough. Try to add custom-cache= {{cache}} to the image tag, and the problem of adding cache:false in data has been solved.

Solve

3. WeChat Mini Programs WxParse contains pictures. Android cannot load it.

Analysis.

Wxparse is a plug-in used by WeChat Mini Programs to parse the code generated by the rich text editor to show general graphics and text. On the Android phone, if the content contains the tag of the picture, the whole content cannot be loaded. Check the console on the phone and find that the Android machine reported an error when console.dir (). This is because the Android phone does not support the syntax of console.dir ().

Conclusion: this is the syntax that Android does not support console.dir (), so use console.log () instead.

4. The picture on Android will be stuttered, deformed, and then the normal picture size will be displayed.

Analysis.

Development document states: note: image components default width 300px, height 225px, development when all the small icons of image are using the mode= "widthFixed", only set the width, so that a high degree of adaptation, there will be picture loading initialization height bit 225px, load is finished to show the height of mode, because the Android machine this Catton education is obvious, there will be instantaneous deformation.

Conclusion: the image tag should be used to fix the width and height as much as possible in the future.

5.navigationBar is located on the left in Android and centered in Apple, so Apple will use it by default when the number of words in the title is too many. Instead of the rest of the text

Analysis.

This is not bug, it's just a time display problem, the current version 6.6.0 supports setting navigationStyle in the window attribute from the default style to custom, supporting custom styles. The so-called custom style is the default navigation, leaving only one capsule navigation.

Conclusion: set window {"navitionStyle": "custom"} in app.json, and then use the navigation bar to display the head in wxml,and wxss.

Be careful

Since this attribute is only supported by Wechat 6.6.0, other window properties need to be written as usual to be compatible with the lower version.

At this point, I believe you have a deeper understanding of "how to solve the problem of Mini Program compatible with Android and IOS data processing". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.