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

繼微信、QQ 以後，QQ 瀏覽器上也可使用小程序了。

12 月 5 日，QQ瀏覽器小程序宣佈，實現與微信小程序打通。QQ 瀏覽器 Android 版現已上線小程序，在搜索的場景下，小程序嵌入 QQ 瀏覽器「搜索直達」，做爲直接的內容承載。用戶在搜索框輸入關鍵詞後，相關小程序會在關鍵詞智能推薦列表優先推薦，並直接展現相關內容。墨跡天氣、騰訊翻譯君等小程序已經成功入駐。

除此以外，QQ 瀏覽器小程序兼容適配了微信小程序，號稱「只需三步」開發者便可完成適配工做將微信小程序移植到 QQ 瀏覽器上運行。

知曉程序也在第一時間體驗了整個適配過程，接下來將爲你們一一講解其中的細節和關注點。值得一提的是，騰訊官方將 QQ 瀏覽器（QQ Browser）小程序稱爲 QB 小程序，聽到這個名字想必你們會有種奇妙的感受。

安裝並註冊 QB 小程序調試工具

在你正式上手調試前，咱們須要提醒如下三點注意事項：

1. 目前開發者工具只支持安卓；
2. 小程序的正式名稱、圖標和簡介是用戶可見的，而且填寫完成後暫時沒有辦法修改，因此填寫必定要謹慎；
3. 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.若是你完成了註冊或已有其餘開發者爲你添加了開發權限，輸入對應小程序 並點擊「登陸」按鈕進入進入開發者管理後臺頁面。

在此頁面中，你能夠點擊「開發者權限管理」添加其它開發設備，須要輸入待添加設備的 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瀏覽器中預覽小程序了。

1.首先在 QB 小程序調試工具中點擊「微信掃碼」 按鈕，掃描微信開發者工具中預覽生成的二維碼，此時會進入到微信環境下的小程序，先點擊右上角圓點退出小程序，返回到 QB 小程序調試工具中。

2.而後點擊「啓動 QB 打開小程序」按鈕，在已安裝好調試版 QQ 瀏覽器狀況下，會自動跳轉到 QQ 瀏覽器小程序環境，進入後就能看到效果。

▲ 在 QQ 瀏覽器中的預覽效果

3.預覽沒問題以後就能夠上傳一個體驗版，輸入版本號，上傳成功後會有一個 url 返回，複製這個 url 到 QQ 瀏覽器中就能打開小程序了。

4.關於分享問題。QQ 瀏覽器小程序能夠分享到微信朋友圈、微信好友、QQ 好友、QQ 空間，和微信小程序分享不一樣的是，QQ 瀏覽器小程序分享是建立一張分享海報，裏面有 QQ 瀏覽器小程序二維碼，在安卓手機中長按識別便可自動打開小程序。

提交審覈並上線

體驗版測試沒問題以後，在 QB 小程序調試工具中點擊「包狀態管理」，進入到提交包的歷史列表，點擊須要提審的版本提交審覈。

審覈經過後便可上線發佈。

---

本文首發於「知曉雲」公衆號：https://mp.weixin.qq.com/s/Jo...

若是你還想了解 更多小程序開發技巧，快速掌握小程序開發能力。

歡迎掃描下方二維碼關注「知曉雲」，咱們會持續爲更新與小程序有關的實戰教程哦～