這是一個(gè)移動(dòng)互聯(lián)的時(shí)代，這是一個(gè)屬于Android刻像，屬于iOS的時(shí)代畅买，在響應(yīng)大眾創(chuàng)業(yè)萬(wàn)眾創(chuàng)新的號(hào)召下，越來越多的開發(fā)者轉(zhuǎn)向了移動(dòng)開發(fā)的領(lǐng)域细睡。在Android谷羞，iOS剛剛興起的時(shí)候，對(duì)于開發(fā)者而言溜徙，要開發(fā)一整套完整的App是一件相對(duì)困難的事情湃缎，因?yàn)榧偃缧枰С值囊苿?dòng)系統(tǒng)越多，需要學(xué)習(xí)的編程語(yǔ)言蠢壹、開發(fā)平臺(tái)也就越多嗓违。例如你需要學(xué)習(xí)Java從而開發(fā)Android，你需要學(xué)習(xí)Object-C從而開發(fā)iOS图贸。
這也就是所謂的原生開發(fā)模式蹂季，相信早期進(jìn)入移動(dòng)開發(fā)的程序員們對(duì)原生開發(fā)模式之痛深有感觸冕广，雖然體驗(yàn)感性能都非常的好，但復(fù)雜的開發(fā)維護(hù)成本令不少開發(fā)者不勝其煩偿洁。H5相關(guān)技術(shù)的流行給程序員帶來了福音,因?yàn)橥ㄟ^H5制作的前端頁(yè)面具有先天的跨平臺(tái)性撒汉，這樣我們就可以在一套統(tǒng)一的界面下實(shí)現(xiàn)不同移動(dòng)系統(tǒng)的交互了，這就是現(xiàn)在流行的Web?App以及Hybrid?App開發(fā)模式.當(dāng)前相對(duì)于純粹的Web?App而言,HybridApp?具有更強(qiáng)大的能力涕滋，2者的比較請(qǐng)見下圖:
從圖中可見睬辐，Hybrid?App相對(duì)WebApp最主要的能力就在于可以通過一些中間件調(diào)用到手機(jī)底層的物理設(shè)備,例如傳感器,攝像頭等等,增強(qiáng)與用戶的交互性。而WebApp只是一個(gè)純粹的html界面,更主要是做數(shù)據(jù)的呈現(xiàn)而已何吝。但不管是Hybrid?App還是WebApp,在手機(jī)設(shè)備上面運(yùn)行的時(shí)候都是借助WebView組件來對(duì)h5界面進(jìn)行渲染展示的溉委，所以可以這樣說鹃唯，WebView的能力直接決定了Hybrid?/ WebApp的前端交互能力爱榕。相信很多直接使用默認(rèn)WebView組件呈現(xiàn)h5的開發(fā)者都有一種直觀的感覺,就算h5頁(yè)面中圖片與文本信息并不多,但在WebView中展示的時(shí)候都會(huì)出現(xiàn)拖拽不流暢，切換留白,窗口閃爍等的現(xiàn)象坡慌，這就是WebView自身渲染能力不強(qiáng)的問題所致黔酥。今天這編文章不打算細(xì)致分析WebView內(nèi)核的實(shí)現(xiàn),而是引導(dǎo)讀者如何使用騰訊的X5內(nèi)核去替代系統(tǒng)內(nèi)置的WebView，解決手機(jī)系統(tǒng)默認(rèn)WebView能力不足的狀況洪橘。
騰訊X5瀏覽服務(wù)是致力于優(yōu)化移動(dòng)端WebView體驗(yàn)的解決方案,由QQ瀏覽器團(tuán)隊(duì)出品,使用騰訊X5瀏覽服務(wù)內(nèi)核SDK和騰訊X5瀏覽服務(wù)云端服務(wù),解決移動(dòng)端WebView使用過程中出現(xiàn)的拖拽不流暢,切換留白,窗口閃爍等問題跪者。經(jīng)過筆者測(cè)試, 性能提升比較明顯, 對(duì)采用WebApp與HybridApp開發(fā)模式的程序員來說是一個(gè)非常值得推薦的選擇，它的具體優(yōu)點(diǎn)有:
1)速度快：相比系統(tǒng)WebView的網(wǎng)頁(yè)加載速度有近30%的提升
2)省流量：云端優(yōu)化技術(shù)使流量節(jié)省20%
3)更安全：24小時(shí)安全問題解決機(jī)制
4)更穩(wěn)定：經(jīng)過億級(jí)用戶的使用考驗(yàn)熄求，crash率0.15%
5)集成強(qiáng)大的視頻播放器渣玲，支持各種視頻格式直接打開
6)適屏排版、字體設(shè)置等瀏覽增強(qiáng)功能的提供
(注意,Appcan原先的h5界面假如直接在X5內(nèi)核中展示,默認(rèn)情況下會(huì)影響原先的排版布局的,需要借助viewport進(jìn)行重新排版.在注意事項(xiàng)中有說明)
7)HTML5更完整支持
8)無系統(tǒng)碎片化問題弟晚、更少的兼容性問題
下面我們來引導(dǎo)一下這個(gè)內(nèi)核的使用方式忘衍。
1. 首先我們應(yīng)該先訪問http://x5.tencent.com/,點(diǎn)擊導(dǎo)航欄中的"開發(fā)者后臺(tái)"功能.
2. 利用自己的QQ賬號(hào)進(jìn)行登錄
3. 登錄完畢后,填寫信息登記
4. 填寫完畢后,就可以進(jìn)入開發(fā)者后臺(tái)了
5. 點(diǎn)擊"添加"按鈕,新建應(yīng)用, 設(shè)置應(yīng)用相關(guān)信息,提交后將得到應(yīng)用的Appke
6. 訪問http://x5.tencent.com/doc?id=1004,這是接入指南,建議程序員多看,但想吐槽一下,即便是一線服務(wù)商了,但百度也好,騰訊也好在開發(fā)文檔完善性方面還是要有待加強(qiáng),否則程序員就要耗費(fèi)更多的時(shí)間精力進(jìn)行摸索.
7. 下載Android?SDK以及接口示例,過程不表
8. 點(diǎn)擊"接入文檔",按要求操作:
1) 復(fù)制sdk jar到工程的libs目錄下
2) 對(duì)原先項(xiàng)目中所有與WebView組件相關(guān)的類庫(kù)進(jìn)行替換,更換為騰訊 WebView相關(guān)組件.替換規(guī)范為
如我項(xiàng)目代碼所示,這是更換后的結(jié)果:
3) 替換layout布局文件中的WebView,改為騰訊的WebView. 如我項(xiàng)目代碼所示,這是更換后的結(jié)果:
4) 聲明權(quán)限,下面是涉及到的所有權(quán)限
"Android.permission.INTERNET"/>
"Android.permission.ACCESS_NETWORK_STATE"/>
"Android.permission.WRITE_EXTERNAL_STORAGE"/>
"Android.permission.ACCESS_WIFI_STATE"/>
"Android.permission.ACCESS_NETWORK_STATE"/>
"Android.permission.READ_PHONE_STATE"/>
"Android.permission.READ_SETTINGS"/>
"Android.permission.WRITE_SETTINGS"/>
"Android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/>
"Android.permission.READ_EXTERNAL_STORAGE"/>
"Android.permission.GET_TASKS"/>
5) 在Application標(biāo)簽中聲明Appkey.
Android:name="QBSDKAppKey"
Android:value="ohhDlM1XPcmVpSYpWZWJAQat"/>
9. 大功告成, 以下是注意事項(xiàng)說明:
1) 假如我們自己開發(fā)的頁(yè)面是基于Appcan的,需要把viewport修改為下面的形式,否則樣式會(huì)變小
2) 在設(shè)置啟動(dòng)Javascript之前先設(shè)置js服務(wù)類,測(cè)試發(fā)現(xiàn)不是這個(gè)順序的話會(huì)找不到服務(wù)類對(duì)象
WebView.addJavascriptInterface(newProductsInfoActivityJSService(
this),"Javahelper");???// 這在前
WebView.getSettings().setJavaScriptEnabled(true);??// js啟動(dòng)在后
3) 在騰訊的WebView中,數(shù)據(jù)類型監(jiān)測(cè)更加嚴(yán)格.例如服務(wù)類中某個(gè)方法假如參數(shù)類型設(shè)置為String的話,那么js調(diào)動(dòng)這個(gè)方法的時(shí)候需要注意好類型的匹配
如:
服務(wù)類方法-參數(shù)為String:
@JavascriptInterface
publicvoidshowProductById(String id){
Intent i =newIntent(context, ProductInfoActivity.class);
i.putExtra("pid", id);
context.startActivity(i);
}
js調(diào)用此方法-需要確保參數(shù)也為string:
functionloadProductByCID(cid){
cid=cid.toString();
Javahelper.showProducts(cid);// 調(diào)用服務(wù)類完成窗口的跳轉(zhuǎn)
}
