A summary of problems that arise during the development of WeChat mini programs

This article mainly introduces relevant information on the summary of problems encountered in the development of WeChat mini programs. Friends in need can refer to the following

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, when each page loads the global data of app.js, 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 Height, 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. The url requested by the wx.request() method of the mini program must be https starts with

8.wx.request(). When requesting using the post method, 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, and then Use the trim() method to remove blank spaces 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!

The above is the detailed content of A summary of problems that arise during the development of WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!