Summary of problems encountered in WeChat applet development

This article mainly introduces the summary of problems encountered in the development of small programs. For more information, see Summary of problems encountered during applet development

1. since the wx. request () method of the applet is asynchronous, it is impossible to load the global data of app. js on different pages after app. js executes ajax. Example:

//app.jsApp({  ajax:function(){    let that = this;    wx.request({      url: 'https://a.com/url.php',      method: 'GET',      success: function(e){        that.data = 123;      }    })  };})//content.jslet app = getApp()Page({  getData: function(){;    app.ajax();    console.log(app.data); //undefined  }})

Solution: Use the Promise asynchronous function:

//app.jsApp({  ajax:function(){    let that = this;    let promise = new Promise(function(resolve, reject){      wx.request({        url: 'https://a.com/url.php',        method: 'GET',        success: function(e){          that.data = 123;          resolve();        }      })    });  };})//content.jslet app = getApp()Page({  getData: function(){;    app.ajax().then(()=>{      console.log(app.data); //123    });  }})

2. images can only obtain the original width and height, but cannot obtain the existing width and height. However, the image tag encapsulates the mode attribute and can be set as needed.

3. there is a transparent interval at the bottom of each image tag, which is not padding or margin. The mask layer may be pitted before the image.

4. https must be deployed for network requests.

5. when tabBar is configured, the pagePath parameter in the list parameter must contain at least the first path in the pages array in app. json; otherwise, the tabBar will not be displayed.

6. parameters cannot be included during tabBar jump. solution:

// Search. jsvar app = getApp (); Page ({confirm: function (e) {// Obtain data and add it to global let val = e. detail. value; app. searchWord = val; this. jump () ;}, jump: function () {// jump to tabBar wx. switchTab ({url :'.. /index/Index',}) ;},}); // index. jsvar app = getApp (); Page ({onShow: function (e) {// Obtain global data let val = app. searchWord ;}}); // The page for passing parameters add data to the app before the jump. js. Pages that require parameters are added to app. js before the onShow method is accepted.

7. the request url of the applet wx. request () must start with https.

8. when wx. request () uses the post method for a request, you must add the header. the header [content-type] value is application/x-www-form-urlencoded. Example:

wx.request({  url: 'https://a.com/url.php',  data: {message: 123},  method: 'POST',  header: {    'content-type': 'application/x-www-form-urlencoded'  },  success: function(e){    console.log(e)  }});

9. the applet cannot load html tags, and data rendering cannot render wxml tags ( ). You can use wxParse. js to process related data.

10. Android cannot render the data requested by wx. request.

Check whether the returned data has a BOM header (3 characters blank ). Android wx. request parsing does not skip the BOM header, resulting in the returned data being a string rather than an object or array.

Example:

The returned data is: (3 characters blank) {a: 1, B: 2}

The parsed data is: '{a: 1, B: 2}' (string), instead of {a: 1, B: 2} (object)

Since it is not an object, template rendering and so on won't work properly. Solution: remove the BOM header before the data is returned in the background. If the BOM header is not removed from the background, the header can be removed from the front end. However, if the wx. request dataType defaults to json and is automatically parsed, the BOM header cannot be removed.

Solution:

wx.request({  url: url,  method: 'GET',  dataType: 'txt',  success: function(e){    let json = e.data.trim();    let arr = JSON.parse(json);  }});

YPE is changed to a format other than json to prevent the applet from automatically parsing the json string. Then, use the trim () method to remove the white space and parse the json string.

11. multi-line omitting (-webkit-line-clamp) is normal during debugging, while multi-line omitting during publishing is invalid.

Solution: If you do not want to review it, just remove it from the background.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more Summary of problems encountered in small program development, please pay attention to the PHP Chinese network!