收藏级！教你如何将微信小程序迁移到QQ浏览器|开发

微信和QQ之后，小程序也可以在QQ浏览器上使用。12月5日，QQ浏览器小程序宣布可以与微信小程序打通。安卓版的QQ浏览器现在上线了小程序。在搜索场景中，小程序作为直接的内容载体嵌入到QQ浏览器“Search Direct”中。用户在搜索框输入关键词后，相关小程序会在关键词智能推荐列表中优先推荐，直接显示相关内容。天气、腾讯翻译君等小程序已经成功入驻。此外，QQ浏览器小程序与微信小程序兼容，声称开发者完成适配“只需三步”，将微信小程序移植到QQ浏览器上运行。

知道节目也在第一时间经历了整个改编过程，接下来我们会一一讲解细节和关注点。值得一提的是，腾讯官方称QQ Browser小程序为QB小程序，听到这个名字你会有一种奇妙的感觉。并注册QB小程序调试工具。在您正式开始调试之前，我们需要提醒您以下三点：目前开发者工具仅支持Android

小程序的官方名称、图标、简介都是用户可见的，填写后暂时没有办法修改，所以填写时要小心；

QBugkey是设备独有的，每个手机都会生成一个QBugkey。

目前QB小程序的调试页面和介绍页面还很初级，没有相关的PC端开发工具，所以开发者还是需要在微信开发者工具上完成小程序的开发，然后适配成QB小程序。1.使用微信扫描二维码进入QB小程序调试页面。

扫描二维码后，页面可能会提示“调试内核版本太旧”。你需要按照提示，在识别页面按二维码，下载安装最新版本的调试内核。安装完成后，再次扫描上面的二维码进入。2.进入调试页面后，需要先完成“注册”。在注册页面上：packageName是小程序的唯一标识符。一旦注册成功，packageName将在后台与qbDebugKey绑定。注册后，只有当前设备可以使用此packageName登录。如果需要将其他开发设备绑定到此packageName，可以在登录后添加。

开发者的昵称是qbDebugKey的别名，方便开发者管理开发设备。

用户可以看到小程序的官方名称、图标和简要介绍。注册后暂不提供修改方式。请仔细填写。

同时需要在微信小程序的app.json配置文件中添加qbDebugKey，如下图：{ ' window ' : { ' navigation barbakgroundcolor ' : ' # fff '，'导航栏标题栏文字' : '了解课堂现状。

t;, "navigationBarTextStyle": "black", "qbDebugKey": ["495f18a64485eeac5e78ccbxxx", "7e2f29d50e78411b3915128exxx"] },}

注意：只有在app.json里配置过测试机生成的qbDebugKey，测试机才能使用 QQ 浏览器小程序调试工具调试该小程序。一台手机对应一个qbDebugKey。

3. 如果你完成了注册或已有其他开发者为你添加了开发权限，输入对应小程序并点击「登录」按钮进入进入开发者管理后台页面。

在此页面中，你可以点击「开发者权限管理」添加其它开发设备，需要输入待添加设备的qbDebugKey和昵称，添加成功后，新设备就可以使用该packageName进行登录了。

安装调试版 QQ 浏览器

点击「启动 QB 打开小程序」按钮，如果没有下载调试版 QQ 浏览器，这步操作会下载调试版 QQ 浏览器。

如果你手机中未安装 QQ 浏览器或安装的版本非正确的调试版本，在点击后会提示「请先下载调试版 QQ 浏览器」，按照提示再次点击按钮即可开始下载安装；安装完成后再次回该页面点击启动按钮即可拉起 QQ 浏览器启动要调试的小程序。

调试兼容性

在以上两步完成后，接下来我们需要调试兼容性，直到小程序能够跑起来。这里主要注意 QB 小程序和微信小程序的几点区别：

• QB 小程序的登录态与微信小程序不互通，并且没有unionId概念

• QB 小程序不支持自定义导航栏颜色

• QB 小程序的canvas不支持measureText, 意味着没有办法在canvas上进行文本换行

• QB 小程序不支持下拉刷新

• QB 小程序的intersectionObserver无法使用

• QB 小程序不支持模版消息

• QB 小程序不支持打开跳转其他小程序

• 微信强相关的 API 都不支持

这里主要的适配参考 QB 小程序适配文档，在「知晓程序」微信后台回复「QB」即可获取 QB 小程序的相关开发文档。

提交预览，在 QQ 浏览器打开

处理好了兼容性问题之后，就可以在QQ浏览器中预览小程序了。

1. 首先在 QB 小程序调试工具中点击「微信扫码」 按钮，扫描微信开发者工具中预览生成的二维码，此时会进入到微信环境下的小程序，先点击右上角圆点退出小程序，返回到 QB 小程序调试工具中。

2. 然后点击「启动 QB 打开小程序」按钮，在已安装好调试版 QQ 浏览器情况下，会自动跳转到 QQ 浏览器小程序环境，进入后就能看到效果。

▲ 在 QQ 浏览器中的预览效果

3. 预览没问题之后就可以上传一个体验版，输入版本号，上传成功后会有一个 url 返回，复制这个 url 到 QQ 浏览器中就能打开小程序了。

4. 关于分享问题。QQ 浏览器小程序可以分享到微信朋友圈、微信好友、QQ 好友、QQ 空间，和微信小程序分享不同的是，QQ 浏览器小程序分享是创建一张分享海报，里面有 QQ 浏览器小程序二维码，在安卓手机中长按识别即可自动打开小程序。

提交审核并上线

体验版测试没问题之后，在 QB 小程序调试工具中点击「包状态管理」，进入到提交包的历史列表，点击需要提审的版本提交审核。

审核通过后即可上线发布。