Android應用之Hybird混合開發，集成web頁面的方法嘗試

總結下要點：

１.在Android項目代碼目錄的app/src/main目錄下面創建個assets文件夾。

再在裏面創建個web目錄。把web的代碼放進去。如：

２.Android應用中，activity佈局界面上放置一個webview。

並做相關的配置：

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_second);

        WebView webView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = webView.getSettings();
//如果訪問的頁面中要與Javascript交互，則webview必須設置支持Javascript
        webSettings.setJavaScriptEnabled(true);
// 若加載的 html 裏有JS 在執行動畫等操作，會造成資源浪費（CPU、電量）
// 在 onStop 和 onResume 裏分別把 setJavaScriptEnabled() 給設置成 false 和 true 即可
//支持插件
        //webSettings.setPluginsEnabled(true);
//設置自適應屏幕，兩者合用
        webSettings.setUseWideViewPort(true); //將圖片調整到適合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 縮放至屏幕的大小

//縮放操作
        webSettings.setSupportZoom(true); //支持縮放，默認爲true。是下面那個的前提。
        webSettings.setBuiltInZoomControls(true); //設置內置的縮放控件。若爲false，則該WebView不可縮放
        webSettings.setDisplayZoomControls(false); //隱藏原生的縮放控件

//其他細節操作
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //關閉webview中緩存
        webSettings.setAllowFileAccess(true); //設置可以訪問文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通過JS打開新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自動加載圖片
        webSettings.setDefaultTextEncodingName("utf-8");//設置編碼格式

        // 設置可以訪問文件
        webSettings.setAllowFileAccess(true);
        webSettings.setAllowFileAccessFromFileURLs(true);
        webSettings.setAllowContentAccess(true);
        webSettings.setDomStorageEnabled(true);
        webView.getSettings().setAllowFileAccessFromFileURLs(true);

        webView.setWebViewClient(new WebViewClient() {
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                Log.d("webapp","開始加載");
            }

            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                Log.d("webapp","加載結束");
            }

            // 鏈接跳轉都會走這個方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                Log.d("webapp","Url："+ url );
                view.loadUrl(url);// 強制在當前 WebView 中加載 url
                return true;
            }
        });

        //核心方法, 用於處理JavaScript被執行後的回調
        webView.addJavascriptInterface(new JSInterface(), "justTest");
        //webView.loadUrl("http://192.168.156.87:10644");
        webView.loadUrl("file:///android_asset/web/index.html");
    }

 核心調用：

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

注意本地文件路徑的寫法，必須是file:///android_asset/web/...

當然，也可以直接把webapp部署到網上，這個loadUrl傳後臺服務地址。但是這裏用文件方式是考慮到終端４Ｇ網絡訪問慢，導致加載慢的問題。若是手機ａｐｐ或有線，無線網絡，部署到後臺最好。但是有利有弊吧，若每個項目各不相同，得打包部署多少個纔夠。放到本地的一個好處是終端可以在各個項目上用，而不用考慮服務端部署webapp的問題。

JS調用Android原生接口的方法：

//定義回調接口
    private final class JSInterface{
        @SuppressLint("JavascriptInterface")
        @JavascriptInterface
        public void testAndroid(String userInfo){
            System.out.println("JavaScript調用Android啦");
            Toast.makeText(SecondActivity.this, userInfo, Toast.LENGTH_LONG).show();
        }
    }

注意@JavascriptInterface這個註解不可少。因爲Adnroid從１７ａｐｉ之後爲了安全起見，只有這個註解的方法，才能被js調用。