近期遇到的几个小程序坑

其实我不想说小程序的坏话，因为其它竞品，例如支付宝、百度、轻应用之流的小程序很大可能只会做的更差。

我也不希望你会遇到以下这些问题，但是有时间也不妨了解下。本文不仅指出问题，也会给出一些解决思路，欢迎参考借鉴。

本文主要面向一定开发经验读者，如果你对部分概念无法理解，建议查阅 MDN 以及 官方文档。

无法实现动态字体引入

这个属于小程序设计问题，因为无法动态创建 css，所以也就无法引入动态生成的 css。一种解决办法是使用后端生成图片，然后页面引入图片。例如使用 node-canvas 模块，比较麻烦就是要在服务器上配置好字体。

小程序后续可能会引入载入自定义字体方案来解决这个问题。

canvas 设置不了 height 和 width 属性

也是一个恶心的设计问题，小程序这里没有没有遵循 web 规范。Canvas 的宽高不应该等同于 css 设置的宽高，而是应该可以独立设置。这种设计导致了我们无法针对高分屏生成高精度的 canvas 或者生成可缩放的高分辨率图片。

已向官方提出需求，希望他们能改进。

textarea 设置不了 lineheight 和 padding 样式

textarea 在移动端使用原生组件实现，在 IOS 上设置 lineheight 和 padding 无效，这导致 textarea 总会在左上有一个 padding，这对于某些视觉强迫症来说很难接受。一个办法是使用 input 假装成 textarea，或者在外层使用 css 的 transform 强制对齐，但是这样灵活性太差，强烈不推荐。

movable-view 使用 css 的 scale 进行缩放

这种实现方式会导致一个问题：你无法使用 movable-view 模拟图片预览，来查看提高显示的精度，因为就算你里面的图片是高清的，scale 放大后还会是模糊的。一种办法是自己实现双指缩放，通过改变元素宽高而不是 scale 来放大图片，另一种办法是在后端合成出一个图片，然后使用 previewImage 这个 API 进行预览。

希望官方可以增加一种改变宽高的缩放方式，实现方式可以参考我写的图片预览组件：mobkits/images-preview

audioContext 对象第一次触发 onPlay 回调时 duration 属性无法获取

小程序 bug，开发者工具可重现。更坑的是它不是返回 null，而是 0。

一个解决办法是在 onTimeUpdate 回调里获取 audioContext 的 duration，这里的 duration 总是存在。

audioContent canPlay 回调后音频还是无法正常开始播放

canPlay 回调完 IOS 上音频还是无法正常开始播放， 下载仍然继续。可以在 play 调用后加了一个 setTimeout 判定 500 毫秒后如果播放还没触发，则提示用户等待加载。

recorderManager 对象调用 resume 方法后开发工具不会回调 onStart，而 IOS 上会

小程序 bug，但是说不清楚是 IOS 实现的问题，还是开发者工具的问题，解决办法就是判定一下：

let started = false
recorderManager.onStart(() => {
  if (started) return
  started = true
  // do something on start
})

动态改变 css 的 animation-play-state 属性 IOS 不起作用

css 的 animation-play-state 属性可以设置为 running 和 paused 来开启和暂停 css 动画，但是不知为何在小程序的 IOS 设备上无效，无论是通过 css 还是 style 属性设置都无效。解决办法是 javascript setInterval 动态计算属性，然后 setData。

已向官方反馈该问题。

backgroundAudioManager.title 必填

不知是 bug 还是他们文档没写好，如果不填 title 在 IOS 会报 title is nil 这个错误，但是开发者工具可以正常播放。

这个问题很容易发现，记得填上就是了。

canvas 的 draw 函数部分机型不触发 callback 回调

首先小程序文档就没写清楚 callback 怎么调用，正确的调用方法是这样的：

ctx.draw(true, () => {
// export image
})

如果你不想导出一团黑就需要在 draw 的 callback 里面做图片导出操作。

我们发现在安装了最新版微信 6.6.6 的 iPhone X 上面这个回调不会触发。 鉴于这个问题不好处理，我们后面使用后端来处理图片导出了，后端的另一个好处就是改完不用等小程序审核。

app 进入后台会缓存数据传递

一个算不上 bug 的 bug。如果你在 setInterval 函数里面调用 setData 会在 IOS 上发现 setData 调用会在小程序进入后台再进入后多次连续调用，换句话说，setData 的调用在小程序进入后台后被缓存了起来，然后当小程序回到前台又会被依次重新触发。如果你不想要这种情况可以在 app.js 保存当前应用可见状态：

 onShow() {
    this.globalData.appShown = true
  },
  onHide() {
    this.globalData.appShown = false
  }

然后在回调里面判定下就可以了。

虽然小程序算不上什么严谨的技术，但是市场方面目前还是非常不错的。主要原因就是开发推广原生 app 实在太贵了，大部分公司根本承受不起。

本文基于 CC BY-NC-ND 4.0 发布，允许非商业性署名转载，禁止演绎。