在线问诊H5对接文档
通信方式
使用JsBridge的方式进行通信
H5大致实现逻辑
1.window监听flutterInAppWebViewPlatformReady事件
2.使用window.flutter_inappwebview.callHandler方法调用app端方法,callHandler会返回一个Promise
3.app直接调用js方法(暂无)
具体实现方式参考文档JavaScript Handlers部分中js相关部分:https://inappwebview.dev/docs/webview/javascript/communication#javascript-handlers
接口
H5调用app端
关闭当前页面
打开URL
| 方法名 |
参数1 |
参数2 |
返回值 |
| openUrl |
类型字符串,url地址 |
类型整数,是否在新页面打开,0否,1是 |
无 |
选择照片
| 方法名 |
参数1 |
返回值 |
| selectPhoto |
类型整数,最多选择数量,0单选,其他多选 |
base64字符串数组,长度0表示用户没有选择照片,其中base64字符串不包含"data:image/jpeg;base64,"头 |
查看图片
| 方法名 |
参数1 |
返回值 |
| viewPhoto |
类型字符串,图片url |
无 |
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
//环境是否准备好
var isFlutterInAppWebViewReady = false;
//监听环境准备完毕事件
window.addEventListener("flutterInAppWebViewPlatformReady", function(event) {
isFlutterInAppWebViewReady = true;
});
window.onload = function() {
//打开URL
var button = document.getElementById('openUrl');
button.addEventListener('click', function() {
if(isFlutterInAppWebViewReady)
{
window.flutter_inappwebview.callHandler('openUrl', "http://www.baidu.com");
}
});
//关闭页面
button = document.getElementById('closePage');
button.addEventListener('click', function() {
if(isFlutterInAppWebViewReady)
{
window.flutter_inappwebview.callHandler('closePage');
}
});
//选择照片
button = document.getElementById('selectPhoto');
button.addEventListener('click', function() {
if(isFlutterInAppWebViewReady)
{
window.flutter_inappwebview.callHandler('selectPhoto',3)
.then(function(args){
for(var i=0;i<args.length;i++)
{
var img = document.createElement('img');
img.src = "data:image/jpeg;base64,"+args[i];
img.width = 200;
img.height = 150;
var body = document.body;
body.appendChild(img);
}
});
}
});
//查看图片
button = document.getElementById('viewPhoto');
button.addEventListener('click', function() {
if(isFlutterInAppWebViewReady)
{
window.flutter_inappwebview.callHandler('viewPhoto', "https://inews.gtimg.com/om_bt/O0e2a37GGF5CDfNgK8GU29rF_2eJlHLDsa17LABXns7V4AA/641");
}
});
};
</script>
</head>
<body>
<button id="openUrl">打开Url</button>
<button id="closePage">关闭页面</button>
<button id="selectPhoto">选择照片</button>
<button id="viewPhoto">查看图片</button>
</body>
</html>
