本文作者：IMWeb jaychen 原文出处：IMWeb社区 未经同意，禁止转载
本文作者：IMWeb 黎清龙 原文出处：IMWeb社区 未经同意，禁止转载
小程序开发问题笔记
最近从0开始，开发了【企鹅速算检查】小程序，在开发过程中遇到一堆的问(巨)题(坑)，这里记录下来分享给大家。
背景
【企鹅速算检查】小程序主要功能是拍照，然后把图片通过人工智能识别出算术题，并判断正误，最后展示结果给到用户。
因此，这个小程序主要使用到的核心功能有：拍照，canvas。
为什么要用到 canvas 呢？主要是因为结果的图片是通过原图和批改结果信息合成出来的，这个合成需要在小程序处理。
下面是结果页面的一个例子：
项目使用 wepy 开发框架进行开发。
问题记录
wepy 的 page 实例不会被销毁
页面在加载的时候就会创建 wepy 的 page 实例对象，在页面离开，已经调用了 onUnload 的情况下，wepy 的 page 实例对象不会被销毁！它会被保留，然后下一次再进入页面的时候，就会复用这个 page 实例对象。
这应该是 wepy 框架设计成这样的，因为每个页面都是一个单例，那复用实例对象也无可厚非。
但是，这个对于开发并不是透明的！因为 page 实例对象没有被销毁，所以实例对象的属性不会被回收！
因此当页面再次加载的时候，上一次留下来的一些状态数据会被保留，因此会造成许多隐形的 bug
这个问题造成了不下于 10 个 bug，感觉需要一套自动回收对象属性的机制，不然都靠手动来重置会很麻烦
把小程序看做 SPA
这里主要关注的点是 require 的模块是单例的，所有的小程序页面依赖的模块是公共的。
某些多媒体元素的置顶情况
某些元素是置顶的，也就是说 z-index 是无效的，其他元素无法覆盖在这些元素上面：
- canvas
- video
- live-player
- live-pusher
- webview
- camera: 可以用 cover-view、cover-image 元素覆盖
- map
文档会有说明，但是对于刚接触小程序的开发来说，这都是不太会被注意到的，因此这里会造成一些设计上面的问题，比如需求需要覆盖一个元素的时候。。。
ios 8 css 兼容问题，需要添加 -webkit- 前缀
所有和 flex 相关的，还有 media query，transform，反正都要加 -webkit- 前缀。
应该让 wepy 构建来处理这个问题
cover-view 无法使用背景图
cover-view 元素使用 background-iamge 失效，需要使用 cover-iamge 元素。
cover-view、cover-iamge 有些 css 属性不生效
比如 transform
Android 系统调用 wx.reLaunch 报错
这是小程序自身的 bug，目前暂时无法解决
使用webview 加载 H5 页面有时加载不出来，出现白屏，并且没有任何反馈
如果 H5 页面是开发自己控制的，可以看下是否可以通过通信的机制来确认 H5 页面是否加载成功
wx.request 的 referer header 不可设置，固定域名是 servicewechat.com，因此接口的 referer 限制设定需要注意
文档里面有说这点，这里需要注意的是所有访问的接口都需要开放 servicewechat.com 的 referer 限制
canvas 的 draw 方法不会触发 callback
根据文档，draw(reserve, callback)，callback 参数是在 drwa 完成之后执行的回调，但是某些机型系统不会触发。
因此只能通过 setTimeout 的方式去执行 callback，但有时还是会有没画完就执行的 bug，无解。
canvas 的 clearRect 方法不能清除 drawImage 的图片
至今无解，只能重新创建一个 ctx，然后再 drawImage 覆盖
