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

作者: 科技微讯

日期:

这是我在写小程序过程中遇到的一些问题和经验, 其中一些问题经常让人花很多时间去 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 限制很多, 在给这个组件使用某个功能前, 看一下这个功能是否可用.