微信小程序踩坑录（canvas、post请求不生效、页面刷新）

作者：汪娇娇

日期：2016.11.24

现在也不知道距离微信公测多少日子了，反正感觉我是埋在微信小程序这个坑里很久了，公司的项目终于快接近尾声，现在就腾点时间记录下我的收获，希望能给大家一点点帮助吧。

我做的几乎都是canvas的东西，所以先说说这方面的坑以及一些解决办法，还有一些解决不了的希望大家多多提出解决方案哈。

坑一：canvas适配

刚开始做这方面的时候，我一直以为获取不到机型以及手机的宽高，所以硬生生的把canvas的宽高都设成了固定的320px，想想偌大的平板上就320那么大有多丑，产品估计也想把我活活掐死。好在无意间翻文档，看到了wx.getSystemInfo(OBJECT)这个方法，OBJECT参数有三种：

success的情况下会返回：

示例代码：

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)
  }
})

不管其他的，看见那个windowWidth，我的眼睛瞬间就亮了，自然而然，canvas的适配问题也就解决了。

坑二：wx.canvasToTempFilePath()

官方文档上就这样草草了事，所以我也是陷在坑里好久，后来才找到正确的方法。

一开始我是写成这样的：

wx.canvasToTempFilePath("1");

然后就是各种报错各种郁闷，不知道大家是不是一开始就写对了，反正我是找到正确方法后有一种想掐死小编的冲动，好歹举个代码实例，不然凭那一句话，我是想不到那么多的。下面是正确写法：

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

话说，忽然想起由这个问题引发的另一个问题，就是当把canvas置为hidden的时候，这个方法就不生效了。按理说，文档上描述hidden只是简单的控制显示与隐藏，组件始终会被渲染，既然被渲染，wx.canvasToTempFilePath()这个方法不生效我是十分郁闷的，现在是没做这方面的功能，所以也没去深入研究了，有遇到同样情况的可以给我回复的。

坑三：canvas画笔粗细

当时做了画画的功能，在微信开发者工具上都是好好的，但一到真机上，每次一选择画笔粗细的时候，就画不出来东西了，当时也是郁闷好久，后来也不知道怎么找到原因的，但最后解决了。因为当时画笔的粗细我传的是字符串类型的，后来改成数字类型的就好了，不知道是微信太严格，还是没注意到这个小缺口。同样的，画笔颜色也只能是16进制的写法，直接red，green或者缩写成#ccc这样的都不生效，大家注意点就行了。

坑四：context.clearActions()

不知道是不是我写的有问题，这个方法一直不生效，所以我就用另外一个方法代替了：

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

也是同样的效果，清除画布。

坑五：wx.drawCanvas()

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

官方文档上举的栗子一直是这样的，所以我觉得是误导了n+1个人，出现的问题就是：后面画的一笔会把前面画的一笔给覆盖掉。我一开始也是这样，所以还痴痴的认为微信机制和js机制不一样，后来还想着每画一笔就把这一笔保存到一个数组中，然后画第二笔的时候，将这个数组全都展示出来，肉眼上看起来就像是一笔一笔画上去的一样，实际上是每画一笔，就把整个数组都渲染一遍。

直到有天又看了下官方文档，才发现大可不必那么麻烦，微信有现成的方法：

reverse方法置为true就可以解决这个问题了。

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

canvas的坑就暂时告一段落，接着说一说其他方面的坑吧。

坑六：post请求不生效

记得当时我是这样写的：

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

每次都会返回下面这个结果：

提示request:ok，但data偏偏是Array[0]。后来微信开发者工具升级了好几次说是修复了post请求问题，但实际上还是没完全修复，得再改一点点东西就可以了：将header的content-type改成application/x-www-form-urlencoded就可以了。

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()。

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