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