Coder Social home page Coder Social logo

bridgewebview's Introduction

H5和Android通信容器BridgeWebView的使用


开源地址:https://github.com/open-android/BridgeWebView

PS:如果觉得文章太长,你也可观看该课程的视频,亲,里面还有高清,无码的福利喔

运行效果

  • 爱生活,爱学习,更爱做代码的搬运工,分类查找更方便请下载黑马助手app

黑马助手.png

使用步骤

1. 在project的build.gradle添加如下代码(如下图)

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

2. 在Module的build.gradle添加依赖

compile 'com.github.open-android:BridgeWebView:v1.0'

3.布局文件中使用

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

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通信

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);
    }
}

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)]);
}
  • 详细的使用方法在DEMO里面都演示啦,如果你觉得这个库还不错,请赏我一颗star吧~~~

  • 欢迎关注微信公众号

bridgewebview's People

Contributors

open-android avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.