百度小程序迁移微信小程序过程实操记录

309 阅读4分钟

项目背景

之前的小程序是在百度投放的,然后近期要转移到微信小程序,因为微信小程序更容易做内容裂变。项目依赖 Taro 2.2.8,然后项目过程中先是使用遍历的思路,把出问题的地方都以及解决思路都记录了一下,后面一个个问题排查解决(解决过程就像 DFS 一样,会报连环错,需要一层层深入解决)。

结论先行

最主要的游客模式功能受限,一些资源加载不出来,需要有项目账号,这样就可以配置一些合法域名等。 其他可能出现的兼容性问题,如特定于百度小程序的写法、 api 或者样式选择器写法等,需要注意。

发现的问题

滚动失效问题

文字搜索列表页无法滚动

发现是高度设置问题,从以下文章中获取思路。 blog.csdn.net/weixin_3046…

无法登录微信有权限账号

appid 不合法

目前是测试号,后续通过接入现有的 AppID 解决。

域名校验

需要后台配置合法域名,不然可能导致图片加载不出来

本地是可以配置关闭域名校验的,还有一种方式是后台配置合法域名。但发现即使把校验域名开关关闭,甚至后台配置好域名都还是报错。最终发现是防盗链的问题,下面会讲到。

样式问题

返回上一页按钮缺失

百度小程序默认有返回上一页功能,微信小程序没有。所以需要自己配置。这里动用了条件编译的配置。

image.png

颜色失效

www.jianshu.com/p/95f6060f5…

刚开始以为是 16 进制的颜色格式微信小程序不支持,所以切换成 rgb 格式的,还是没生效。这属于之前没注意的点,之前把按钮的类型设置成了 primary,百度小程序这边没出现问题,但是到微信小程序那边颜色和设计稿就不一致了,是被它的类型覆盖,最终样式直接设置成 !important

deprecated:pixed 定位异常

右上角操作栏样式

预期把下面内容顶下去而不是平级

这个问题是微信小程序的 systemInfo 中没有 navigationBarHeight 选项,而之前的代码没有进行空值处理,后面通过兜底值以及条件编译设置高度解决。同时,需要注意,该方式其实稳健性、可维护性不好,后续迭代时需要注意像素大小版本迭代引起的兼容性,最好的方案是动态获取高度来设置。不过秉持敏捷开发流程,有早期交付的好处,增量开发,先做完再优化(先把主要的迁移需求满足,具体实现方式代码可以后期优化)。www.ruanyifeng.com/blog/2019/0…

图片未加载

首页

试题详情页

搜索图标

这些就是防盗链的问题,需要在 CDN 配置里添加白名单。思路见

help.aliyun.com/document_de…

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…

www.jianshu.com/p/3f0cb5474…

developers.weixin.qq.com/community/d…

不支持 setPageInfo

image.png 这个 api 特属于百度

docs.taro.zone/docs/2.x/ap…

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 6 天,点击查看活动详情