写小程序过程中遇到的一些小问题和小经验

这是我在写小程序过程中遇到的一些问题和经验，其中一些问题经常让人花很多时间去 debug，其中一些小经验用了很多时间才领悟得到，所以汇总在这里备忘。

wx.getSystemInfo() 有些设备不会返回 devicePixelRatio，用 pixelRatio 保险点。

广告初始化考虑放在 onReady，放在 onLoad 会减慢加载速度。

iOS 可以惯性滚动 -webkit-overflow-scrolling: touch;。

没有绑定在页面的数据不要用 setData，可以放在 globalData 中。

hideloading 这些最好放在 setData 的回调函数。

canvas 导出为图片之后，dpi 都会变成 72，所以如果原图 dpi 高于 72，导出的分辨率不变，那都会变模糊。

一张 x * y 像素的图片，在设备上应该用 x/dpr * y/dpr 的 css 尺寸来展示，这样才不会模糊。

canvas 设置字体大小 x，最终显示的字体的高度大概是 x * ratio 像素。

ctx.drawImage 如果是本地图片，要写绝对路径，例如 /pages/index/images/logo.png 表示 draw index 文件夹中的 images 文件夹中的 logo 图片。

用了 ctx.scale() 和 ctx.rotate() 之后，最好习惯性地恢复远原样，ctx.save() 和 ctx.restore()。

ctx.measureWidth() 要在 ctx.font() 之后使用。

input 有时候输入后结果显示 [object Promise]，可能是因为 input 绑定的事件是一个 async 函数。

wx.createSelectorQuery() 真机调试时可能无法进入回调，所以如果依赖它动态设置元素位置，那这个元素真机调试时可能显示错位，预览和开发者工具都可以。

wx.getMenuButtonBoundingClientRect() pc 端预览获得的数据都是 0，但真机调试又没有问题。

电脑端 wx.chooseImage() 选择图片无法选择原图，电脑端 wx.canvasToTempFilePath() 导出的图片长边最多只有 3000，导致短边可能被压缩过多，变模糊。

canvas 2d ios 通过 wx.canvasToTempFilePath() 导出的图片清晰度似乎还受 canvas 的 css 尺寸影响，虽然最后导出的图片分辨率正常，但图片看起来很多锯齿，只因这个 canvas 的 css 尺寸设置太低了。

canvas 2d 修改 css 尺寸之后应该重新 query，query 操作在 setData 的回调函数进行，不要再用修改前的 ctx 进行处理，否则可能导致图片变形。

在修改 canvas 尺寸之前 clear 一下，可以避免修改过程中短暂的图片显示变形。

小程序不支持 ctx.filter。

<movable-area> 和 <movable-view> 的 css 样式必须显式设置 width 和 height，否则就是 10px * 10px，可以显式设置为 auto 或 100%，这样这个 <movable-area> 的宽高会自动等于内容的宽高，事实上对于 block 元素的 height 和 width，其默认值就是 auto，但是小程序要求即使是默认值也要显式写出来。

小程序不支持 :last-child 这种选择器。

公众号模板消息跳转小程序，这个小程序需要绑定在这个公众号，跳转路径需要是完整路径，可以在小程序开发助手左下角复制。

云开发 cloud.getWXContext().UNIONID 本地调试不能获取 UNIONID，需要部署到云端才能获取，另外，取消关注公众号再马上打开这个小程序，云端依然会返回 unionid，所以不能只依靠有没有返回 unionid 判断用户是否正在关注公众号。

wx.cloud.callFunction 传入的 data 数据量不能太大，否则无法正常调用云函数，但是同样的数据量可以通过 wx.cloud.database().collection().add() 保存到数据库。

cover-view 限制很多，在给这个组件使用某个功能前，看一下这个功能是否可用。

安卓端不支持 new Date().toLocaleDateString()。

小程序不支持正则的 look ahead 和 look around。