小程序开发问题笔记

本文作者：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 覆盖