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

继微信、QQ 之后，QQ 浏览器上也可以使用小程序了。

12 月 5 日，QQ 浏览器小程序宣布，实现与微信小程序打通。QQ 浏览器 Android 版现已上线小程序，在搜索的场景下，小程序嵌入 QQ 浏览器「搜索直达」，作为直接的内容承载。用户在搜索框输入关键词后，相关小程序会在关键词智能推荐列表优先推荐，并直接展示相关内容。墨迹天气、腾讯翻译君等小程序已经成功入驻。

除此之外，QQ 浏览器小程序兼容适配了微信小程序，号称「只需三步」开发者即可完成适配工作将微信小程序移植到 QQ 浏览器上运行。

知晓程序也在第一时间体验了整个适配过程，接下来将为大家一一讲解其中的细节和关注点。值得一提的是，腾讯官方将 QQ 浏览器（QQ Browser）小程序称为 QB 小程序，听到这个名字想必大家会有种奇妙的感觉。

安装并注册 QB 小程序调试工具

在你正式上手调试前，我们需要提醒以下三点注意事项：

目前开发者工具只支持安卓；
小程序的正式名称、图标和简介是用户可见的，并且填写完成后暂时没有办法修改，所以填写一定要谨慎；
qbDebugKey 是设备唯一的，每台手机都会生成一个 qbDebugKey。

目前 QB 小程序的调试页面和介绍页面还十分简陋，也没有相关的 PC 端开发工具，所以开发者仍需在微信开发者工具上完成小程序的开发，然后适配成 QB 小程序。

1. 使用微信扫描二维码进入 QB 小程序调试页面。

扫描二维码后，页面可能会提示「调试内核版本过旧」，需按照提示长按识别页面中的二维码下载安装最新版调试内核，安装完成后再重新扫描上方二维码进入。

2. 进入调试页面后，需先完成「注册」。在注册页面中：

packageName 是小程序的唯一标识，一旦注册成功，packageName 会在后台与 qbDebugKey 绑定，注册后只有当前设备可以使用这个 packageName 进行登录，如果需要给这个 packageName 绑定其他开发设备，可以在登录后进行添加。
开发者昵称是 qbDebugKey 的别名，方便开发者管理开发设备。
小程序的正式名称、图标和简介是用户可见的，注册完成后暂时不提供修改方法，请谨慎填写。

同时，你需要将 qbDebugKey 添加到微信小程序的 app.json 配置文件里，如下所示：

{
  "window": {
    "navigationBarBackgroundColor": "#FFF",
     "navigationBarTitleText": "知晓课堂",
     "navigationBarTextStyle": "black",
    "qbDebugKey": ["495f18a64485eeac5e78ccbxxx", "7e2f29d50e78411b3915128exxx"]
  },
}

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

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

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