Have done a year of small program, during the encounter a lot of problems, here is a summary, the following listed problems do not know whether wechat to solve. I’m just trying to keep a simple record here.

Bug that triggers onshow after viewing pictures and selecting pictures

The solution is as follows: 1. Define a variable in data or global

data: {
    notShow: false
}
Copy the code

2. Add the following code to the top of the onshow event. If notShow is true, return directly without triggering the other code in the onshow event.

onShow() {
    if (this.notShow) {
        this.setData({ notShow: false });
        return; }}Copy the code

3. Insert the following code before the wx.previewImage or wx.chooseImage event call so that when the onShow event is executed, it pops up without firing any other code

this.setData({ notShow: true})
Copy the code

Two, wechat upload threads broke nine limits

Most of the time, we use Promise. All to upload directly, wechat can only send 9 requests at a time, so the maximum number of uploaded pictures can be 9. The promise.all method runs multiple Promise objects at the same time, and the idea behind this is sequential requests.

1. To execute the next request in sequence after one request is completed, define the method as follows:

// Sequential processing
sequenceTasks(tasks) {
    function recordValue(results, value) {
        results.push(value);
        return results;
    }
    var pushValue = recordValue.bind(null[]);return tasks.reduce(function (promise, task) {
        return promise.then(task).then(pushValue);
    }, Promise.resolve());
}
Copy the code

2. Then define the method of uploading pictures, and make each uploaded picture into a promise form:

/ / picture promise
uploadImage(file) {
    return function() {
        return new Promise((resolve, reject) = > {
            wx.uploadFile({
                // Image server
                url: uploadFileServerApi,
                filePath: file,
                success (res) {
                    resolve({
                        name: res.name,
                        path: res.path }); }, fail (err) { reject(err) } }) }); }}Copy the code

3. Add the following code to the place where the image needs to be uploaded.

// Image upload method
let promiseArr = [];
// Program each image path in the promise form
for (let i = 0; i < len; i++) {
    let promise = this.uploadImage(imageList[i]);
    promiseArr.push(promise)
}
sequenceTasks(promiseArr).then((result) = > {
   / / processing result
})
Copy the code

B: I’m bindInput

In the applet, there is a bindInput method, which is triggered when the input field changes, and usually defines a method on the side to put the input text into data:

bindInput(e){
    this.setData({ textContent: e.detail.value })
}
Copy the code

In the small program, frequent setData will cause a lag. If you use bindBlur to go to setData when you lose focus, there is no need to frequent setData to cause a lag.

Iv. The problem of “The data transmission length of invokeWebviewMethod is XXX, which has exceeded the maximum length of 1048576” has been solved

Pull up load data, keep pushing data into data, and then you get an error.

data:{
    list: []}Copy the code

You can use a subset list that contains a lot of subarrays

function safeRender(res) {
    let d = {}
    let l = `list[${pageIndex}] `
    d[l] = res
    this.setData(d)
}
Copy the code

WXML is as follows:

<view wx:for="{{list}}" wx:for-index="index">
  <view class="content" wx:for="{{list[index]}}"></view>
</view>
Copy the code

The native implementation of textarea always floats on top

There are two solutions: 1. Direct violence hiding textarea, which is relatively simple, but the user experience may be poor 2. Use alternative elements, one for user input and one for presentation, as follows:

<! <textarea id="text-area" value="{{txtRealContent}}" bindinput='txtInput' wx:if="{{! showMask}}" /> <! <view class='rich-text' style="{{('height:' + txtHeight + 'px')}}" wx:else> <rich-text nodes="{{txtRealContent}}"></rich-text> </view>Copy the code

Newline characters require special handling:

textareaContent.replace(/\n/g.'<br/>')
Copy the code

Vi. Canvas native implementation always floats on the top layer

In the process of project, I encountered the problem of drawing two-dimensional code with Canvas. After drawing two-dimensional code, it would float in the upper layer when sliding. The solution is as follows: 1

data: {
    QRImgUrl: ' '.// Code image path
}
Copy the code

2. Add a method to export the TWO-DIMENSIONAL code to generate pictures and return the file path:

saveCanvas() {
  wx.canvasToTempFilePath({
    canvasId: 'qr-code'.success: (res) = > {
      this.setData({
        QRImgUrl: res.tempFilePath
      })
    }
  })
}
Copy the code

3. Finally, after calling Draw (the method that draws the canvas), call saveCanvas:

setTimeout((a)= > {
    this.saveCanvas()
}, 1000);
Copy the code

Note: setTimeout must be added here, if the canvas is not drawn, the image path is exported empty. After testing on the test machine at hand, both ios and emulator can be displayed at 1000ms, some Android phones can only be displayed at 3000ms, and some Android phones can not be displayed even after 3000ms… Wx. createCanvasContext(canvasId, this) is recommended. The draw method has a callback function, so setTimeout is not required. Just call wx.canvastotempFilepath.

Continuously updated…

Reference:

www.kancloud.cn/kancloud/pr…

Developers.weixin.qq.com/blogdetail?…

Developers.weixin.qq.com/blogdetail?…

Juejin. Cn/post / 684490…