安卓混合開發之H5和Android通信容器BridgeWebView的使用

文章預覽

• 一、使用步驟
• • 1.1、 在project的build.gradle添加如下代碼(如下圖)
  • 1.2、在Module的build.gradle添加依賴
  • 1.3、布局檔案中使用
  • 1.4、Activity初始化通信橋梁
  • 1.5、橋梁類提方法給js調用
  • 1.6、js中調用android方法
• 二、運作效果

參考文章

https://www.imooc.com/article/38237

開源位址：https://github.com/open-android/BridgeWebView

一、使用步驟

1.1、 在project的build.gradle添加如下代碼(如下圖)

allprojects {
    repositories {
        maven { url "https://jitpack.io" }
    }
}

           

1.2、在Module的build.gradle添加依賴

1.3、布局檔案中使用

<com.itheima.view.BridgeWebView
	android:id="@+id/bdwebview"
	android:layout_width="match_parent"
	android:layout_height="match_parent"/>

           

1.4、Activity初始化通信橋梁

mBdwebview = (BridgeWebView) findViewById(R.id.bdwebview);//初始化BridgeWebView
mBdwebview.loadUrl("http://10.0.3.2:63343/BridgeWebView/index.html");//顯示H5頁面
mBdwebview.addBridgeInterface(new MyJavaSctiptInterface(mBdwebview, this));//注冊橋梁類，該類負責H5和android通信

           

1.5、橋梁類提方法給js調用

public class MyJavaSctiptInterface{
    private Activity mActivity;

    public MyJavaSctiptInterface(Activity mActivity) {
        this.mActivity = mActivity;
    }

    public void callPhone(String[] strs){//撥号
        JSONObject jsonObject = new JSONObject(strs[0]);
        String phone = jsonObject.optString("phone");
        Intent intent = new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone));
        mActivity.startActivity(intent);
    }
}

           

1.6、js中調用android方法

$("#btn1").on("click", function(){
    var method = "callPhone";//js調用的android方法名
    var params = {"phone":"10086", "callback":""};//callback用于回調js
    callAndroidMethod(method, params);
});

 /**
 * 統一管理js調用安卓方法
 * @param method 方法名
 * @param params 向android傳參數 數組格式
 */
var callAndroidMethod = function(method, params){
    window.jsInterface.invokeMethod(method, [JSON.stringify(params)]);
}

           

二、運作效果