Summary of common problems in WeChat development

This article talks about common problems in WeChat development. If you don’t know about common problems in WeChat development or are interested in common problems in WeChat development, then let’s take a look at this article together. Okay, without further ado, enter Let’s get to the point

Summary of common problems in WeChat development

1. Since the wx.request() method of the mini program is asynchronous, after app.js executes ajax, each When loading the global data of app.js in pages, it cannot be loaded in order. Example:

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

Solution, use Promise asynchronous function:

//app.js
App({
  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.js
let app = getApp()
Page({
  getData: function(){;
    app.ajax().then(()=>{
      console.log(app.data); //123
    });
  }
})

2. The picture can only obtain the original width and height, but cannot obtain the existing width and height. However, the image tag encapsulates the mode attribute, which can be set according to needs.

3. There is a transparent space at the bottom of each image tag, not padding, not margin. You may get stuck when making a mask layer in front of the image.

4. Network requests must deploy https

5. When configuring tabBar, the pagePath parameter in the list parameter needs to contain at least the first path in the pages array in app.json, otherwise it will cause tabBar is not displayed.

6.TabBar cannot take parameters when jumping. Solution:

//search.js
var app = getApp();
Page({
  confirm: function(e){
    //获取数据，添加到全局
    let val = e.detail.value;
    app.searchWord = val;
    this.jump();
  },
  jump: function(){
    //跳转tabBar
    wx.switchTab({
      url: '../index/index',
    });
  },
});
  
//index.js
var app = getApp();
Page({
  onShow: function(e){
    //获取全局数据
    let val = app.searchWord;
  }
});
//需要传递参数的页面在跳转前将数据添加到app.js里。需要接受参数的页面在onShow方法接受之前添加到app.js的数据。

7. The url requested by the wx.request() method of the mini program must start with https

8 When .wx.request() uses the post method to request, you also need to add a 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 the html tag, and data rendering cannot render the wxml tag (< ;/view>, etc.), 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 of blank space). Android's wx.request parsing does not skip the BOM header, causing the data to be returned as a string instead of an object or array.

Example:

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

The parsed data is: '{a: 1, b:2}' (string), not {a:1, b:2} (object)

Because it is not an object, template rendering and the like will not work properly. The solution is to remove the BOM header before returning data in the background. If the BOM header is not removed in the background, it can be removed on the front end. However, if the dataType of wx.request is default, it will default to json and be automatically parsed, making it impossible to remove the BOM header.

Solution:

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

Change the dataType to a format other than json to prevent the applet from automatically parsing the json string, and then use trim( ) method to remove the blanks and finally parse the json string.

11. Multi-line omission (-webkit-line-clamp) is normal during debugging, but invalid when publishing.

Solution: If you don’t want to re-audit, just let the background truncate

12. There is a limit to the length of a single setData: 1048576

appservice:16 invokeWebviewMethod data transmission The length is 2432088 and has exceeded the maximum length of 1048576

It is easy to happen when using rich text, especially when the image is base64 and the pixels are very large

The above is all of this article If you don’t know much about the content, you can easily master it by implementing more of both sides!

Related recommendations:
WeChat development Token verification failure solution

WeChat development obtains JSAPI Example sharing of TICKET

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