Android與H5混合開發

時間 2019-11-19

原文原文鏈接

Android 和 H5 在移動開發應用中很是普遍。市面上不少App都是使用Android開發的，但使用Android來開發一些比較複雜附屬類，提示性的頁面是得不償失的。而H5在製做炫酷動畫網頁方面比較給力，且具備開發速度快，更新不用依賴於App的更新，只須要服務端更新相應的頁面便可，因此App和H5頁面相結合就顯得尤其重要。而android和H5都不可能獨立存在，而是相互影響的。例如，H5頁面要獲取App中的用戶的基本信息，App端要操做H5頁面等。javascript

本文主要功能要點php

1.webView如何加載H5頁面html

2.Android如何調用H5中的方法java

3.H5如何調用Android中的方法
android

1、webView如何加載H5頁面web

1.載入遠程頁面瀏覽器

（1）在AndroidManifest.xml文件中添加權限app

<uses-permission android:name="android.permission.INTERNET"/>ide

　　（2）佈局文件webview.xml 函數

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />

</LinearLayout>

　　（3）MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();
    }

    public void loadWeb(){
        //String url = "https://www.baidu.com/";
        String url = "file:///android_asset/index.html";
        //此方法能夠在webview中打開連接而不會跳轉到外部瀏覽器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);
    }


    //重載onKeyDown的函數，使其在頁面內回退,而不是直接退出程序
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode, event);
    }
    
}

2.載入本地頁面

（1）新建assets目錄用來存放html頁面

　　　　右鍵app->new->folder->assetsfolder

（2）html頁面放入assets目錄

　　（3）修改url

　　 webview.loadUrl(file:///android_asset/index.html);

2、Android如何調用H5中的方法

（1）添加webview對調用js方法的支持

　　　　　　//支持html中javascript解析，無論是否是js和android交互，只要網頁中含有js都要

　　　　　　webView.getSettings().setJavaScriptEnabled(true);

　　　　　　//支持彈窗，也就是支持html網頁彈框
　　　　　　webView.setWebChromeClient(new WebChromeClient(){
    　　　　　  public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
       　　　　　　return super.onJsAlert(view,url,message,result);
    　　　　　　}
　　　　　　});

　　　 （2）調用h5無參無返回值的方法（直接調用）
　　　　　　h5方法：

　　　　　　　function show(){
   　　　　　　　　document.getElementById("temp").innerHTML = "Hello world";
　　　　　　　}

 　　　　　調用：

　　　　　 webView.loadUrl("javascript:show()");
 　　　（3）調用h5有參無返回值的方法
　　　　　　　當調用H5帶參數的方法時，勢必要傳入一個字符串，當傳入固定字符串時，用單引號括起來便可；當傳入變量名時，須要用轉義符。
　　　　　　　h5方法：

　　　　　　　function alertMsg(message){
   　　　　　　alert(message);
　　　　　　　}

　　　　　　　調用：

　　　　　　　webView.loadUrl("javascript:alertMsg('哈哈')");
　　　　　　　String content = "9880";
　　　　　　　webView.loadUrl("javascript:alertMsg(\""+content+"\")");
　　　　（4）調用h5有返回值方法

　　　　　　　function sum(i,j){
   　　　　　　 return i+j;
　　　　　　　}
　　　　　　調用：

　　　　　　webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
    　　　　　　@Override
    　　　　　　public void onReceiveValue(Object value) {
        　　　　　　Toast.makeText(MainActivity.this,"js返回結果爲="+value,Toast.LENGTH_LONG).show();
    　　　　　　}
　　　　　　});

完整代碼：
       index.html

<!DOCTYPE html>
<html>
<head>
<title>測試</title>

</head>
<body onLoad="init();">
    <div id="temp">h5頁面</div>
</body>
<script type="text/javascript">


    //無參無返回值的方法
    function show(){
        document.getElementById("temp").innerHTML = "Hello world";
    }

    //有返回值的方法
    function sum(i,j){
        return i+j;
    }

    //有參無返回值的方法
    function alertMsg(message){
        alert(message);
    }

</script>
</html>

　　　　webview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

    <Button
        android:id="@+id/btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginBottom="12dp"
        android:layout_marginTop="8dp"/>


    <WebView
        android:id="@+id/wv_webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >


    </WebView>

</LinearLayout>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView webView;
    Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);

        btn = (Button)findViewById(R.id.btn);

        btn.setOnClickListener(new View.OnClickListener(){
            public void onClick(View v){
                //調用H5無參無返回值方法
                webView.loadUrl("javascript:show()");
                //調用H5有參方法
                webView.loadUrl("javascript:alertMsg('哈哈')");
                String content = "9880";
                webView.loadUrl("javascript:alertMsg(\""+content+"\")");
                //調用H5有返回值方法
                webView.evaluateJavascript("sum(1,2)",new ValueCallback() {
                    @Override
                    public void onReceiveValue(Object value) {
                        Toast.makeText(MainActivity.this,"js返回結果爲="+value,Toast.LENGTH_LONG).show();
                    }
                });
            }
        });


        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/index.html";
        //此方法能夠在webview中打開連接而不會跳轉到外部瀏覽器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        //支持彈窗，也就是支持html網頁彈框
        webView.setWebChromeClient(new WebChromeClient(){
            public boolean onJsAlert(WebView view,String url,String message,JsResult result ){
                return super.onJsAlert(view,url,message,result);
            }
        });

        //支持html中javascript解析，無論是否是js和android交互，只要網頁中含有js都要
        webView.getSettings().setJavaScriptEnabled(true);
    }


    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重寫onKeyDown，當瀏覽網頁，WebView能夠後退時執行後退操做。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }


}

 3、H5如何調用Android中的方法
    Android須要新建一個類，裏邊提供給H5操做的方法，並規定別名。
　　（1）新建一個類

　　　　public  class  JsInteration  {
   　　　　 @JavascriptInterface
    　　　　public  String  back() {
        　　　　return "hello world";
    　　　　}
　　　　}　　
　　（2）webView添加js接口，並起別名

　　　　webView.addJavascriptInterface(new JsInteration(),"android");

　　（3）H5調用

　　　　window.android.back();
    完整代碼：
    index.html

<!DOCTYPE html>
<html>
<head>
<title>測試</title>

</head>
<body onLoad="init();">
    <div id="temp">h5頁面</div>

    <button id="btn" onclick="getMsg()">按鈕</button>
</body>
<script type="text/javascript">

    function getMsg(){
        var result=window.android.back();
          document.getElementById("temp").innerHTML=result;
    }

</script>
</html>

MainActivity.java

public class MainActivity extends AppCompatActivity {

    WebView webView;
   
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.webview);    

        webView = (WebView)findViewById(R.id.wv_webview);
        loadWeb();

    }

    @SuppressLint("JavascriptInterface")
    public void loadWeb(){

        String url =  "file:///android_asset/dj_index.html";
        //此方法能夠在webview中打開連接而不會跳轉到外部瀏覽器
        webView.setWebViewClient(new WebViewClient());
        webView.loadUrl(url);

        /*
          打開js接口，參數1爲本地類名；參數2爲別名
         */
        webView.addJavascriptInterface(new JsInteration(),"android");
    }




    public  class  JsInteration  {
        @JavascriptInterface//必定要寫，否則h5調不到這個方法
        public  String  back() {
            return "hello world";
        }
    }


    public boolean onKeyDown(int keyCode, KeyEvent event) {
        //重寫onKeyDown，當瀏覽網頁，WebView能夠後退時執行後退操做。
        if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
            webView.goBack();
            return true;
        }
        return super.onKeyDown(keyCode,event);
    }


}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。