hybridApp 混合編程 前端嵌入步驟

hybridApp 混合編程


步驟分析：
①編寫前端代碼，測試在pc端是否能夠達到效果 index.html
②將前端代碼拷貝到android工程中的assets目錄
③藉助原生組件WebView，將前端代碼顯示在android的視圖中


WebView組件:網絡視圖組件，可以加載前端代碼
//實例化WebView的一個對象
WebView wv = new WebView(getApplicationContext());


//使用wv來加載頁面

wv.loadUrl("file:///android_asset/index.html");

//如果要想混合編程app能夠執行js，必須添加設置：
wv.getSettings().setJavaScriptEnabled(true);

//將wv作爲activity的內容視圖

setContentView(wv);

設置能夠查看console.log所輸入的日誌：
        wv.setWebChromeClient(
        new WebChromeClient(){
        @Override
        @Deprecated
        public void onConsoleMessage(String message,
        int lineNumber, String sourceID) {
        // TODO Auto-generated method stub
        Log.e("test",
        "行號爲:"+lineNumber+
        " 輸入內容爲:"+message);
        super.onConsoleMessage(message, lineNumber, sourceID);
        }
        });

實現混合編程的兩種方式：
1、直接將前端代碼 放到assets目錄中
2、將前端代碼都部署在服務器端，拿到url，載入並顯示
基本步驟：
①在pc端完成代碼的編輯，能夠正常訪問和瀏覽
②將代碼部署在服務器端（apache和mySql）
③拿到Url：得到當前機器的ip地址：windows+R-->cmd-->ipconfig-》找到IPv4的地址就可以了。
172.163.100.78 將之前訪問工程的localhost改成ip地址。
http://localhost/chaptor4/angularJS/kaifanla/kaifanla.html
==》
http://172.163.100.78/chaptor4/angularJS/kaifanla/kaifanla.html
④配置webView，載入指定的url
⑤添加網絡權限，運行看效果。