android webview 统一,让 JS 在 Android/iOS WebView 中反调接口统一, 调用更容易

让 JS 在 Android/iOS WebView 中反调接口统一, 调用更容易

EasyJSBridge 让 JS 在 Android/iOS webView 中反调接口统一, 调用更容易;

JS 调用 Demo

var methods = ["test1", "test2", "test3"];

var easyJSBridge = EasyJSBridge.create("android", "ios", methods);

$(".test1").click(function() {

easyJSBridge.test1("parameter1")

});

$(".test2").click(function() {

easyJSBridge.test2("parameter1", 2)

});

$(".test3").click(function() {

easyJSBridge.test3("androidParameter1", 2, ["iosParameter1", 2, "3"])});

约定

在 Android 中通过

webView.addJavascriptInterface(obj,'android')

绑定反调;

在 iOS 中通过 WKWebView 的

WKScriptMessageHandler

绑定反调, 可以有两种方式绑定, 二选一即可:

通过 addScriptMessageHandler 添加一个 name, 然后通过约定的参数来解析要调用的方法和参数

[userContentController addScriptMessageHandler:self name:@"iOS"];

然后解析 js 调用的数据:window.webkit.messageHandlers.iOS.postMessage({method:'test1',parameter:['','']});

window.webkit.messageHandlers.iOS.postMessage({method:'test2',parameter:['','']})

注意

{method:'test1',parameter:['','']}

中的 method 和 parameter 必须约定如此, parameter 是参数数组, iOS 需自己解析参数;

通过 addScriptMessageHandler 添加多个 name, 然后根据不同 name 来区分调用的方法[userContentController addScriptMessageHandler:selfname:@"test1"];

[userContentController addScriptMessageHandler:selfname:@"test2"];

if([message.name isEqualToString:@"test1"]){

}elseif([message.name isEqualToString:@"test2"]){

}

然后解析 js 调用的数据:window.webkit.messageHandlers.test1.postMessage('arg1',2)

window.webkit.messageHandlers.test2.postMessage('arg1','arg2')

JS 调用中, 约定的反调方法名称都要显式在数组中初始化varmethods=["test1","test2","test3"];

vareasyJSBridge=EasyJSBridge.create("android","ios",methods);

API

初始化

var easyJSBridge = EasyJSBridge.create('androidObj','iOSObj',[methodList])参数名必选类型说明androidObj是stringAndroid WebView 绑定的对象名称

iOSObj否stringiOS WebView 绑定的对象名称

methodList是数组方法名称列表

备注

如果有 iOSObj, 那就按照如下方法约定反调window.webkit.messageHandlers.iOS.postMessage({method:'test1',parameter:['','']});

window.webkit.messageHandlers.iOS.postMessage({method:'test2',parameter:['','']})

如果没有 iOSObj, 那就按照如下方法约定反调window.webkit.messageHandlers.test1.postMessage('arg1',2)

window.webkit.messageHandlers.test2.postMessage('arg1','arg2')

调用反调

先初始化varmethodList=['method1','method2'];

vareasyJSBridge=EasyJSBridge.create('androidObj','iOSObj',methodList);

然后根据初始化时的 methodList 方法名直接调用easyJSBridge.method1("arg1","arg2");

easyJSBridge.method2("arg1","arg2");

备注

如果 Android 和 iOS 调用参数值不一样, 或者参数不一样, 可以如下调用:

easyJSBridge.method1("androidArg1","androidArg2",["iOSArg1","iOSArg2","iOSArg3"]);

method1 中的数组参数给 iOS 用, 前面的参数给 android 用License

MITLicense

Copyright(c)2018Yale

Permission is hereby granted, free of charge, to any person obtaining a copy

of this software and associated documentation files (the "Software"), to deal

in the Software without restriction, including without limitation the rights

to use, copy, modify, merge, publish, distribute, sublicense, and/or sell

copies of the Software, and to permit persons to whom the Software is

furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all

copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR

IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,

FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE

AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER

LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,

OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE

SOFTWARE.

来源: https://juejin.im/entry/5aeebb096fb9a07a9d703bda