繼微信、QQ 之后，QQ 瀏覽器上也可以使用小程序了。
12 月 5 日，QQ瀏覽器小程序宣布，實現(xiàn)與微信小程序打通。QQ 瀏覽器 Android 版現(xiàn)已上線小程序，在搜索的場景下，小程序嵌入 QQ 瀏覽器「搜索直達」，作為直接的內(nèi)容承載。用戶在搜索框輸入關(guān)鍵詞后，相關(guān)小程序會在關(guān)鍵詞智能推薦列表優(yōu)先推薦，并直接展示相關(guān)內(nèi)容。墨跡天氣、騰訊翻譯君等小程序已經(jīng)成功入駐。
除此之外，QQ 瀏覽器小程序兼容適配了微信小程序，號稱「只需三步」開發(fā)者即可完成適配工作將微信小程序移植到 QQ 瀏覽器上運行。
知曉程序也在第一時間體驗了整個適配過程，接下來將為大家一一講解其中的細節(jié)和關(guān)注點。值得一提的是，騰訊官方將 QQ 瀏覽器（QQ Browser）小程序稱為 QB 小程序，聽到這個名字想必大家會有種奇妙的感覺。
在你正式上手調(diào)試前，我們需要提醒以下三點注意事項：
-
目前開發(fā)者工具只支持安卓；
-
小程序的正式名稱、圖標(biāo)和簡介是用戶可見的，并且填寫完成后暫時沒有辦法修改，所以填寫一定要謹(jǐn)慎；
-
qbDebugKey 是設(shè)備唯一的，每臺手機都會生成一個 qbDebugKey。
目前 QB 小程序的調(diào)試頁面和介紹頁面還十分簡陋，也沒有相關(guān)的 PC 端開發(fā)工具，所以開發(fā)者仍需在微信開發(fā)者工具上完成小程序的開發(fā)，然后適配成 QB 小程序。
1. 使用微信掃描二維碼進入 QB 小程序調(diào)試頁面。
掃描二維碼后，頁面可能會提示「調(diào)試內(nèi)核版本過舊」，需按照提示長按識別頁面中的二維碼下載安裝最新版調(diào)試內(nèi)核，安裝完成后再重新掃描上方二維碼進入。
2. 進入調(diào)試頁面后，需先完成「注冊」。在注冊頁面中：
-
packageName 是小程序的唯一標(biāo)識，一旦注冊成功，packageName 會在后臺與 qbDebugKey 綁定，注冊后只有當(dāng)前設(shè)備可以使用這個 packageName 進行登錄，如果需要給這個 packageName 綁定其他開發(fā)設(shè)備，可以在登錄后進行添加。
-
開發(fā)者昵稱是 qbDebugKey 的別名，方便開發(fā)者管理開發(fā)設(shè)備。
-
小程序的正式名稱、圖標(biāo)和簡介是用戶可見的，注冊完成后暫時不提供修改方法，請謹(jǐn)慎填寫。
同時，你需要將 qbDebugKey 添加到微信小程序的 app.json 配置文件里，如下所示：
{
"window": {
"navigationBarBackgroundColor": "#FFF",
"navigationBarTitleText": "知曉課堂",
"navigationBarTextStyle": "black",
"qbDebugKey": ["495f18a64485eeac5e78ccbxxx", "7e2f29d50e78411b3915128exxx"]
},
}
注意：只有在 app.json 里配置過測試機生成的 qbDebugKey，測試機才能使用 QQ 瀏覽器小程序調(diào)試工具調(diào)試該小程序。一臺手機對應(yīng)一個 qbDebugKey。
3. 如果你完成了注冊或已有其他開發(fā)者為你添加了開發(fā)權(quán)限，輸入對應(yīng)小程序 并點擊「登錄」按鈕進入進入開發(fā)者管理后臺頁面。
在此頁面中，你可以點擊「開發(fā)者權(quán)限管理」添加其它開發(fā)設(shè)備，需要輸入待添加設(shè)備的 qbDebugKey 和昵稱，添加成功后，新設(shè)備就可以使用該 packageName 進行登錄了。
點擊「啟動 QB 打開小程序」按鈕，如果沒有下載調(diào)試版 QQ 瀏覽器，這步操作會下載調(diào)試版 QQ 瀏覽器。
如果你手機中未安裝 QQ 瀏覽器或安裝的版本非正確的調(diào)試版本，在點擊后會提示「請先下載調(diào)試版 QQ 瀏覽器」，按照提示再次點擊按鈕即可開始下載安裝；安裝完成后再次回該頁面點擊啟動按鈕即可拉起 QQ 瀏覽器啟動要調(diào)試的小程序。
在以上兩步完成后，接下來我們需要調(diào)試兼容性，直到小程序能夠跑起來。這里主要注意 QB 小程序和微信小程序的幾點區(qū)別：
-
QB 小程序的登錄態(tài)與微信小程序不互通，并且沒有 unionId 概念
-
QB 小程序不支持自定義導(dǎo)航欄顏色
-
QB 小程序的 canvas 不支持 measureText, 意味著沒有辦法在 canvas 上進行文本換行
-
QB 小程序不支持下拉刷新
-
QB 小程序的 intersectionObserver 無法使用
-
QB 小程序不支持模版消息
-
QB 小程序不支持打開跳轉(zhuǎn)其他小程序
-
微信強相關(guān)的 API 都不支持
這里主要的適配參考 QB 小程序適配文檔，在「知曉程序」微信后臺回復(fù)「QB」即可獲取 QB 小程序的相關(guān)開發(fā)文檔。
處理好了兼容性問題之后，就可以在QQ瀏覽器中預(yù)覽小程序了。
1. 首先在 QB 小程序調(diào)試工具中點擊「微信掃碼」 按鈕，掃描微信開發(fā)者工具中預(yù)覽生成的二維碼，此時會進入到微信環(huán)境下的小程序，先點擊右上角圓點退出小程序，返回到 QB 小程序調(diào)試工具中。
2. 然后點擊「啟動 QB 打開小程序」按鈕，在已安裝好調(diào)試版 QQ 瀏覽器情況下，會自動跳轉(zhuǎn)到 QQ 瀏覽器小程序環(huán)境，進入后就能看到效果。
3. 預(yù)覽沒問題之后就可以上傳一個體驗版，輸入版本號，上傳成功后會有一個 url 返回，復(fù)制這個 url 到 QQ 瀏覽器中就能打開小程序了。
4. 關(guān)于分享問題。QQ 瀏覽器小程序可以分享到微信朋友圈、微信好友、QQ 好友、QQ 空間，和微信小程序分享不同的是，QQ 瀏覽器小程序分享是創(chuàng)建一張分享海報，里面有 QQ 瀏覽器小程序二維碼，在安卓手機中長按識別即可自動打開小程序。
體驗版測試沒問題之后，在 QB 小程序調(diào)試工具中點擊「包狀態(tài)管理」，進入到提交包的歷史列表，點擊需要提審的版本提交審核。
|
