Summary of problems encountered during development of WeChat mini programs

Summary of problems encountered in the development of WeChat mini programs

1. Since the wx.request() method of the mini program is asynchronous, after app.js executes ajax, each page is loaded The global data of app.js 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. Only the original width and height of the image can be obtained, and the existing width and height cannot be obtained. 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. Mini program requested by wx.request() method The url must start with https

8.wx.request() When using 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 html tags, and data rendering cannot render wxml tags (, 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 avoid the applet automatically parsing the json string , then use the trim() method to remove the blanks from the returned data, 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-review, just let the background truncate

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more related articles on the summary of problems encountered in the development of WeChat mini programs, please pay attention to the PHP Chinese website!