手把手教你遷移微信小程式到 QQ 瀏覽器

知曉雲發表於2018-12-18

繼微信、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。

如果你完成了註冊或已有其他開發者為你新增了開發許可權，輸入對應小程式並點選「登入」按鈕進入進入開發者管理後臺頁面。

在此頁面中，你可以點選「開發者許可權管理」新增其它開發裝置，需要輸入待新增裝置的 qbDebugKey 和暱稱，新增成功後，新裝置就可以使用該 packageName 進行登入了。

安裝除錯版 QQ 瀏覽器

點選「啟動 QB 開啟小程式」按鈕，如果沒有下載除錯版 QQ 瀏覽器，這步操作會下載除錯版 QQ 瀏覽器。

如果你手機中未安裝 QQ 瀏覽器或安裝的版本非正確的除錯版本，在點選後會提示「請先下載除錯版 QQ 瀏覽器」，按照提示再次點選按鈕即可開始下載安裝；安裝完成後再次回該頁面點選啟動按鈕即可拉起 QQ 瀏覽器啟動要除錯的小程式。

除錯相容性

在以上兩步完成後，接下來我們需要除錯相容性，直到小程式能夠跑起來。這裡主要注意 QB 小程式和微信小程式的幾點區別：

QB 小程式的登入態與微信小程式不互通，並且沒有 unionId 概念
QB 小程式不支援自定義導航欄顏色
QB 小程式的 canvas 不支援 measureText, 意味著沒有辦法在 canvas 上進行文字換行
QB 小程式不支援下拉重新整理
QB 小程式的 intersectionObserver 無法使用
QB 小程式不支援模版訊息
QB 小程式不支援開啟跳轉其他小程式
微信強相關的 API 都不支援

這裡主要參考QQ瀏覽器小程式開發者文件。

提交預覽，在 QQ 瀏覽器開啟

處理好了相容性問題之後，就可以在QQ瀏覽器中預覽小程式了。

首先在 QB 小程式除錯工具中點選「微信掃碼」按鈕，掃描微信開發者工具中預覽生成的二維碼，此時會進入到微信環境下的小程式，先點選右上角圓點退出小程式，返回到 QB 小程式除錯工具中。
然後點選「啟動 QB 開啟小程式」按鈕，在已安裝好除錯版 QQ 瀏覽器情況下，會自動跳轉到 QQ 瀏覽器小程式環境，進入後就能看到效果。
▲ 在 QQ 瀏覽器中的預覽效果
預覽沒問題之後就可以上傳一個體驗版，輸入版本號，上傳成功後會有一個 url 返回，複製這個 url 到 QQ 瀏覽器中就能開啟小程式了。
關於分享問題。QQ 瀏覽器小程式可以分享到微信朋友圈、微信好友、QQ 好友、QQ 空間，和微信小程式分享不同的是，QQ 瀏覽器小程式分享是建立一張分享海報，裡面有 QQ 瀏覽器小程式二維碼，在安卓手機中長按識別即可自動開啟小程式。