小程序模板网

娇娇jojojojo:微信小程序踩坑录:canvas,post请求,页面刷新

2018-03-30 顶膛火

授权地址

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

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

坑一:canvas适配

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

success的情况下会返回:

示例代码:


  1. wx.getSystemInfo({
  2. success: function(res) {
  3. console.log(res.model)
  4. console.log(res.pixelRatio)
  5. console.log(res.windowWidth)
  6. console.log(res.windowHeight)
  7. console.log(res.language)
  8. console.log(res.version)
  9. }
  10. })

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

坑二:wx.canvasToTempFilePath()

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

一开始我是写成这样的:


  1. wx.canvasToTempFilePath("1");

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


  1. wx.canvasToTempFilePath({
  2. canvasId: '1',
  3. success: function (res) {
  4. var tempFilePath = res.tempFilePath;
  5. console.log(tempFilePath);
  6. },
  7. fail: function (res) {
  8. console.log(res);
  9. }
  10. });

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

坑三:canvas画笔粗细

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

坑四:context.clearActions()

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


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

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

坑五:wx.drawCanvas()


  1. context.clearRect(0, 0, 320, 320);wx.drawCanvas({
  2. canvasId: 'firstCanvas',
  3. actions: context.getActions() // 获取绘图动作数组
  4. })

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

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

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


  1. wx.drawCanvas({
  2. canvasId: id,
  3. actions: context.getActions(),
  4. reverse:true
  5. })

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

坑六:post请求不生效

记得当时我是这样写的:


  1. wx.request({
  2. url: url,
  3. method:"POST",
  4. data: {
  5. "paintId":0,
  6. "limit":10,
  7. "openId":openid
  8. },
  9. header:{'content-type': 'application/json'},
  10. success: function(res) {
  11. console.log(res)
  12. }
  13. })

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

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


  1. wx.request({
  2. url: url,
  3. method:"POST",
  4. data: {
  5. "paintId":0,
  6. "limit":10,
  7. "openId":openid
  8. },
  9. header:{'content-type': 'application/x-www-form-urlencoded'},
  10. success: function(res) {
  11. console.log(res)
  12. }
  13. })

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

坑七:刷新页面

刷新页面的坑其实挺多的,我罗列一下:

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

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

3、下拉刷新在开发者工具上是好使的,3s后会自动拉回去,但在真机上就不生效,那三个小点点就回不去了,必须手动拉回去;

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

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

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

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

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

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

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



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/22984.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询