科技微讯

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

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

暂无评论