WeChat applet stepping on the pit record (canvas, post request does not take effect, page refresh)

Author: Wang Jiaojiao

Date: 2016.11.24

I don’t know how many days have passed since the WeChat public beta. Anyway, I feel that I have been buried in the WeChat applet for a long time. The company’s project is finally coming to an end. Now I will make some time to record my gains. A little help.

Almost everything I do is canvas, so let’s talk about the pits and some solutions first. There are still some that can’t be solved. I hope you can provide more solutions.

Pit 1: canvas adaptation

When I first started doing this, I always thought that I couldn't get the width and height of the model and mobile phone, so I set the width and height of the canvas to a fixed 320px. Thinking about the huge tablet, it is as big as 320px. How ugly, the product probably wants to strangle me to death. Fortunately, I accidentally flipped through the document and saw the method wx.getSystemInfo(OBJECT) . There are three OBJECT parameters:

In the case of success, it will return:

Sample code:

wx.getSystemInfo({
  success: function(res) {
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
  }
})

No matter what else, when I saw the windowWidth, my eyes lit up instantly, and naturally, the adaptation problem of canvas was solved.

Pit 2: wx.canvasToTempFilePath()

The official documentation is so hasty, so I was stuck in the pit for a long time, and then I found the correct method.

At first I wrote it like this:

wx.canvasToTempFilePath("1");

Then there are all kinds of error reports and all kinds of depression. I don’t know if you wrote it right from the beginning. Anyway, after I found the correct method, I had an urge to strangle the editor. I can't think of that much. Here is the correct spelling:

wx.canvasToTempFilePath({
    canvasId: '1',
    success: function (res) {
        var tempFilePath = res.tempFilePath;
        console.log(tempFilePath);
    },
    fail: function (res) {
        console.log(res);
    }
});

In other words, I suddenly remembered another problem caused by this problem, that is, when the canvas is set to hidden, this method does not take effect. It stands to reason that the document describes hidden as a simple display and hide control, and the component will always be rendered. Since it is rendered, I am very depressed that the wx.canvasToTempFilePath() method does not take effect. I have not done this function now, so I haven't researched it in depth, and if anyone encounters the same situation, you can reply to me.

Pit 3: Canvas brush thickness

At that time, the function of painting was done, and it was good on the WeChat developer tool, but when it came to the real machine, every time I chose the thickness of the brush, I couldn't draw anything. I was depressed for a long time, and I didn't know it later. How to find the reason, but finally solved. Because the thickness of the brush was passed as a string at that time, but I changed it to a number . I don’t know if WeChat is too strict, or I didn’t notice this small gap. Similarly, the color of the brush can only be written in hexadecimal. Direct red, green or abbreviated as #ccc will not take effect. Just pay attention.

Pit 4: context.clearActions()

I don't know if there is a problem with what I wrote, this method has not been effective, so I replaced it with another method:

context.clearRect(0, 0, 320, 320);

Also the same effect, clear the canvas.

Pit five: wx.drawCanvas()

wx.drawCanvas({
   canvasId: 'firstCanvas',
   actions: context.getActions() // 获取绘图动作数组
})

The chestnuts mentioned in the official documents have always been like this, so I think it is misleading n+1 people. The problem is that the strokes drawn later will cover the strokes drawn earlier . I was like this at the beginning, so I thought that the WeChat mechanism is different from the js mechanism. Later, I thought about saving the stroke in an array every time I draw a stroke, and then when I draw the second stroke, I put the array in this array. All are displayed. To the naked eye, it looks like a stroke is drawn, but in fact, the entire array is rendered once for each stroke.

It was not until one day that I looked at the official documents again and found that there is no need to be so troublesome. WeChat has a ready-made method:

Set the reverse method to true to solve this problem.

  wx.drawCanvas({
    canvasId: id,
    actions: context.getActions(),
    reverse:true
  })

The pit of canvas will come to an end for the time being, and then let’s talk about pits in other aspects.

Pit 6: The post request does not take effect

I remember when I wrote this:

wx.request({
    url: url,
    method:"POST",
    data: {
       "paintId":0,
       "limit":10,
       "openId":openid
    },
    header:{'content-type': 'application/json'},
    success: function(res) {
        console.log(res)
    }
})

The following result is returned each time:

Prompt request: ok, but data is Array[0]. Later, the WeChat developer tool was upgraded several times and said that the post request problem was fixed, but in fact it was not completely fixed, and it was necessary to change a little something: change the content-type of the header to application/x-www-form -urlencoded is just fine.

wx.request({
    url: url,
    method:"POST",
    data: {
       "paintId":0,
       "limit":10,
       "openId":openid
    },
    header:{'content-type': 'application/x-www-form-urlencoded'},
    success: function(res) {
        console.log(res)
    }
})

之前有各种说法，说application/json会被自动过滤掉，或者又加上一个application/json，成了2个，所以之前的解决办法是直接将header去掉不写就可以请求成功了。现在微信修复了bug后，要把content-type改成application/x-www-form-urlencoded才可以。

坑七：刷新页面

刷新页面的坑其实挺多的，我罗列一下：

1、以前总有双击tabBar就能刷新页面，现在没法控制tabBar，这个也就没办法实现了；

2、只有下拉刷新的样式（三个点转呀转那个），但没有上拉加载的样式（这个只能照着官方文档的样式自己去设计了）；

3、下拉刷新在开发者工具上是好使的，3s后会自动拉回去，但在真机上就不生效，那三个小点点就回不去了，必须手动拉回去，或者当数据加载完的时候加上一个wx.stopPullDownRefresh()方法让它停止刷新然后自动回去。

4、从页面A跳到页面B，再从B返回到A，想让A自动刷新，这个怎么做呢？

先说下小程序页面刷新的原理吧：小程序的框架逻辑比较类似react和vue框架，属于数据驱动界面刷新，所以想让页面刷新的关键就是setData()，但这只是被动的让页面刷新。想让页面返回的时候就刷新，那就要用到onShow这个生命周期函数了，onShow是每次打开页面都会调用一次，然后再和setData()结合就完美了。

坑八：背景图只能是绝对路径

应该不止一个人遇到这个问题了，背景图写的相对路径，在开发者工具上显示是正常的，但一到真机上就显示不出来，其实只要改成绝对路径就行了，也就是将图片先上传到自己的服务器，然后写这个路径就可以了。

坑九：传对象到后台不生效

当时传了一组对象到后台，结果后台收到的就是[Object Object]这个鬼样子，一直很郁闷，后来知道了JSON.stringify()方法，用了这个方法就OK了，因为传给后台的数据要提前字符串化。虽然现在是好使的，但中间其实也是波折不断，不过结果是好的，也就开心了，哈哈哈。顺便普及一下字符串转对象的方法：JSON.parse()。

今天就写这么多吧，一直在踩坑中，上面也还有很多没解决的问题以及可能不对的地方，希望大家多多给我提意见哈。