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

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

• 电脑端 "navigationStyle": "custom" 无效，所以自定义的菜单栏（或者叫导航栏）都位于胶囊按钮下方的位置，但手机端会和胶囊按钮位于同一水平；
• 电脑端的 windowHeight 包括了 tabbar 的高度；
• wx.getWindowInfo() 获得的 windowHeight 可能等于 screenHeight，这个很明显是 bug，出处 1，出处 2，出处 3，应该只在安卓出现，wx.getSystemInfoSync() 没有这个问题，但这个接口停止维护了；
• 平板可以在横屏模式使用微信，这时小程序获得的 screenWidth、screenHeight 并不会是横屏时的尺寸，依然是竖屏的尺寸；
• safeArea 是在竖屏正方向下的安全区域；
• 使用 wx.chooseMedia 选择图片，取消选择时，手机端会报错提示 cancel，但电脑端无 cancel 字样，即无法根据报错信息判断是否为用户取消选择；
• 安卓端 wx.chooseMedia 选择非原图时，图片可能会被压缩得过于模糊，所以安卓端建议开启原图选项，再使用 wx.compressImage 压缩图片；
• 电脑端 wx.chooseMedia 即使仅仅开启 compressed 选项，选择的图片依然是原图；
• 电脑端使用 wx.compressImage 时不支持 compressedWidth、 compressedHeight 这两个参数，即修改图片尺寸，电脑端甚至 wx.canIUse("compressImage") 返回 false；
• canvas 导出为图片之后，dpi 都会变成 72，所以如果原图 dpi 高于 72，即使导出的分辨率不变，照片还是会变模糊；
• iOS 使用 wx.canvasToTempFilePath 导出分辨率较大的图片，可能会出现导出的图片是黑色或透明或白色的情况，降低导出的分辨率可解决；
• 电脑端使用 wx.canvasToTempFilePath 如果设置了 destWidth、destHeight，生成的图片尺寸可能会在这个基础上再乘以电脑的 dpr，电脑端如果可以的话不要设置任何可选参数；
• 电脑端使用 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 获取来源页面的数据时，要等多一会；
• <text> 组件开启 user-select 之后，部分安卓手机选择文字之后没有复制、全选两个按钮，解决方法：取消 <text> 父元素的 padding；
• OffscreenCanvas 使用相同 src 创建的 Image 仅触发一次 onload 事件，即使页面退出再返回，也是不能 onload，可以试试不使用离屏 canvas；
• wx.saveFile() 用来把临时文件保存为缓存文件或者用户文件，保存到 wx.env.USER_DATA_PATH 目录才是用户文件，如果不指定保存目录就是缓存文件。缓存文件使用 removeSavedFile 删除，而用户文件则使用 unlink 删除。如果使用 unlink 删除缓存文件会提示没有权限；
• 通过 canvas 获取图片的 imageData，不同设备（例如手机和电脑）获得的数据可能有轻微差异；
• onShareAppMessage 返回的 path 必须是以 / 开头的完整路径，如果不是以 / 开头，分享卡片可能不会显示页面截图，而是显示空白；
• wx.request 开启 useHighPerformanceMode 选项可能导致安卓端微信出现 ERR_CONTENT_DECODING_INIT_FAILED 报错，主要是安卓端 8.0.46、8.0.47 会出错，后面的版本修复这个问题了；
• 小程序的 sourcemap 似乎不能定位被加固过的代码；
• wx.showLoading() 和 wx.hideLoading() 之间的时间间隔不能太短，否则可能会报错 {"errMsg":"hideLoading:fail toast can't be found"}，复现代码：onLoad: async () => { await wx.showLoading({ title: "测试" }); await wx.hideLoading(); }，使用 iOS 微信 8.0.60。这个报错如果没捕捉，可能会导致小程序部分功能不可用，给用户带来不好的体验。奇怪的是紧挨着多次调用 wx.hideLoading() 并不会出现这个问题。无论如何，建议写 wx.hideLoading({ fail: () => null })；
• wx.request() 的响应头需要用大写获取，例如 res.header["content-type"] 可能返回 undefined，应该写作 res.header["Content-Type"]，以防万一写作 res.header["Content-Type"] ?? res.header["content-type"] 更好；
• 微信小程序提交审核时，审核人员默认是在开发环境即 develop 下审核小程序的，但是据说审核人员可以切换环境；