jaychen

9 天前

小程序开发问题笔记

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

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。