微信小程序 刨坑

第一次写博客，还真是激动人心。最近在做一个微信小程序，之前没搞过前端开发，临时被老师抓来干这个，本以为很简单的活结果越干坑越多，一步一步刨坑。记录一下，日后再相见。

微信小程序开发有一个很坑的点，在于微信开发者工具和真机模拟的效果有很大的差别，很多地方在开发者工具上可以正常运行或显示的属性/方法放在真机模拟时就无法正常显示。

1 css属性clip-path

CSS的“clip-path”属性在开发工具可以达到想要的效果，但是真机模拟时，对图片的切片就无法达到预期效果。

2 gif动画播放问题

开发者工具中，可通过对gif图片本身属性的设置来改变gif播放次数，真机模拟中gif动画则是一直播放。通过在图片src增加时间戳的方法也无法解决gif单词播放的问题。

解决方案：有一个解决思路，在修改src之后，利用setTimeout进行回调，修改图片hidden属性隐藏图片，前提是知道该动画播放一次需要的时间。

3 wx.canvasPutImageData

在将某一帧图片或者某一幅图片（以array形式保存的图片内容）画在画布上时需要用到这个接口，当图片大小过大时，保存数据过长，此时可能会报错“VM1656:1 invokeCanvasMethod 数据传输长度为 *** 已经超过最大长度 104857”。无法进行数据写入。

解决方案：将数据进行切分，分块进行数据写入。（写入时需要注意的是，array的数据是按列保存的）

4 Camera涉及的尺寸问题

在利用camera获取当前视频流的图像时，对图片内容进行检测时，可以通过onCameraFrame和takePhoto进行获取当前图像内容，再将其绘制到canvas中。这时候可能会涉及到几个尺寸问题。假设我们将takePhoto获取的图片记为res，onCameraFrame获取的视频帧记为frame，手机屏幕记为screen。

则此时res、frame、screen可能获取的宽高是不一致的。

以我的手机小米note3为例：

• res.width = 720, res.height = 1148
• frame.width = 720，frame.height = 1280
• screen.width = 393, screen.height = 627

三者如果需要做一些转换关系需要注意各部分之间的关系。

另外，屏幕对camera获取的frame显示也存在一定的问题，可能存在的情况：①frame显示部分居中，不显示实际frame左右一部分的图像；②frame显示向下对齐，不显示上部的一部分图像。这种情况下可以根据screen的宽高比和frame的宽高比进行一个判断，完成相应的位置对应。

---

未完待续...