flutter开发实战-实现webview与Javascript通信JSBridge
flutter开发实战-实现webview与H5中Javascript通信JSBridge
在开发中，使用到webview，flutter实现webview是使用原生的插件实现，常用的有webview_flutter与flutter_inappwebview
这里使用的是webview_flutter，在iOS上，WebView小部件由WKWebView支持。在Android上，WebView小部件由WebView支持。
这里使用的是webview_flutter的3.0.4版本，不同版本代码变化还是挺大的。
一、引webview_flutter
在工程中pubspec.yaml引入webview_flutter
# 浏览器
webview_flutter: ^3.0.4
webview_cookie_manager: ^2.0.6
二、使用webview
2.1、webview
webview的属性
const WebView({
Key? key,
this.onWebViewCreated,
this.initialUrl,
this.initialCookies = const <WebViewCookie>[],
this.javascriptMode = JavascriptMode.disabled,
this.javascriptChannels,
this.navigationDelegate,
this.gestureRecognizers,
this.onPageStarted,
this.onPageFinished,
this.onProgress,
this.onWebResourceError,
this.debuggingEnabled = false,
this.gestureNavigationEnabled = false,
this.userAgent,
this.zoomEnabled = true,
this.initialMediaPlaybackPolicy =
AutoMediaPlaybackPolicy.require_user_action_for_all_media_types,
this.allowsInlineMediaPlayback = false,
this.backgroundColor,
})
flutter webview和JS交互，需要JavaScript开启。
flutter webview中的javascriptMode参数启用或禁用 JavaScript。默认情况下WebView的 JavaScript是禁用的，所以要想启用的话，可以使用JavascriptMode.unrestricted
WebView(
initialUrl: 'https://www.laileshuo.com',
javascriptMode: JavascriptMode.unrestricted,
)
flutter webview提供WebViewController来获取webview信息以及控制webview的刷新、loadUrl、前进、后退等功能。
WebView(
initialUrl: 'https://www.laileshuo.com',
onWebViewCreated: (WebViewController webViewController) {
_controller = webViewController;
},
);
2.2、JavascriptChannel
JavascriptChannel用于接收在web视图中运行的JavaScript代码发出的消息，提供了name与onMessageReceived。
JavascriptChannel({
required this.name,
required this.onMessageReceived,
})
我们需要在Webview的javascriptChannels属性设置javascriptChannel!
javascriptChannels: <JavascriptChannel>{
_jsChannelManager.javascriptChannel!,
},
2.3、Cookie
在使用webview的cookie时候，使用initialCookies设置cookie列表
这里我们定义了JSCookieConfig来设置需要设置的cookie
// 处理注入到webview的cookie，设置cookie通过webview_cookie_manager设置所需要的cookie列表
// Cookie：不同应用对应不同的key，value为token
class JSCookieConfig {
JSCookieConfig() {
eventListener();
}
// cookie
final WebviewCookieManager cookieManager = WebviewCookieManager();
List<WebViewCookie> initialCookies() {
LoggerManager().debug("initialCookies ApiAuth().token:${ApiAuth.getToken()}");
List<WebViewCookie> cookies = [
WebViewCookie(
name: "app_authorization",
value: ApiAuth.getToken(),
domain: ".ifour.cn"),
WebViewCookie(
name: "token", value: ApiAuth.getToken(), domain: ".ifour.cn"),
];
return cookies;
}
Future<void> setCookies() async {
// final mainCookie = Cookie('app_authorization', 'ApiAuth().token')..domain = 'ifour.cn';
// final h5_tokenCookie = Cookie('token', 'ApiAuth().token')..domain = 'ifour.cn';
//
// await cookieManager.setCookies([
// mainCookie,
// h5_tokenCookie
// ]);
await cookieManager.setCookies([
Cookie("app_authorization", ApiAuth.getToken())
..domain = '.ifour.cn'
..httpOnly = false,
Cookie("token", ApiAuth.getToken())
..domain = '.ifour.cn'
..httpOnly = false,
]);
}
Future<void> clear() async {
await cookieManager.clearCookies();
}
void eventListener() {
AppEventBus().on(kUserLoginChanged, this, (arg) {
setCookies();
});
}
// 注入cookie
// String cookieJS =
// "document.cookie ='app_authorization=${ApiAuth().token};domain=.ifour.cn;path=/'";
//
// _jsChannelManager.injectJavascript(cookieJS);
}
2.4、注入JS
JSBridge实现webview上原生与h5的通信，js可以调用native，native也可以调用js，实现通信。
其主要是通过拦截 URL 请求来达到 native 端和 webview 端相互通信的效果，常用的是WebviewJavascriptBridge
这里我们使用代码将WebviewJavascriptBridge的JS代码注入到flutter webview中。
flutter使用的WebviewJavascriptBridge的代码
const String kWebviewJavascriptBridge = '''
function preprocessorJS() {
if (window.AppJSBridge) {
return;
}
if (!window.onerror) {
window.onerror = function(msg, url, line) {
console.log("AppJSBridge: ERROR:" + msg + "@" + url + ":" + line);
}
}
// var messagingIframe;
var sendMessageQueue = [];
var messageHandlers = {};
var CUSTOM_PROTOCOL_SCHEME = 'https';
var QUEUE_HAS_MESSAGE = '__wvjb_queue_message__';
var responseCallbacks = {};
var uniqueId = 1;
var dispatchMessagesWithTimeoutSafety = true;
function registerHandler(handlerName, handler) {
messageHandlers[handlerName] = handler;
}
function callHandler(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
function call(handlerName, data, responseCallback) {
if (arguments.length == 2 && typeof data == 'function') {
responseCallback = data;
data = null;
}
_doSend({ handlerName:handlerName, data:data }, responseCallback);
}
function disableJavscriptAlertBoxSafetyTimeout() {
dispatchMessagesWithTimeoutSafety = false;
}
function _doSend(message, responseCallback) {
if (responseCallback) {
var callbackId = 'cb_'+(uniqueId++)+'_'+new Date().getTime();
responseCallbacks[callbackId] = responseCallback;
message['callbackId'] = callbackId;
}
sendMessageQueue.push(message);
// messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
// 通过JavaScriptChannel注入的全局对象
window.JSAppSDK.postMessage(JSON.stringify(message))
}
function _fetchQueue() {
var messageQueueString = JSON.stringify(sendMessageQueue);
sendMessageQueue = [];
return messageQueueString;
}
function _dispatchMessageFromObjC(messageJSON) {
if (dispatchMessagesWithTimeoutSafety) {
setTimeout(_doDispatchMessageFromObjC);
} else {
_doDispatchMessageFromObjC();
}
// 打印log
_consoleLog("AppJSBridge: messageJSON:" + messageJSON);
function _doDispatchMessageFromObjC() {
var message = JSON.parse(messageJSON);
var messageHandler;
var responseCallback;
if (message.responseId) {
responseCallback = responseCallbacks[message.responseId];
if (!responseCallback) {
return;
}
responseCallback(message.responseData);
delete responseCallbacks[message.responseId];
} else {
if (message.callbackId) {
var callbackResponseId = message.callbackId;
responseCallback = function(responseData) {
_doSend({ handlerName:message.handlerName, responseId:callbackResponseId, responseData:responseData });
};
}
var handler = messageHandlers[message.handlerName];
if (!handler) {
_consoleLog("AppJSBridge: WARNING: no handler for message from ObjC:", message);
} else {
handler(message.data, responseCallback);
}
}
}
}
function _handleMessageFromObjC(messageJSON) {
_dispatchMessageFromObjC(messageJSON);
}
// messagingIframe = document.createElement('iframe');
// messagingIframe.style.display = 'none';
// messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE;
// document.documentElement.appendChild(messagingIframe);
registerHandler("_disableJavascriptAlertBoxSafetyTimeout", disableJavscriptAlertBoxSafetyTimeout);
// setTimeout(_callWVJBCallbacks, 0);
// function _callWVJBCallbacks() {
// var callbacks = window.WVJBCallbacks;
// delete window.WVJBCallbacks;
// for (var i=0; isetupWebViewJavascriptBridge与setupWebViewJavascriptBridge判断window.AppJSBridge是否存在，通过监听AppJSBridgeReady来实现window.AppJSBridge初始化，之后js中就可以使用window.AppJSBridge中的registerHandler、callHandler等方法了。
const String kWebviewJsBridgeReady = '''
window.onerror = function(err) {
log('window.onerror: ' + err)
}
function setupWebViewJavascriptBridge(callback) {
if (window.AppJSBridge) {
return callback(AppJSBridge);
} else {
document.addEventListener('AppJSBridgeReady', function() {
callback(AppJSBridge);
},false);
}
// if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
// window.WVJBCallbacks = [callback];
// var WVJBIframe = document.createElement('iframe');
// WVJBIframe.style.display = 'none';
// WVJBIframe.src = 'https://__bridge_loaded__';
// document.documentElement.appendChild(WVJBIframe);
// setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}
setupWebViewJavascriptBridge(function(bridge) {
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' }
responseCallback(responseData)
});
bridge.registerHandler('JSHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' }
responseCallback(responseData)
});
}
''';
在webview的onWebViewCreated将kWebviewJsBridgeReady代码注入，进行监听window.AppJSBridge是否可用。
注入的代码webController的runJavascript方法
_jsChannelManager中的代码
// 注入js
void injectJavascriptReady() async {
await webController?.runJavascript('javascript:$kWebviewJsBridgeReady');
}
webview的onWebViewCreated，webview创建后
onWebViewCreated: (controller) {
LoggerManager().debug("onWebViewCreated");
// 注入jsReady
_jsChannelManager.injectJavascriptReady();
},
在webview的onPageFinished将kWebviewJavascriptBridge代码注入
onPageFinished: (String url) {
// 网页加载完成
LoggerManager().debug('onPageFinished url: $url');
// 注入
_jsChannelManager.injectBridgeJavascript();
},
2.5、实现JSChannelManager管理处理H5与flutter webview通信
JSChannelManager中使用JavascriptChannel来接收h5端的JS消息。
当收到H5消息的时候，flutter根据callbackId回调给H5，
实现的具体代码如下
const String kJSChannelName = "JSAppSDK";
const String kOldProtocolScheme = "wvjbscheme";
const String kNewProtocolScheme = "https";
const String kQueueHasMessage = "__wvjb_queue_message__";
const String kBridgeLoaded = "__bridge_loaded__";
class JSChannelManager {
WebViewController? webController;
BuildContext? context;
JavascriptChannel? javascriptChannel;
// 存储的消息messageHandler
Map<String, dynamic> messageHandlers = {};
// 存储的回调callback, responseCallback
Map<String, dynamic> responseCallbacks = {};
// 开启的消息队列，发送的消息均会存储到该队列中
List<JSMessage>? startupMessageQueue = [];
// 消息的标识
int _uniqueId = 0;
JSChannelManager() {
javascriptChannel = JavascriptChannel(
name: kJSChannelName,
onMessageReceived: (JavascriptMessage message) {
// 将JSON字符串转成Map
LoggerManager().debug("onMessageReceived message:${message.message}");
flutterFlushMessageQueue();
},
);
}
void updateController(WebViewController controller, BuildContext context) {
this.webController = controller;
this.context = context;
}
JavascriptChannel getJSChannel() {
return javascriptChannel!;
}
// 处理消息队列
void flutterFlushMessageQueue() async {
// 获取h5发送的列表
// 处理H5存的消息队列发送的MessageQueue
String? messageQueueString = await webController
?.runJavascriptReturningResult(webViewJavascriptFetchQueyCommand());
LoggerManager().debug("flutterFlushMessageQueue:${messageQueueString}");
flushMessageQueue(messageQueueString);
}
// 处理来自H5的消息列表
void flushMessageQueue(String? messageQueueString) {
if (!(messageQueueString != null && messageQueueString.isNotEmpty)) {
return;
}
LoggerManager().debug(
"flushMessageQueue messageQueueString:${messageQueueString}");
dynamic? aFromH5Messages = jsonDecode(messageQueueString);
LoggerManager().debug(
"flushMessageQueue 1111 aFromH5Messages:${aFromH5Messages}, type:${aFromH5Messages.runtimeType}");
if (aFromH5Messages != null && aFromH5Messages is String) {
aFromH5Messages = jsonDecode(aFromH5Messages);
}
LoggerManager().debug(
"flushMessageQueue 222 aFromH5Messages:${aFromH5Messages}, type:${aFromH5Messages.runtimeType}");
if (aFromH5Messages != null && aFromH5Messages is List) {
for (dynamic aMsgJson in aFromH5Messages) {
if (aMsgJson is Map<String, dynamic>) {
JSMessage jsMessage = JSMessage.fromJson(aMsgJson);
LoggerManager().debug(
"flushMessageQueue aFromH5Messages aMsgJson:${aMsgJson} jsMessage:${jsMessage}");
// 从H5获取或者接收到的消息，如果responseId不为空，则为flutter调用H5方法，H5给flutter的回调
if (jsMessage.responseId != null &&
jsMessage.responseId!.isNotEmpty) {
// 如果responseId不为空，则为flutter调用H5方法，H5给flutter的回调
ResponseCallback? responseCallback =
responseCallbacks[jsMessage.responseId];
if (responseCallback != null) {
// 处理H5返回给flutter的回调
responseCallback(jsMessage.responseData);
}
} else {
ResponseCallback? responseCallback;
// 如果responseId为空时候，则是来自H5发送的flutter的消息
// 获取H5传过来的标识callbackId
String? callbackId = jsMessage.callbackId;
if (callbackId != null && callbackId.isNotEmpty) {
// 接收到来自H5的消息
JSMessage aMessage = JSMessage();
aMessage.copy(aNewMessage: aMessage, aOldMessage: jsMessage);
responseCallback = (dynamic responseData) {
// flutter回调给H5
// 将H5传过来的callbackId作为responseId回调传递给H5
aMessage.responseId = callbackId;
aMessage.responseData = responseData;
_queueMessage(aMessage);
};
} else {
responseCallback = (dynamic responseData) {
// callbackId为空，不做任何处理
};
}
// 从flutter已经注册Register方法中找出对应的方法
JSBridgeHandler? jsBridgeHandler =
messageHandlers[jsMessage.handlerName];
if (jsBridgeHandler != null) {
// 在flutter该handlerName的方法已经注册register
jsBridgeHandler(jsMessage.data, responseCallback);
} else {
// 在flutter该handlerName没有注册，则不做任何处理
}
}
}
}
}
}
// 处理从H5收到的消息
void _dispatchMessage(JSMessage message) async {
String messageJSON = jsonEncode(message.toJson());
messageJSON = messageJSON.replaceAll("\\", "\\\\");
messageJSON = messageJSON.replaceAll("\"", "\\\"");
messageJSON = messageJSON.replaceAll("\'", "\\\'");
messageJSON = messageJSON.replaceAll("\n", "\\n");
messageJSON = messageJSON.replaceAll("\r", "\\r");
messageJSON = messageJSON.replaceAll("\f", "\\f");
messageJSON = messageJSON.replaceAll("\u2028", "\\u2028");
messageJSON = messageJSON.replaceAll("\u2029", "\\u2029");
String javascriptCommand =
webViewJavascriptHandleMessageFromObjCCommand(messageJSON);
await webController?.runJavascript(javascriptCommand);
}
// 注入js
void injectJavascript(String javascript) async {
await webController?.runJavascript(javascript);
}
// 注入js
void injectJavascriptReady() async {
await webController?.runJavascript('javascript:$kWebviewJsBridgeReady');
}
// 注入js
void injectBridgeJavascript() async {
await webController?.runJavascript('javascript:$kWebviewJavascriptBridge');
LoggerManager().debug("injectJavascript");
// 处理flutter发送的消息队列
if (startupMessageQueue != null && startupMessageQueue!.isNotEmpty) {
List<JSMessage> tmpList = startupMessageQueue!;
startupMessageQueue = null;
for (JSMessage message in tmpList) {
_dispatchMessage(message);
}
}
}
// 向H5发送消息
void _sendData(String handleName,
{dynamic? data, ResponseCallback? responseCallback}) {
String callbackId = "flutter_cb_${++_uniqueId}";
JSMessage jsMessage = JSMessage();
jsMessage.callbackId = callbackId;
jsMessage.handlerName = handleName;
jsMessage.data = data;
// 将callbackId存储到responseCallbacks中，callbackId会被H5通过responseId返回
if (responseCallback != null) {
responseCallbacks[callbackId] = responseCallback;
}
_queueMessage(jsMessage);
}
// 将发送给H5的消息存到startupMessageQueue中
void _queueMessage(JSMessage jsMessage) {
if (startupMessageQueue != null) {
startupMessageQueue!.add(jsMessage);
}
_dispatchMessage(jsMessage);
}
// 判断是否可以注入url
bool isWebViewJavascriptBridgeURL(String url) {
if (!isSchemeMatch(url)) {
return false;
}
return isBridgeLoadedURL(url) || isQueueMessageURL(url);
}
bool isSchemeMatch(String url) {
String lowerUrl = url.toLowerCase();
LoggerManager().debug("isSchemeMatch lowerUrl：${lowerUrl}");
return (lowerUrl.startsWith(kNewProtocolScheme) ||
lowerUrl.startsWith(kOldProtocolScheme));
}
bool isQueueMessageURL(String url) {
String lowerUrl = url.toLowerCase();
LoggerManager().debug("isQueueMessageURL lowerUrl：${lowerUrl}");
return (isSchemeMatch(url) && (lowerUrl.contains(kQueueHasMessage)));
}
bool isBridgeLoadedURL(String url) {
String lowerUrl = url.toLowerCase();
LoggerManager().debug("isBridgeLoadedURL lowerUrl：${lowerUrl}");
return (isSchemeMatch(url) && (lowerUrl.contains(kBridgeLoaded)));
}
// 注入js的command
String webViewJavascriptCheckCommand() {
return "typeof window.AppJSBridge == \'object\';";
}
String webViewJavascriptFetchQueyCommand() {
return "AppJSBridge._fetchQueue();";
}
String webViewJavascriptHandleMessageFromObjCCommand(String messageJSON) {
return "AppJSBridge._handleMessageFromObjC('${messageJSON}');";
}
// 判断AppJSBridge
Future<String?> checkJavascriptBridge() async {
String? result = await webController
?.runJavascriptReturningResult(webViewJavascriptCheckCommand());
LoggerManager().debug("checkJavascriptBridge result:${result}");
return result;
}
/// flutter开放出去的方法，flutter调用H5方法统一使用该callHandler
/// callHandler
void callHandler(String handleName,
{dynamic? data, ResponseCallback? responseCallback}) {
if (handleName.isNotEmpty) {
_sendData(handleName, data: data, responseCallback: responseCallback);
}
}
/// flutter注册方法
/// flutter注册方法，提供给H5调用
void registerHandler(String handleName, JSBridgeHandler jsBridgeHandler) {
if (handleName.isNotEmpty) {
messageHandlers[handleName] = jsBridgeHandler;
}
}
// 移除注册的方法
void removeHandler(String handleName) {
if (handleName.isNotEmpty) {
messageHandlers.remove(handleName);
}
}
// 重置，将responseCallbacks、startupMessageQueue重置
void reset() {
startupMessageQueue = [];
responseCallbacks = {};
_uniqueId = 0;
}
}
2.6、JSChannelRegister：appBridge调用的方法，flutter注册的方法
JSChannelRegister实现处理flutter注册的方法，提供相应的方法，H5端的JS可以方便调用。
// appBridge调用的方法，flutter注册的方法
class JSChannelRegister {
late JSChannelManager _jsChannelManager;
// 支付
final ChannelPayPlatform _channelPayPlatform = ChannelPayPlatform();
// 打开app等
final ChannelLauncher _channelLauncher = ChannelLauncher();
// 弹窗
final ChannelDialog _channelDialog = ChannelDialog();
// 扫码或者识别二维码
final ChannelQrScanner _channelQrScanner = ChannelQrScanner();
JSChannelRegister({required JSChannelManager jsChannelManager}) {
_jsChannelManager = jsChannelManager;
}
// 注册handlers
void registerHandlers({JSChannelRegisterHandler? jsChannelRegisterHandler}) {
// 设置标题
_jsChannelManager.registerHandler(JSChannelRegisterMethod.setTitle,
(data, responseCallback) {
if (data != null && data is String) {
String title = data;
if (jsChannelRegisterHandler != null) {
jsChannelRegisterHandler(JSChannelRegisterMethod.setTitle, title);
}
}
});
// 获取用户昵称
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getUsername,
(data, responseCallback) {
UserModel userModel =
Provider.of<UserModel>(OneContext().context!, listen: false);
String userNickName = userModel.userNickName ?? "";
if (responseCallback != null) {
responseCallback(userNickName);
}
});
// 获取定位
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getLoc,
(data, responseCallback) {
// TODO 获取定位
});
// 获取App名称
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getAppName,
(data, responseCallback) {
PackageInfo.fromPlatform().then((packageInfo) {
String appName = "${packageInfo.appName}";
if (responseCallback != null) {
responseCallback(appName);
}
});
});
// 获取版本号
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getVersion,
(data, responseCallback) {
PackageInfo.fromPlatform().then((packageInfo) {
String version = "${packageInfo.buildNumber}";
String versionCode = version.replaceAll(".", "");
if (responseCallback != null) {
responseCallback(versionCode);
}
});
});
// 获取用户id
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getUserId,
(data, responseCallback) {
UserModel userModel =
Provider.of<UserModel>(OneContext().context!, listen: false);
String userId = userModel.userId ?? "";
if (responseCallback != null) {
responseCallback(userId);
}
});
// 获取用户登录认证token
_jsChannelManager.registerHandler(JSChannelRegisterMethod.getAuthorization,
(data, responseCallback) {
UserModel userModel =
Provider.of<UserModel>(OneContext().context!, listen: false);
String token = userModel.token ?? "";
if (responseCallback != null) {
responseCallback(token);
}
});
// 调用支付（微信支付/支付宝支付）原生
_jsChannelManager.registerHandler(JSChannelRegisterMethod.setPayPlatform,
(data, responseCallback) {
_channelPayPlatform.openUniPay(data, responseCallback);
});
// 打开扫一扫
_jsChannelManager.registerHandler(JSChannelRegisterMethod.openScan,
(data, responseCallback) {
// 打开扫一扫界面
_channelQrScanner.openScanner(
JSChannelRegisterMethod.openScan, data, responseCallback);
});
// 打开扫一扫
_jsChannelManager.registerHandler(JSChannelRegisterMethod.scanQrCode,
(data, responseCallback) {
// 打开扫一扫界面
_channelQrScanner.openScanner(
JSChannelRegisterMethod.scanQrCode, data, responseCallback);
});
// 打系统电话
_jsChannelManager.registerHandler(JSChannelRegisterMethod.callTelPhone,
(data, responseCallback) {
_channelLauncher.openLauncher(
JSChannelRegisterMethod.callTelPhone, data, responseCallback);
});
// 发送短信
_jsChannelManager.registerHandler(JSChannelRegisterMethod.sendSms,
(data, responseCallback) {
_channelLauncher.openLauncher(
JSChannelRegisterMethod.sendSms, data, responseCallback);
});
// 对话框 showDialog
_jsChannelManager.registerHandler(JSChannelRegisterMethod.showDialog,
(data, responseCallback) {
_channelDialog.openShowDialog(data, responseCallback);
});
// 底部选择框
_jsChannelManager.registerHandler(JSChannelRegisterMethod.showCheckBox,
(data, responseCallback) {
_channelDialog.openShowSheetBox(data, responseCallback);
});
// 保存图片到相册
_jsChannelManager.registerHandler(JSChannelRegisterMethod.saveImage,
(data, responseCallback) {
// 保存图片到相册
if (data != null && data is String && data.isNotEmpty) {
FlutterLoadingHud.showLoading(message: "保存中...");
SaveToAlbumUtil.saveImage(data, onCallback: (bool result, String message) {
FlutterLoadingHud.dismiss();
if (result) {
// 保存成功
FlutterLoadingHud.showToast(message: message);
} else {
// 保存失败
FlutterLoadingHud.showToast(message: message);
}
});
}
});
// 识别二维码
_jsChannelManager.registerHandler(JSChannelRegisterMethod.detectorQRCode,
(data, responseCallback) {
// 识别图片中的二维码
_channelQrScanner.openScanner(
JSChannelRegisterMethod.detectorQRCode, data, responseCallback);
});
// 打开App
_jsChannelManager.registerHandler(JSChannelRegisterMethod.openApp,
(data, responseCallback) {
_channelLauncher.openLauncher(
JSChannelRegisterMethod.openApp, data, responseCallback);
});
// log
_jsChannelManager.registerHandler(JSChannelRegisterMethod.log,
(data, responseCallback) {
Map<String, dynamic> dataJson = jsonDecode(data);
int loggerType = dataJson["logType"];
String message = dataJson["message"];
if (LoggerMode.debug == loggerType) {
LoggerManager().debug("registerHandlers log data: ${message}");
} else if (LoggerMode.verbose == loggerType) {
LoggerManager().verbose("registerHandlers log data: ${message}");
} else if (LoggerMode.info == loggerType) {
LoggerManager().info("registerHandlers log data: ${message}");
} else if (LoggerMode.warning == loggerType) {
LoggerManager().warning("registerHandlers log data: ${message}");
} else if (LoggerMode.error == loggerType) {
LoggerManager().error("registerHandlers log data: ${message}");
}
});
}
// 处理是否跳转，true可跳转，false不可跳转
bool navigationDecision(NavigationRequest request) {
///在页面跳转之前调用 isForMainFrame为false,页面不跳转.导致网页内很多链接点击没效果
String url = Uri.decodeComponent(request.url);
LoggerManager().debug('navigationDelegate decode $url');
String telPrefix = "tel://";
String smsPrefix = "sms://";
String appPrefix = "app://";
if (url.startsWith(telPrefix)) {
String data = url.substring(telPrefix.length);
_channelLauncher.openLauncher(
JSChannelRegisterMethod.callTelPhone, data, null);
// 不可跳转
return false;
}
if (url.startsWith(smsPrefix)) {
String data = url.substring(smsPrefix.length);
_channelLauncher.openLauncher(
JSChannelRegisterMethod.sendSms, data, null);
// 不可跳转
return false;
}
if (url.startsWith(appPrefix)) {
// app://close
_channelLauncher.openappUrl(url);
return false;
}
if (url == "about:blank") {
// 空页面进行跳转
return true;
}
// 可跳转
return true;
}
}
使用JSChannelRegister，处理相应的callback
void initState() {
// TODO: implement initState
super.initState();
_isDisposed = false;
_jsChannelRegister = JSChannelRegister(jsChannelManager: _jsChannelManager);
_jsChannelRegister.registerHandlers(
jsChannelRegisterHandler: (handlerName, data) {
if (JSChannelRegisterMethod.setTitle == handlerName) {
setWebPageTitle(data);
}
});
}
2.7、JSMessage：H5和flutter交互的消息体
class JSMessage {
// {handlerName: getSessionID, data: , callbackId: cb_2_1665631238605}
// handlerName
String? handlerName;
// data
// flutter发送给H5的data，参数
dynamic? data;
/// callbackId,
/// H5发送给flutter的callbackId，
/// flutter处理后将调用 AppJSBridge._handleMessageFromObjC('%@');
/// H5从responseCallbacks中根据callbackId找到callback回调方法进行执行
String? callbackId;
/// responseId
/// flutter发送给H5的responseId，
/// responseId和callbackId是一样的
/// 如果是H5调用flutter时候，从H5过来的callbackId作为responseId回调给H5
/// 如果是flutter调用H5，从flutter过来的callbackId作为responseId回调给flutter
String? responseId;
/// 回调的数据
/// 如果是H5调用flutter时候，从flutter传给H5的responseData作为回调数据
/// 如果是flutter调用H5，从H5传给flutter的responseData作为回调数据
dynamic? responseData;
JSMessage();
JSMessage.fromJson(Map<String, dynamic> json) {
callbackId = json['callbackId'];
data = json['data'];
handlerName = json['handlerName'];
responseId = json['responseId'];
responseData = json['responseData'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['callbackId'] = this.callbackId;
data["data"] = this.data;
data["handlerName"] = this.handlerName;
data['responseId'] = this.responseId;
data['responseData'] = this.responseData;
return data;
}
void copy({required JSMessage aNewMessage, required JSMessage aOldMessage}) {
aNewMessage.callbackId = aOldMessage.callbackId;
aNewMessage.data = aOldMessage.data;
aNewMessage.handlerName = aOldMessage.handlerName;
aNewMessage.responseId = aOldMessage.responseId;
aNewMessage.responseData = aOldMessage.responseData;
}
}
三、H5前端
我这里使用的是本地Html文件，在JS中调用window.AppJSBridge中的方法，如callHandler、registerHandler。
Html示例代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body{
background: #f5faff;
}
.button{
width: 100%;
line-height: 38px;
text-align: center;
font-weight: bold;
color: #fff;
text-shadow:1px 1px 1px #333;
margin:0 auto;
}
.button:nth-child(6n){
margin-right: 0;
}
.button.gray{
color: #8c96a0;
text-shadow:1px 1px 1px #fff;
border:1px solid #dce1e6;
box-shadow: 0 1px 2px #fff inset,0 -1px 0 #a8abae inset;
background: -webkit-linear-gradient(top,#f2f3f7,#e4e8ec);
background: -moz-linear-gradient(top,#f2f3f7,#e4e8ec);
background: linear-gradient(top,#f2f3f7,#e4e8ec);
}
</style>
<title>
JSBridge调用示例，常用方法调用
</title>
</head>
<body>
<button type="button" class="button gray" id="getUsername">getUsername</button>
<button type="button" class="button gray" id="getLoc">getLoc</button>
<button type="button" class="button gray" id="getVersion">getVersion</button>
<button type="button" class="button gray" id="scanQrCode">scanQrCode</button>
<button type="button" class="button gray" id="setMenuItems">setMenuItems</button>
<button type="button" class="button gray" id="callTelPhone">callTelPhone</button>
<button type="button" class="button gray" id="webImagePreview">webImagePreview</button>
<button type="button" class="button gray" id="showCheckBox">showCheckBox</button>
<button type="button" class="button gray" id="showDialog">showDialog</button>
<button type="button" class="button gray" id="saveImage">saveImage</button>
<button type="button" class="button gray" id="openApp">打开其他App</button>
<script>
var imgURL = 'http://tupian.qqjay.com/tou3/2016/0726/fc4fe6f04843172bd6dbfeb5b6fe0686.jpg';
var title = '分享券'
var desc = '分享券描述内容'
var url = 'http://www.laileshuo.com'
var wxSharedObject = {
thumb: imgURL,
title: title,
desc: desc,
url: url
};
var appSharedObject = {
thumb: imgURL,
title: title,
desc: desc,
url: url
};
var getUsername=document.getElementById("getUsername");
getUsername.addEventListener('click',function(){
AppJSBridge.callHandler('getUsername', '', function(response) {
window.alert(response)
});
});
var getLoc=document.getElementById("getLoc");
getLoc.addEventListener('click',function(){
AppJSBridge.callHandler('getLoc', '', function(response) {
window.alert(response)
});
});
var getVersion=document.getElementById("getVersion");
getVersion.addEventListener('click',function(){
AppJSBridge.callHandler('getVersion', '', function(response) {
window.alert(response)
});
});
var scanQrCode=document.getElementById("scanQrCode");
scanQrCode.addEventListener('click',function(){
AppJSBridge.callHandler('scanQrCode', '', function(response) {
window.alert(response)
});
});
var setMenuItems=document.getElementById("setMenuItems");
setMenuItems.addEventListener('click',function(){
AppJSBridge.callHandler('setMenuItems', 'wxinFreind,wxinTime,weibo,refresh', function(response) {
});
});
var callTelPhone=document.getElementById("callTelPhone");
var telPhone = '10086,10086';
callTelPhone.addEventListener('click',function(){
AppJSBridge.callHandler('callTelPhone', telPhone, function(response) {
// log('JS got response', response)
});
});
var webImagePreview=document.getElementById("webImagePreview");
var previewData = {
'imgs' : [ //图片列表数组
'http://7sbytg.com1.z0.glb.clouddn.com/yz2.png',
'http://7sbytg.com1.z0.glb.clouddn.com/yz2.png'
],
'index' : '0' //进入预览时显示第几个图片
};
webImagePreview.addEventListener('click',function(){
AppJSBridge.callHandler('webImagePreview', JSON.stringify(previewData), function(response) {
});
});
var showCheckBox=document.getElementById("showCheckBox");
var bottomBox = {
'optionList' : ['删除', '兑换', '其他'] //选项列表，选项列表对应自己的index
};
showCheckBox.addEventListener('click',function(){
AppJSBridge.callHandler('showCheckBox', JSON.stringify(bottomBox), function(response) {
window.alert(response)
});
});
var showDialog=document.getElementById("showDialog");
var dialog = {
'title' : '标题', // Dialog标题
'message' : '对话框内容', // Dialog内容，可选
'ok' : '确定', // 确认按钮的文字，可选，不填时不显示该按钮
'cancel' : '取消' // 取消按钮的文字，可选，不填时不显示该按钮
};
showDialog.addEventListener('click',function(){
AppJSBridge.callHandler('showDialog', JSON.stringify(dialog), function(response) {
// log('JS got response', response)
});
});
var saveImage=document.getElementById("saveImage");
saveImage.addEventListener('click',function(){
AppJSBridge.callHandler('saveImage', 'https://c-ssl.duitang.com/uploads/item/201611/12/20161112230928_vJEQy.jpeg', function(response) {
});
});
var openApp=document.getElementById("openApp");
openApp.addEventListener('click',function(){
AppJSBridge.callHandler('openApp', 'weixin', function(response) {
});
});
if (window.AppJSBridge) {
var dialog = {
'title' : '标题', // Dialog标题
'message' : '对话框内容', // Dialog内容，可选
'ok' : '确定', // 确认按钮的文字，可选，不填时不显示该按钮
'cancel' : '取消' // 取消按钮的文字，可选，不填时不显示该按钮
};
AppJSBridge.callHandler('showDialog', JSON.stringify(dialog), function(response) {
// log('JS got response', response)
});
}
document.addEventListener('AppJSBridgeReady', function() {
AppJSBridge.registerHandler('JSAPPHandler', function(data, responseCallback) {
var responseData = { 'Javascript Says':'Right back atcha!' }
responseCallback(responseData)
});
var dialog = {
'title' : '标题', // Dialog标题
'message' : '对话框内容', // Dialog内容，可选
'ok' : '确定', // 确认按钮的文字，可选，不填时不显示该按钮
'cancel' : '取消' // 取消按钮的文字，可选，不填时不显示该按钮
};
AppJSBridge.callHandler('showDialog', JSON.stringify(dialog), function(response) {
// log('JS got response', response)
});
}, false);
//WKWebView 可用
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
// 页面被挂起
window.alert(document.visibilityState)
} else {
// 页面呼出
window.alert(document.visibilityState)
}
})
</script>
</body>
</html>
四、flutter的webView_page页面打开对应的Html页面
这里使用的JSChannelManager、JSCookieConfig、JSChannelRegister等flutter
WebViewPage
class WebViewPage extends StatefulWidget {
const WebViewPage({
Key? key,
this.arguments,
}) : super(key: key);
final Object? arguments;
State<WebViewPage> createState() => _WebViewPageState();
}
class _WebViewPageState extends State<WebViewPage> {
String title = "";
String? url;
// WebViewController
WebViewController? _webViewController;
double webProgress = 0.0;
void initState() {
// TODO: implement initState
if (widget.arguments != null && widget.arguments is Map) {
Map obj = widget.arguments as Map;
url = obj["url"];
}
LoggerManager().debug("_WebViewPageState arguments:${widget.arguments}");
LoggerManager().debug("_WebViewPageState url:${url}");
super.initState();
}
void dispose() {
// TODO: implement dispose
super.dispose();
}
Widget build(BuildContext context) {
return Scaffold(
appBar: WebAppBar(
toolbarHeight: 44.0,
backgroundColor: Theme.of(context).primaryColor,
centerWidget: Text(
title,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 17,
color: ColorUtil.hexColor(0xffffff),
fontWeight: FontWeight.w600,
fontStyle: FontStyle.normal,
decoration: TextDecoration.none,
),
),
leadingWidget: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconButton(
padding: EdgeInsets.all(0.0),
onPressed: () {
webViewGoBack();
},
icon: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 24.0,
),
),
IconButton(
padding: EdgeInsets.all(0.0),
onPressed: () {
navigatorBack();
},
icon: Icon(
Icons.close_rounded,
color: Colors.white,
size: 30.0,
),
),
],
),
trailingWidget: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(
width: 28.0,
),
IconButton(
padding: EdgeInsets.all(0.0),
onPressed: () {
webViewReload();
},
icon: Icon(
Icons.refresh_outlined,
color: Colors.white,
size: 28.0,
),
),
],
),
),
body: Stack(
children: [
WebViewSkeleton(
url: url ?? "",
onWebResourceError: (WebResourceError error) {
if (mounted) {
// TODO onWebResourceError
}
},
onWebProgress: (int progress) {
if (mounted) {
// TODO onWebProgress
double precent = progress / 100.0;
if (precent > 1.0) {
precent = 1.0;
}
if (precent < 0.0) {
precent = 0.0;
}
setState(() {
webProgress = precent;
LoggerManager().debug("webProgress：${webProgress}");
});
}
},
onLoadFinished: (String? url) {
if (mounted) {
// TODO onLoadFinished
}
},
onWebTitleLoaded: (String? webTitle) {
if (mounted) {
setState(() {
title = webTitle ?? "";
});
}
},
onWebViewCreated: (WebViewController controller) {
_webViewController = controller;
},
),
buildProgressIndicator(context),
],
),
);
}
Widget buildProgressIndicator(BuildContext context) {
return (webProgress != 1.0)
? LinearProgressIndicator(
backgroundColor: Colors.transparent,
valueColor:
AlwaysStoppedAnimation(ColorUtil.hexColor(0x3b93ff)),
value: webProgress,
minHeight: 2,
)
: Container();
}
void navigatorBack() {
NavigatorPageRouter.pop();
}
void webViewGoBack() {
_webViewController?.canGoBack().then((res) {
// 是否能返回上一级
LoggerManager().debug("controller.canGoBack res: $res");
if (true == res) {
_webViewController?.goBack();
} else {
navigatorBack();
}
});
}
void webViewReload() {
_webViewController?.reload();
}
}
WebViewSkeleton
class WebViewSkeleton extends StatefulWidget {
const WebViewSkeleton({
Key? key,
required this.url,
required this.onWebProgress,
required this.onWebResourceError,
required this.onLoadFinished,
this.onWebTitleLoaded,
required this.onWebViewCreated,
}) : super(key: key);
final String url;
final Function(int progress) onWebProgress;
final Function(WebResourceError error) onWebResourceError;
final Function(String? url) onLoadFinished;
final Function(String? webTitle)? onWebTitleLoaded;
final Function(WebViewController controller) onWebViewCreated;
static GlobalKey<_WebViewSkeletonState> getGlobalKey() => GlobalKey();
State<WebViewSkeleton> createState() => _WebViewSkeletonState();
}
class _WebViewSkeletonState extends State<WebViewSkeleton> {
// WebViewController
WebViewController? _webController;
// JS与Flutter调用的message Queue
final JSChannelManager _jsChannelManager = JSChannelManager();
// cookie
final JSCookieConfig _jsCookieConfig = JSCookieConfig();
// flutter注册供H5调用的方法
late JSChannelRegister _jsChannelRegister;
// 尝试3次，每次间隔2秒
int _loadTitleTimes = 0;
bool _isDisposed = false;
void initState() {
// TODO: implement initState
super.initState();
_isDisposed = false;
_jsChannelRegister = JSChannelRegister(jsChannelManager: _jsChannelManager);
_jsChannelRegister.registerHandlers(
jsChannelRegisterHandler: (handlerName, data) {
if (JSChannelRegisterMethod.setTitle == handlerName) {
setWebPageTitle(data);
}
});
}
void dispose() {
// TODO: implement dispose
_isDisposed = true;
_jsChannelManager.reset();
_webController?.clearCache();
// _jsCookieConfig.clear();
super.dispose();
}
// flutter调用H5方法
void callJSMethod() {
_jsChannelManager.callHandler("JSAPPHandler", data: {"id": "a18c9fe0d"},
responseCallback: (dynamic responseData) {
LoggerManager().debug("callJSMethod responseData:${responseData}");
FlutterLoadingHud.showToast(message: jsonEncode(responseData));
});
}
void webPageLoadedStart() {
_loadTitleTimes = 0;
}
Future<void> getWebPageTitle({required String url}) async {
if (_isDisposed) {
return;
}
String? title = await _webController?.getTitle();
LoggerManager().debug("getWebPageTitle：${title}");
if (title != null && title.isNotEmpty) {
LoggerManager().debug("webTitle a:${title}");
setWebPageTitle(title);
} else {
try {
String? result = await _webController
?.runJavascriptReturningResult('window.document.title');
LoggerManager().debug("webTitle document.url:${result}");
if (result != null && result.isNotEmpty) {
setWebPageTitle(result);
} else {
result = await _webController?.runJavascriptReturningResult(
'window.document.getElementsByTagName("title")[0]');
LoggerManager()
.debug("webTitle document.getElementsByTagName:${result}");
setWebPageTitle(result);
}
} catch (e) {
print("getWebPageTitle：${e.toString()}");
// 最多尝试三次
if (_loadTitleTimes < 3) {
Future.delayed(Duration(seconds: 2), () {
_loadTitleTimes++;
getWebPageTitle(url: url);
});
}
}
}
}
// 设置页面标题
void setWebPageTitle(data) {
if (widget.onWebTitleLoaded != null) {
widget.onWebTitleLoaded!(data);
}
}
// 返回
void goBack() {
_webController?.canGoBack().then((res) {
// 是否能返回上一级
LoggerManager().debug("controller.canGoBack res: $res");
if (true == res) {
_webController?.goBack();
}
});
}
// 刷新
void reload() {
_webController?.reload();
}
Widget build(BuildContext context) {
return buildWebView(context);
}
Widget buildWebView(BuildContext context) {
UserModel userModel = Provider.of<UserModel>(context, listen: false);
LoggerManager().debug("ApiAuth().token：${ApiAuth.getToken()}");
return WebView(
debuggingEnabled: true,
initialUrl: widget.url,
javascriptMode: JavascriptMode.unrestricted,
userAgent: "app-yjxdh-webview",
initialMediaPlaybackPolicy: AutoMediaPlaybackPolicy.always_allow,
allowsInlineMediaPlayback: true,
initialCookies: _jsCookieConfig.initialCookies(),
onWebViewCreated: (controller) {
LoggerManager().debug("onWebViewCreated");
_jsCookieConfig.setCookies();
// controller.loadUrl(url)；此时也可以初始化一个url
controller.canGoBack().then((res) {
// 是否能返回上一级
LoggerManager().debug("controller.canGoBack res: $res");
});
controller.currentUrl().then((url) {
// 返回当前url
LoggerManager().debug("controller.currentUrl url: $url");
});
controller.canGoForward().then((res) {
//是否能前进
LoggerManager().debug("controller.canGoForward res: $res");
});
_webController = controller;
_jsChannelManager.updateController(controller, context);
String filePre = "file://";
if (widget.url.startsWith(filePre)) {
String html = widget.url.substring(filePre.length);
DefaultAssetBundle.of(context)
.loadString('assets/htmls/${html}')
.then((value) => _webController?.loadHtmlString(value));
} else {
if (widget.url.startsWith("http://") ||
widget.url.startsWith("https://")) {
_webController?.loadUrl(widget.url, headers: {
'Referer': widget.url,
});
}
}
// 注入jsReady
_jsChannelManager.injectJavascriptReady();
widget.onWebViewCreated(controller);
},
onProgress: (int progress) {
widget.onWebProgress(progress);
},
javascriptChannels: <JavascriptChannel>{
_jsChannelManager.javascriptChannel!,
},
navigationDelegate: (NavigationRequest request) {
bool canNavigate = _jsChannelRegister.navigationDecision(request);
// 允许路由替换
return canNavigate
? NavigationDecision.navigate
: NavigationDecision.prevent;
},
onPageStarted: (String url) {
// 网页开始加载
webPageLoadedStart();
LoggerManager().debug('onPageStarted url: $url');
},
onPageFinished: (String url) {
// 网页加载完成
LoggerManager().debug('onPageFinished url: $url');
// 注入
_jsChannelManager.injectBridgeJavascript();
_jsChannelManager.checkJavascriptBridge();
// 加载完成
widget.onLoadFinished(url);
// 获取网页的标题
getWebPageTitle(url: url);
},
gestureNavigationEnabled: true,
backgroundColor: ColorUtil.hexColor(0xf7f7f7),
onWebResourceError: (WebResourceError error) {
/// error
LoggerManager().debug("onWebResourceError:${error}");
widget.onWebResourceError(error);
},
);
}
Widget buildButtonRow(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
buildButton(context),
SizedBox(
width: 10.0,
),
buildRefreshButton(context),
],
);
}
// 展开的按钮
Widget buildButton(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black26,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: TextButton(
onPressed: () {
callJSMethod();
},
child: Text(
'调用JS方法菜单',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
),
);
}
// 刷新按钮
Widget buildRefreshButton(BuildContext context) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.black26,
width: 1.0,
style: BorderStyle.solid,
),
borderRadius: BorderRadius.all(
Radius.circular(8.0),
),
),
child: TextButton(
onPressed: () {
reload();
},
child: Text(
'刷新WebView',
style: TextStyle(
fontSize: 12,
color: Colors.black,
),
),
),
);
}
}
六、运行效果图
五、小结
flutter开发实战-webview_flutter结合javascriptbridge实现flutter与html交互，通过使用flutter webview通过javascriptBridge来进行交互、交互用到了JavascriptChannel、cookie等。代码是好久之前写的，现在文档整理的有点乱，代码中基本上都有注释。希望有对你有用的点。
学习记录，每天不停进步。