这是我在写小程序过程中遇到的一些问题和经验,其中一些问题经常让人花很多时间去 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。