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

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

• 电脑端 "navigationStyle": "custom" 无效，所以自定义的菜单栏（或者叫导航栏）都位于胶囊按钮下方的位置，但手机端会和胶囊按钮位于同一水平；
• 电脑端的 windowHeight 包括了 tabbar 的高度；
• 平板可以在横屏模式使用微信，这时小程序获得的 screenWidth、screenHeight 并不会是横屏时的尺寸，依然是竖屏的尺寸；
• safeArea 是在竖屏正方向下的安全区域；
• 使用 wx.chooseMedia 选择图片，取消选择时，手机端会报错提示 cancel，但电脑端无 cancel 字样，即无法根据报错信息判断是否为用户取消选择；
• 安卓端 wx.chooseMedia 选择非原图时，图片可能会被压缩得过于模糊，所以安卓端建议开启原图选项，再使用 wx.compressImage 压缩图片；
• 电脑端 wx.chooseMedia 即使仅仅开启 compressed 选项，选择的图片依然是原图；
• 电脑端使用 wx.compressImage 时不支持 compressedWidth、 compressedHeight 这两个参数，即修改图片尺寸；
• canvas 导出为图片之后，dpi 都会变成 72，所以如果原图 dpi 高于 72，即使导出的分辨率不变，照片还是会变模糊；
• 建议总是在 wx.canvasToTempFilePath 之前等待 100ms 左右，电脑如果不等，可能会生成空白图片；
• 电脑端使用 wx.previewImage() 以 tempFilePath 预览本地图片时，会无法显示，因为电脑端本地图片的 tempFilePath 是 wxfile:// 开头，不是 http:// 开头；
• 电脑端不支持打开体验评分插件 wxacommentplugin；
• 安卓端对大尺寸（例如单边超过 8000px）图片执行 canvas.createImage() 时，可能会失败；
• 广告初始化考虑放在 onReady，放在 onLoad 会减慢加载速度；
• 安卓端不支持 new Date().toLocaleDateString()，会被单纯地理解成 toString()；
• 用了 ctx.scale() 和 ctx.rotate() 之后，最好习惯性地恢复回原样，ctx.save() 和 ctx.restore()；
• 在小程序页面路径传入参数时，如果传入的参数可能包含 reserved 或 unsafe 字符时，建议先对它进行 base64url；
• 有些 API 在朋友圈打开时无法调用，例如 wx.login()；
• 有些 API 限额，例如 wx.login() 一天的调用总次数不多于该小程序 pv 的两倍；
• background: linear-gradient() 在 @media (prefers-color-scheme: dark) 中不会生效，可以用 style 属性根据 theme 赋予不同的值；
• hover-class 需要放在 class 之后，在 wxss 文件中也要写在对应的 class 之后，如果 hover-class 的样式写在一个单独的 wxss 文件中，页面的 wxss 应该在最后 @import 这个单独的 wxss 文件；
• <picker-view /> 组件的蒙层在深色主题下显示有点丑，所以我喜欢隐藏这个蒙层，方法是给 picker-view 增加 mask-class 属性，然后其样式使用 background-image: none，然后 indicator-class 增加一个背景色，同时把 z-index 设为 0；
• 页面构造函数、组件构造函数之外的变量，在退出页面并重新返回页面时，不会重置，因为：页面 js 文件只会在小程序启动时执行一次，并不是每次构造页面都会执行一次，页面中的 Component() 和 Page() 函数都是构造函数，每次打开页面都会被 new 一次，所以页面构造函数内部的值会被重置；
• 基于上面这一点，建议在页面或组件构造函数之外不要用 let 或 var 声名变量，除非你故意利用它不会被重置的特点；
• wx.getNetworkType 在有系统代理的情况下把网络关闭依然显示 wifi 的情况；
• hover-stop-propagation 通常用在 view 组件，根据文档这个属性是 view 才有的属性，用在其他组件可能无效，例如用在 image 组件就无效；
• 根据腾讯云公众号的一篇文章，偶发性的在 session_key 已过期的情况下，wx.checkSession 会概率性返回 true，所以 wx.checkSession 可靠性是不达 100% 的。社区相关帖子：checkSession 判断 session_key 未失效，但是解密手机号失败 ；
• wx.navigate() 的 success 回调迟于目标页面的 onLoad，所以目标页面如果需要通过 eventChannel 获取来源页面的数据时，要等多一会；