项目背景
之前的小程序是在百度投放的,然后近期要转移到微信小程序,因为微信小程序更容易做内容裂变。项目依赖 Taro 2.2.8,然后项目过程中先是使用遍历的思路,把出问题的地方都以及解决思路都记录了一下,后面一个个问题排查解决(解决过程就像 DFS 一样,会报连环错,需要一层层深入解决)。
结论先行
最主要的游客模式功能受限,一些资源加载不出来,需要有项目账号,这样就可以配置一些合法域名等。
其他可能出现的兼容性问题,如特定于百度小程序的写法、 api 或者样式选择器写法等,需要注意。
发现的问题
滚动失效问题
文字搜索列表页无法滚动
发现是高度设置问题,从以下文章中获取思路。
blog.csdn.net/weixin_3046…
无法登录微信有权限账号
appid 不合法
目前是测试号,后续通过接入现有的 AppID 解决。
域名校验
需要后台配置合法域名,不然可能导致图片加载不出来
本地是可以配置关闭域名校验的,还有一种方式是后台配置合法域名。但发现即使把校验域名开关关闭,甚至后台配置好域名都还是报错。最终发现是防盗链的问题,下面会讲到。
样式问题
返回上一页按钮缺失
百度小程序默认有返回上一页功能,微信小程序没有。所以需要自己配置。这里动用了条件编译的配置。
颜色失效
刚开始以为是 16 进制的颜色格式微信小程序不支持,所以切换成 rgb 格式的,还是没生效。这属于之前没注意的点,之前把按钮的类型设置成了 primary,百度小程序这边没出现问题,但是到微信小程序那边颜色和设计稿就不一致了,是被它的类型覆盖,最终样式直接设置成 !important。
deprecated:pixed 定位异常
右上角操作栏样式
预期把下面内容顶下去而不是平级
这个问题是微信小程序的 systemInfo 中没有 navigationBarHeight 选项,而之前的代码没有进行空值处理,后面通过兜底值以及条件编译设置高度解决。同时,需要注意,该方式其实稳健性、可维护性不好,后续迭代时需要注意像素大小版本迭代引起的兼容性,最好的方案是动态获取高度来设置。不过秉持敏捷开发流程,有早期交付的好处,增量开发,先做完再优化(先把主要的迁移需求满足,具体实现方式代码可以后期优化)。www.ruanyifeng.com/blog/2019/0…
图片未加载
首页
试题详情页
搜索图标
这些就是防盗链的问题,需要在 CDN 配置里添加白名单。思路见
api 报错
checkSession api 报错
查了一下应该和登录相关功能有关系,目前登录功能还没做好,因为需要认证 (微信小程序登录的功能,需要认证一下来拿到权限)。
developers.weixin.qq.com/community/d…
getStorage api 报错
后面没再遇到了,先不管
其他
编译到微信小程序后,不合适的 api 使用,包括但不限于
for 循环 添加 key警告
过程中注意负优化问题:
下面这段代码就没必要用 key,禁用掉就好,开发者工具警告不用去管。
<View>
{Array(3)
.fill()
.map(() => (
// eslint-disable-next-line react/jsx-key
<Skeleton loading title row={2} />
))}
</View>
被忽略的 SelectorQuery call
WAServiceMainContext.js?t=wechat&s=1676708021653&v=2.30.0:1 An SelectorQuery call is ignored because no proper page or component is found. Please considering using `SelectorQuery.in` to specify a proper one.
解决这个问题过程中通过回归思路合并简化了代码
开始的情况是 Taro 版本在百度小程序上可以正常执行,在微信小程序上不能正常执行,然后通过条件编译,设置测试代码单独的代码在微信小程序上测试,测试通过后这段代码继续在百度小程序上测试,如果也测试通过了,证明这个代码二者可以共同使用,将条件编译移除,代码合二为一。
const query = Taro.createSelectorQuery().in(this.$scope);
developers.weixin.qq.com/community/d…
developers.weixin.qq.com/community/d…
不支持 setPageInfo
这个
api 特属于百度
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天,点击查看活动详情