基於騰訊X5內核的混合APP開發模式

這是一個移動互聯的時代，這是一個屬於Android，屬於iOS的時代，在響應大衆創業萬衆創新的號召下，愈來愈多的開發者轉向了移動開發的領域。在Android，iOS剛剛興起的時候，對於開發者而言，要開發一整套完整的App是一件相對困難的事情，由於假如須要支持的移動系統越多，須要學習的編程語言、開發平臺也就越多。例如你須要學習Java從而開發Android，你須要學習Object-C從而開發iOS。
這也就是所謂的原生開發模式，相信早期進入移動開發的程序員們對原生開發模式之痛深有感觸，雖然體驗感性能都很是的好，但複雜的開發維護成本令很多開發者不勝其煩。H5相關技術的流行給程序員帶來了福音,由於經過H5製做的前端頁面具備先天的跨平臺性，這樣咱們就能夠在一套統一的界面下實現不一樣移動系統的交互了，這就是如今流行的Web App以及Hybrid App開發模式.當前相對於純粹的Web App而言,HybridApp 具備更強大的能力，2者的比較請見下圖:

從圖中可見，Hybrid App相對WebApp最主要的能力就在於能夠經過一些中間件調用到手機底層的物理設備,例如傳感器,攝像頭等等,加強與用戶的交互性。而WebApp只是一個純粹的html界面,更主要是作數據的呈現而已。但不論是Hybrid App仍是WebApp,在手機設備上面運行的時候都是藉助WebView組件來對h5界面進行渲染展現的，因此能夠這樣說，WebView的能力直接決定了Hybrid / WebApp的前端交互能力。相信不少直接使用默認WebView組件呈現h5的開發者都有一種直觀的感受,就算h5頁面中圖片與文本信息並很少,但在WebView中展現的時候都會出現拖拽不流暢，切換留白,窗口閃爍等的現象，這就是WebView自身渲染能力不強的問題所致。今天這編文章不打算細緻分析WebView內核的實現,而是引導讀者如何使用騰訊的X5內核去替代系統內置的WebView，解決手機系統默認WebView能力不足的情況。
騰訊X5瀏覽服務是致力於優化移動端WebView體驗的解決方案,由QQ瀏覽器團隊出品,使用騰訊X5瀏覽服務內核SDK和騰訊X5瀏覽服務雲端服務,解決移動端WebView使用過程當中出現的拖拽不流暢,切換留白,窗口閃爍等問題。通過筆者測試, 性能提高比較明顯, 對採用WebApp與HybridApp開發模式的程序員來講是一個很是值得推薦的選擇，它的具體優勢有:

1)速度快：相比系統WebView的網頁加載速度有近30%的提高

2)省流量：雲端優化技術使流量節省20%

3)更安全：24小時安全問題解決機制

4)更穩定：通過億級用戶的使用考驗，crash率0.15%

5)集成強大的視頻播放器，支持各類視頻格式直接打開

6)適屏排版、字體設置等瀏覽加強功能的提供

(注意,Appcan原先的h5界面假如直接在X5內核中展現,默認狀況下會影響原先的排版佈局的,須要藉助viewport進行從新排版.在注意事項中有說明)

7)HTML5更完整支持

8)無系統碎片化問題、更少的兼容性問題

下面咱們來引導一下這個內核的使用方式。

1. 首先咱們應該先訪問連接描述,點擊導航欄中的"開發者後臺"功能.
   

2. 利用本身的QQ帳號進行登陸
   

3. 登陸完畢後,填寫信息登記
   

4. 填寫完畢後,就能夠進入開發者後臺了
   

5. 點擊"添加"按鈕,新建應用, 設置應用相關信息,提交後將獲得應用的Appke
   

1. 訪問http://x5.tencent.com/doc?id=1004,這是接入指南,建議程序員多看,但想吐槽一下,即使是一線服務商了,但百度也好,騰訊也好在開發文檔完善性方面仍是要有待增強,不然程序員就要耗費更多的時間精力進行摸索.
   

1. 下載Android SDK以及接口示例,過程不表

2. 點擊"接入文檔",按要求操做:
   1) 複製sdk jar到工程的libs目錄下

2) 對原先項目中全部與WebView組件相關的類庫進行替換,更換爲騰訊 WebView相關組件.替換規範爲


如我項目代碼所示,這是更換後的結果:

3) 替換layout佈局文件中的WebView,改成騰訊的WebView. 如我項目代碼所示,這是更換後的結果:

4) 聲明權限,下面是涉及到的全部權限

<uses-permission Android:name="Android.permission.INTERNET" />
    <uses-permission Android:name="Android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission Android:name="Android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission Android:name="Android.permission.ACCESS_WIFI_STATE" />
    <uses-permission Android:name="Android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission Android:name="Android.permission.READ_PHONE_STATE" />
    <uses-permission Android:name="Android.permission.READ_SETTINGS" />
    <uses-permission Android:name="Android.permission.WRITE_SETTINGS" />
    <uses-permission Android:name="Android.permission.MOUNT_UNMOUNT_FILESYSTEMS" />
    <uses-permission Android:name="Android.permission.READ_EXTERNAL_STORAGE" />
   <!-- 硬件加速對X5視頻播放很是重要，建議開啓 -->
<uses-permission Android:name="Android.permission.GET_TASKS" />

5) 在Application標籤中聲明Appkey.

<meta-data
        Android:name="QBSDKAppKey"
        Android:value="ohhDlM1XPcmVpSYpWZWJAQat" />

1. 大功告成, 如下是注意事項說明:

   1) 假如咱們本身開發的頁面是基於Appcan的,須要把viewport修改成下面的形式,不然樣式會變小
   <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,minimum-scale=1,maximum-scale=1" />      
   
   2) 在設置啓動Javascript以前先設置js服務類,測試發現不是這個順序的話會找不到服務類對象
   WebView.addJavascriptInterface(new ProductsInfoActivityJSService(

   this), "Javahelper"); // 這在前

   WebView.getSettings().setJavaScriptEnabled(true);  // js啓動在後
   
   3) 在騰訊的WebView中,數據類型監測更加嚴格.例如服務類中某個方法假如參數類型設置爲String的話,那麼js調動這個方法的時候須要注意好類型的匹配

   如:

服務類方法-參數爲String:

@JavascriptInterface
public void showProductById(String id){

Intent i = new Intent(context, ProductInfoActivity.class);
i.putExtra("pid", id);
context.startActivity(i);
}

js調用此方法-須要確保參數也爲string:

function loadProductByCID(cid){
cid = cid.toString();
    Javahelper.showProducts(cid);

// 調用服務類完成窗口的跳轉 }