Android集成JsBridge

Github:https://github.com/lzyzsd/JsBridge

依赖

1
2
3
4
5
6
7
repositories {
maven { url "https://jitpack.io" }
}

dependencies {
api 'com.github.lzyzsd:jsbridge:1.0.4'
}

布局文件

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.github.lzyzsd.jsbridge.BridgeWebView
android:id="@+id/bridge_web_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
</LinearLayout>

Java实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class JsBridgeActivity extends AppCompatActivity {

private BridgeWebView mBridgeWebView;

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

mBridgeWebView = findViewById(R.id.bridge_web_view);
mBridgeWebView.loadUrl("file:///android_asset/demo.html");

mBridgeWebView.registerHandler("getHomePage", new BridgeHandler() {
@Override
public void handler(String data, CallBackFunction function) {
NLog.i(Constants.TAG, "JsBridgeActivity.getHomePage: " + data);
function.onCallBack("http://www.appblog.cn");
}
});
}
}

JS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>Android与JS交互测试</title>
</head>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<body style="margin: 20px;">
<div class="form-group">
<textarea id="show" class="form-control" rows="6"></textarea>
</div>
<div class="form-group">
<input type="button" class="form-control btn btn-default" style="background-color:#30B7EB;" value="获取主页信息" onclick="callNativeHomePage();" />
</div>
</body>
<script>
function callNativeHomePage() {
//call native method
window.WebViewJavascriptBridge.callHandler(
'getHomePage'
, {'param': 'value'}
, function(responseData) {
document.getElementById("show").innerHTML = responseData
}
);
}

function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener(
'WebViewJavascriptBridgeReady'
, function() {
callback(WebViewJavascriptBridge)
},
false
);
}
}

connectWebViewJavascriptBridge(function(bridge) {
bridge.init(function(message, responseCallback) {
console.log('Js got a message', message);
var data = {
'Javascript Responds': '测试中文!'
};
console.log('Js responding with', data);
responseCallback(data);
});
})
</script>
</html>

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :