日期：2016.11.24

不知道微信还要多久才会正式发布，反正感觉自己在微信小程序这个坑里坑了好久了，公司项目终于要结束了，现在抽点时间记录一下自己的收获，希望对大家有点帮助。

这些事情我几乎都做过，所以我先说一下这方面的坑和一些解决办法，还有一些问题没法解决，希望大家能提出更多的解决办法。

陷阱一：适应

刚开始做这个的时候，总觉得拿不到手机的型号和宽高，就把宽高设置成了。心想这么大的平板上，320度的宽度该有多丑啊，产品估计要掐死我了。还好，无意中翻了一下文档，看到了wx.()方法，它有三个参数：

在这种情况下，它将返回：

示例代码：

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

不管别的，看到那个的时候，我眼睛瞬间亮了，自然而然，适配问题就解决了。

陷阱2：wx.()

官方文档只是很草率地处理了这个问题，所以我在这个坑里坑了好久才找到正确的方法。

一开始我是这样写的：

wx.canvasToTempFilePath("1");

然后就是各种报错，各种郁闷，不知道你一开始写得对不对，反正我找到正确方法之后，有种想掐死编辑器的冲动，至少给个代码示例，不然凭那句话我也想不出那么多，下面是正确的写法：

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

对了，突然想起这个问题带来的另外一个问题，就是当设置为 时，这个方法就不起作用了。理论上文档中的描述只是简单的显示隐藏控制，组件一直都会被渲染的。既然是渲染的，那我就很郁闷 wx.() 这个方法不起作用了。现在我也没做过这个功能，所以也没有深入研究过，如果遇到同样情况的，请回复我。

陷阱3：刷子厚度

当时我做了一个画图功能，在微信开发者工具上运行的很好，但是到了真机上，每次选中画笔粗细，就画不出什么了。当时很郁闷，后来也不知道怎么找原因，不过最后还是解决了。因为我把画笔粗细当成字符串类型传递，后来改成数字类型，就成功了。不知道是微信太严格还是我没注意到这点小差距。同样的，画笔颜色也只能写成十六进制，直接写红色，或者简写成#ccc，都是不行的，注意一下就行了。

陷阱4：.()

不知道是不是我写的有问题，这个方法并没有起到作用，于是改用了另外一个方法：

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

它也具有相同的效果，清除画布。

陷阱5：wx.()

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

官方文档给出的例子一直都是这样的，所以我觉得误导了n+1个人。问题在于下一笔会覆盖上一笔。我一开始也是这样，所以傻傻的以为微信的机制和JS的机制不一样。后来想到应该把每一笔都保存在一个数组里，然后在画第二笔的时候就把整个数组都显示出来。肉眼看上去是一笔一划的画，但其实每一笔都会把整个数组渲染一遍。

直到有一天我又看了看官方文档，发现没必要这么麻烦，微信有现成的方法：

通过将该方法设置为true即可解决该问题。

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

我们先把这些陷阱放在一边，来讨论其他陷阱。

陷阱六：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) } })

每次都会返回以下结果：

提示：可以，但是数据是[0]。后来微信开发者工具升级了几次，声称修复了post请求问题，但实际上并没有完全修复。稍微改了一下就好了：把-type改成/x-www-form-。

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

之前有各种说法，说 /json 会被自动过滤掉，或者再加一个 /json，就是 2，所以之前的方案就是直接去掉，请求就能成功。现在微信修复了 bug，需要把 -type 改成 /x-www-form- 才能生效。

陷阱 7：刷新页面

刷新页面的时候其实有不少陷阱，我来列举一下：

1、以前总是可以双击来刷新页面的，但是现在你无法控制，所以这个无法实现；

2.只有下拉刷新的样式（三个点旋转），没有上拉加载的样式（这个只能按照官方文档的样式自己设计）；

3.下拉刷新在开发者工具里效果很好，3秒后会自动拉回来，但是在真机上不起作用，三个小点无法返回，必须手动拉回来，或者在数据加载完成的时候加一个wx.()方法，停止刷新然后自动返回。

4. 从页面 A 跳转到页面 B，然后从页面 B 返回到页面 A。希望页面 A 自动刷新。如何实现？

先说一下小程序页面刷新的原理：小程序的框架逻辑跟vue框架类似，都是数据驱动的界面刷新，所以刷新页面的关键就是()，但是这样只能让页面被动地刷新，如果想让页面返回的时候刷新，就得用这个生命周期函数，每次打开页面都会调用一次，然后跟()结合起来就完美了。

陷阱 8：背景图片只能是绝对路径

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

陷阱9：传输对象到后端不生效

当时我发送了一组对象到后端，结果后端收到的却是一个奇怪的[ ]，搞得我很郁闷。后来我了解了 JSON.() 这个方法，因为发送到后端的数据要提前字符串化，所以就成功了。虽然现在能用了，但是中间还是绕了不少弯路，不过结果还好，开心就好，哈哈哈哈。顺便普及一下字符串转对象的方法：JSON.()。

今天就写这么多，我一直陷在这个坑里，还有很多问题没有解决，可能出现的问题也很多，希望大家多多指教。