前端 javascript 交互 webview 关于安卓jsbridge的使用

目前我所接触到的，JS与原生的交互有两种方式，第一种是通过注入方法的形式，第二种是拦截url的形式；

JSBridge是JS和Native之间的一种通信方式，也就是定义Native和JS的通信，其中Native只通过一个固定的桥对象调用JS，而JS也只通过固定的桥对象调用Native。

流程：H5->通过某种方式触发一个url->Native捕获到url,进行分析->原生做处理->Native调用H5的JSBridge对象传递回调。

其实说白了原理也是对url进行拦截解析处理的；

在这里通过编写一个CustomWebViewNew.java类对交互集合在一起处理，web页面也是采用本地testPage.html。后面提供这两个文件的代码。

先看使用方式：

一、添加依赖（或者导入aar）

implementation 'com.github.lzyzsd:jsbridge:1.0.4'

二、使用 BridgeWebView对象，BridgeWebView为jsbridge提供的继承与webView的实现类，内部在setWebViewClient的使用，传入的是自定义的WebViewClient对象，在shouldOverrideUrlLoading方法中对url重新进行了解析处理，然后回调到对应的执行方法中。BridgeWebView把他当作webView使用就行。

布局中使用：

android:id="@+id/webView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

代码中使用：

BridgeWebView webView = findViewById(R.id.webView)；

CustomWebViewNew customWebViewNew = new CustomWebViewNew(this, webView, "file:android_asset/testPage.html");

三、交互，通过customWebViewNew对象去调用交互方法，比如调用nativeCallJs()。此方法为原生调用JS，其中“functionInJs”为规定的方法行，CallBackFunction为回调接口，当JS执行完后可以用来通过此接口来回传数据给原生，代码如下；

customWebViewNew.nativeCallJs("functionInJs", "发送数据给web指定接收", new CallBackFunction() {

@Override

public void onCallBack(String s) {

LogUtil.e(TAG, "来自web的回传数据：" + s);

}

});

主要交互在CustomWebViewNew类中，下面贴出完整代码，交互的方法都有备注，看备注即可

CustomWebViewNew.java

class CustomWebViewNew {

private final String TAG = webViewUtil.class.getSimpleName();

private BridgeWebView bridgeWebView;

private Context context;

private String url;

public CustomWebViewNew(Context context, BridgeWebView bridgeWebView, String url) {

this.bridgeWebView = bridgeWebView;

this.context = context;

this.url = url;

}

// public CustomWebViewNew(Context context, BridgeWebView bridgeWebView, String url, boolean isRedirectWebView) {

// this.bridgeWebView = bridgeWebView;

// this.context = context;

// this.url = url;

// this.isRedirectWebView = isRedirectWebView;

// }

public void init() {

bridgeWebView.getSettings().setDomStorageEnabled(true);

bridgeWebView.loadUrl(url);

initWebViewListener();

jsCallNative();

}

//js调用原生方法，需要指定方法名称,可在此方法里面继续添加交互信息

private void jsCallNative() {

bridgeWebView.registerHandler("submitFromWeb", (data, function) -> {

LogUtil.e(TAG, "指定Handler接收来自web的数据：" + data);

function.onCallBack("指定Handler收到Web发来的数据，回传数据给你");

});

}

//原生调用js方法，需要指定方法名称

public void nativeCallJs(String functionName, String param, CallBackFunction function) {

bridgeWebView.callHandler(functionName, param, function);

}

//默认发送数据给web端接收

public void send(String data) {

bridgeWebView.send(data, new CallBackFunction() {

@Override

public void onCallBack(String data) {

LogUtil.e(TAG, "来自web的回传数据：" + data);

}

});

}

//默认接受来自web端的数据，不用指定方法名

private void setDefaultHandler() {

bridgeWebView.setDefaultHandler(new BridgeHandler() {

@Override

public void handler(String data, CallBackFunction function) {

LogUtil.e(TAG, "DefaultHandler接收全部来自web的数据：" + data);

function.onCallBack("DefaultHandler收到Web发来的数据，回传数据给你");

}

});

}

private void initWebViewListener() {

bridgeWebView.setOnTouchListener(new View.OnTouchListener() {

@Override

public boolean onTouch(View view, MotionEvent motionEvent) {

if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {

}

return false;

}

});

bridgeWebView.setOnLongClickListener(new View.OnLongClickListener() {

@Override

public boolean onLongClick(View view) {

return true;

}

});

bridgeWebView.setWebViewClient(new MyWebViewClient(bridgeWebView));

bridgeWebView.setWebChromeClient(new MyWebChromeClient());

}

class MyWebChromeClient extends WebChromeClient {

@Override

public void onReceivedTitle(WebView view, String title) {

super.onReceivedTitle(view, title);

webViewTitle = title;

}

@Override

public void onGeolocationPermissionsShowPrompt(String origin, GeolocationPermissions.Callback callback) {

callback.invoke(origin, true, false);

super.onGeolocationPermissionsShowPrompt(origin, callback);

}

@Override

public void onProgressChanged(WebView view, int newProgress) {

LogUtil.d(TAG, "WebView--progress1:" + newProgress);

}

@Override

public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

LogUtil.d(TAG, "message: " + consoleMessage.message() + "\n\nlineNumber: "

+ consoleMessage.lineNumber() + "\n\nsourceId: " + consoleMessage.sourceId());

return super.onConsoleMessage(consoleMessage);

}

@Override

public boolean onShowFileChooser(WebView webView, ValueCallback filePathCallback, FileChooserParams fileChooserParams) {

return true;

}

void openFileChooser(ValueCallback uploadMsg, String acceptType) {

}

// For Android < 3.0

public void openFileChooser(ValueCallback uploadMsg) {

openFileChooser(uploadMsg, "");

}

// For Android > 4.1.1

public void openFileChooser(ValueCallback uploadMsg, String acceptType, String capture) {

openFileChooser(uploadMsg, acceptType);

}

}

class MyWebViewClient extends BridgeWebViewClient {

public MyWebViewClient(BridgeWebView webView) {

super(webView);

}

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

return true;

}

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon);

}

}

}

testPage.html

WebViewJsBridge

精彩文章

 您阅读本篇文章共花了：