业务需求：蓝牙外设<-->连接APP<-->打开WKWebView加载的Web小游戏。
业务描述：希望蓝牙设备设备通过连接APP和Web网页进行数据交互。Web中的游戏业务逻辑依赖蓝牙设备传输的数据，同时Web中由蓝牙设备传输的数据触发的某些业务状态，回传给蓝牙设备。
所以，这里暂时先记录下App和Web通信部分的逻辑；蓝牙部分后期补上。
iOS(Native)部分
1.1、 iOS WKWebView的初始化部分
/// js 调用 原生 无参、无返回值的函数
private let jsCallNativeMethodName = "jsCallNativeMethod"
/// js 调用 原生 无参、有返回值的函数
private let jsCallNativeJsonStringMethodName = "jsCallNativeJsonStringMethod"
/// js 调用 原生 有参、无返回值或有返回值的函数
private let jsCallNativeJsonStringWithParamName = "jsCallNativeJsonStringWithParam"
/// 原生 调用 js 有参、无返回值或有返回值的函数
private let nativeCallScriptName = "nativeCallScript"
var webView: WKWebView!
var requestUrl:URL?
/// 初始化WebView
func initWebView() {
// 添加js对Native方法调用的监听
let jsCalliOSMethons = [jsCallNativeMethodName,
jsCallNativeJsonStringMethodName,
jsCallNativeJsonStringWithParamName,
nativeCallScriptName]
// native与JavaScript的交互管理
let config = WKWebViewConfiguration()
jsCalliOSMethons.forEach { name in
config.userContentController.add(self, name: name)
}
webView = WKWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.size.width,
height: UIScreen.main.bounds.size.height), configuration: config)
webView.uiDelegate = self
webView.navigationDelegate = self
webView.allowsBackForwardNavigationGestures = true
webView.scrollView.contentInsetAdjustmentBehavior = .never
webView.scrollView.contentInset = .zero
webView.scrollView.insetsLayoutMarginsFromSafeArea = false
view.addSubview(webView)
if (requestUrl != nil) {
webView.load(URLRequest(url: requestUrl!))
} else {
let url:String = "http://192.168.1.4:7456/web-mobile/web-mobile/index.html"
requestUrl = NSURL(string: url)! as URL
webView.load(URLRequest(url: requestUrl!))
}
}
override func viewWillDisappear(_ animated: Bool) {
super.viewWillDisappear(animated)
// 移除注册的js方法
webView.configuration.userContentController.removeAllScriptMessageHandlers()
}
1.2、WKWebView的代理
WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate
//postMessage(message: any, targetOrigin: string, transfer?: Transferable[]): void;
//postMessage(message: any, options?: WindowPostMessageOptions): void;
func userContentController(_ userContentController: WKUserContentController, didReceive messa
WKScriptMessage) {
// 通过接收JS传出消息的name,进行捕捉的回调方法
print("-- ⚠️native 收到 js 调用：\(message.name) body:\(message.body)")
}
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
print("-- ⚠️native did finish web load --")
}
func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error)
print("-- ⚠️native did fail \(error.localizedDescription) --")
}
func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!,
withError error: Error) {
print("-- ⚠️native did fail provisional navigation \(error.localizedDescription) --")
}
func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction,
decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
// 拦截到请求url
print("-- ⚠️native decide policy for \(String(describing: navigationAction.request.url))
")
if navigationAction.request.url?.scheme?.caseInsensitiveCompare("jsCall") == .orderedSame
decisionHandler(.cancel)
return
}
decisionHandler(.allow)
}
//alert(message?: any): void;
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String,
initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
print("-- ⚠️native alert message：\(message)")
let alertViewController = UIAlertController(title: "JS Alert Msg", message: message,
preferredStyle: .alert)
let sureAction = UIAlertAction(title: "Sure", style: .default) { action in
completionHandler()
}
alertViewController.addAction(sureAction)
self.present(alertViewController, animated: true)
}
// confirm(message?: string): boolean;
func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String,
initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
print("-- ⚠️native alert message：\(message)")
let alertViewController = UIAlertController(title: "JS Confirm Msg", message: message,
preferredStyle: .alert)
let sureAction = UIAlertAction(title: "Sure", style: .default) { action in
completionHandler(true)
}
let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { action in
completionHandler(false)
}
alertViewController.addAction(sureAction)
alertViewController.addAction(cancelAction)
self.present(alertViewController, animated: true)
}
// prompt(message?: string, _default?: string): string | null;
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String,
defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping
(String?) -> Void) {
print("-- ⚠️native run JS Text Input With Prompt:\(prompt)")
// let alertViewController = UIAlertController(title: "Text Input With Prompt", message: prompt, preferredStyle: .alert)
//
// alertViewController.addTextField { textField in
// textField.text = defaultText
// }
//
// let sureAction = UIAlertAction(title: "Sure", style: .default) { action in
// completionHandler(alertViewController.textFields?[0].text)
// }
// alertViewController.addAction(sureAction)
// self.present(alertViewController, animated: true)
switch prompt {
case jsCallNativeMethodName:// 无参、无返回值
self.jsCallNativeMethod()
completionHandler("")
return
case jsCallNativeJsonStringMethodName:// 无参、有返回值
completionHandler(self.jsCallNativeJsonStringMethod())
return
case jsCallNativeJsonStringWithParamName:
completionHandler(self.jsCallNativeJsonStringWithParam(param: defaultText ?? ""))
return
default:
// 不处理无效的prompt
completionHandler("error param")
return
}
}
1.3、Native和JS的通信方法
extension GGWebViewController {
//MARK: - 被js调用的iOS方法
/// js 调用 原生 无参、无返回值的函数
func jsCallNativeMethod() {
print("-- ⚠️ 这里是 原生 无参、无返回值的函数 --")
var paramToScript:String = "iOS 调用 js 方法传递的参数"
self.dispatchEventToScript(param: paramToScript)
}
/// js 调用 原生 无参、有返回值的函数
func jsCallNativeJsonStringMethod() -> String {
let jsonString = "⚠️ 这是 原生 无参、有返回值函数 返回给JS的值"
return jsonString
}
/// 调用 原生 有参、无返回值或有返回值的函数
/// 可通过param来判断是否需要返回值
func jsCallNativeJsonStringWithParam(param:String) -> String {
guard let funcJsonData = param.data(using: .utf8) else{
print("--- ⚠️解析出错1 ---")
return "param error"
}
do {
guard let funcInfoDic = try JSONSerialization.jsonObject(with: funcJsonData) as? Dictionary<String, Any> else{
print("---⚠️解析出错3 --")
return "json serialization error"
}
print("---⚠️web回调需要返回值的函数:\(funcInfoDic)")
let jsonString = "⚠️ Native接受JS参数，并回调给JS"
return jsonString
} catch let errore {
print("--- ⚠️解析出错2 ---：\(errore.localizedDescription)")
return errore.localizedDescription
}
}
//MARK: - iOS调用js的方法
func dispatchEventToScript(param: String) {
var callBack:String = nativeCallScriptName + "(\"\(param)\")"
webView.evaluateJavaScript(callBack) { response, error in
if (error != nil) {
print("-- ⚠️\(self.nativeCallScriptName) error:\(String(describing: error))")
} else {
print("-- ⚠️Native调用JS回调的参数：\(String(describing: response))")
}
}
}
}
Web部分(TypeScript)
2.1、Web访问Native的方法(访问的方法要在Native实现并注册)
// -- JS 主动调用 原生 方法的处理 (对象方法) --
// 调用 原生 无参、无返回值的函数
public requestMethod() {
console.log("-- requestMethod --");
window.prompt("jsCallNativeMethod");
}
// 调用 原生 无参、有返回值的函数
public requestMethodForValue() {
let jsonString = window.prompt("jsCallNativeJsonStringMethod");
console.log("-- requestMethodForValue" + jsonString + "--");
}
// 调用 原生 有参、无返回值的函数
public requestMethodWithParam() {
console.log("-- requestMethodWithParam --");
window.prompt("jsCallNativeJsonStringWithParam","这条message是传递给Native的参数");
}
// 调用 原生 有参、有返回值的函数
public requestMethodWithParamForValue() {
let jsonString = window.prompt("jsCallNativeJsonStringWithParam","{\"desc\":\"这条message是传递给Native的JSON字符串参数，同时该函数可接受Native返回给js的值\"}");
console.log("-- requestMethodWithParamForValue" + jsonString + "--");
}
2.3、Native访问Web的方法
/ -- 原生 主动调用 JS 方法的处理 （⚠️原生调用JS的方法一定要挂载到全局window下，否则Native会调用JS方法失败）--
// param：参数 可为空
// string：返回值 可为空
function nativeCallScript(param:string):string {
console.log("-- nativeCallScript --");
console.log(param);
// 原生驱动游戏角色运动
if (param != null) {
}
let jsonstring = "这条Message是 Native 主动调用 JS 方法，将Native传递过来的param处理后，回调给Native"+ "->param:(" + param + ")";
return jsonstring;
}
(<any>window).nativeCallScript = nativeCallScript;
