小程序开发问题笔记

本文作者: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 条评论
登录 后参与评论

相关文章

来自专栏小詹同学

爬虫利器初体验——Scrapy

为什么要学 scrapy 呢?看下图中的招聘要求,就清楚了。很多招聘要求都有 scrapy,主要是因为 scrapy 确实很强。那到底强在哪里呢?请在文中找答案...

5510
来自专栏Spring相关

详细讲解实用的模板方法模式和实例

​ 这里通俗的来讲就是定义一个算法骨架,骨架中有特定方法(一般用final修饰,防止子类修改)和一般方法,一般方法用于给子类实现和扩展。

5100
来自专栏奔跑的键盘侠

C语言——小学三年级题目解析(二)

这期可能解析稍微详细了一点,耗费时间精力不少,B卷可能会简略一些。大家如果有问题可以留言。

6310
来自专栏牛客网

请问(技术)面试中被诈常见吗

链接:https://www.nowcoder.com/discuss/336718?type=2&order=3&pos=32&page=1

11310
来自专栏小詹同学

WordCloud 中英文词云图绘制,看这一篇就够了

摘要: 当我们手中有一篇文档,比如书籍、小说、电影剧本,若想快速了解其主要内容是什么,则可以采用绘制 WordCloud 词云图,显示主要的关键词(高频词)这种...

7610
来自专栏奔跑的键盘侠

C语言——小学题目B卷解析(终)

第6题,简单说明:系统有默认的转化规则,就是从精度底的转化为精度高的,避免计算时精度的丢失。coding一下:

9600
来自专栏JavaQ

「每天一道面试题」如何理解Java中的happens-before?

happens-before是Java内存模型中定义的两个操作之间的偏序关系,即如果操作A在操作B之前先发生,那么操作A产生的操作结果,操作B可以观察到,或者说...

2910
来自专栏小詹同学

面试官让用 5 种 python 方法实现字符串反转 ?对不起我有16种……

最近身边有个朋友,因为经受不住年薪30W+的诱惑,立志转行成为一名程序员。在自学编程一个月以后,假装自己是学生哥,信心满满地和应届毕业生一起参加了校招。然而,进...

7210
来自专栏奔跑的键盘侠

C语言——小学一年级题目解析(五)

字符型变量也可以直接取对应的字母或数字或其他符号,必须单引号。双引号就不是字符了而是字符串。

5610
来自专栏小詹同学

超长好文 |Matplotlib 可视化最有价值的 50 个图表(附完整 Python 源代码)

在数据分析和可视化中最有用的 50 个 Matplotlib 图表。 这些图表列表允许您使用 python 的 matplotlib 和 seaborn 库选择...

4710

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励