H5与原生app的三种交互方式

1.app 调用 h5 的代码

与app进行预定。H5暴露全局方法提供给app调用
代码`

javascript

window.sdk = {
double = value => value * 2,triple = value => value * 3,
};

android：

webview.evaluateJavascript('window.sdk.double(10)', new ValueCallback() { @Override public void onReceiveValue(String s) {   
// 20}
});

ios:

NSString*func = @"window.sdk.double(10)";
NSString*str = [webview stringByEvaluatingJavaScriptFromString:func]; // 20

2. h5 调用 app 的代码

2.1app 向H5注入全局方法

由 app 向 h5 注入一个全局 js 对象，然后在 h5 直接访问这个对象

android：

webview.addJavascriptInterface( new Object () {@JavascriptInterface public int double (value) {    return value * 2;  }@JavascriptInterfacepublic int triple(value) {return value *  3 ;}
},  "appSdk" );

ios:

@interface AppSdk : NSObject
{}
- ( int )  double :( int )value;- ( int ) triple:( int )value;
@end
@implementation AppSdk 
- ( int )  double :( int )value {
return value * 2
}
- (int) triple:(int)value {returnvalue * 3;
}
@end
JSContext *context=[webview valueForKeyPath:@ "documentView.webView.mainFrame.javaScriptContext" ];
AppSdk *appSdk = [AppSdk new];
context[@ "appSdk"] = appSdk;

javascript

window.appSdk.double(10); 
// 20

2.2 协议拦截

由 h5 发起一个自定义协议请求，app 拦截这个请求后，再由 app 调用 h5 中的回调函数

1. 由 app 自定义协议，比如 sdk://action?params

2. 在 h5 定义好回调函数，比如
   window.bridge={getDouble:value=>{},getTriple:value=>{}}

3. 由 h5 发起一个自定义协议请求，比如 location.href=‘sdk://double?value=10’

4. app 拦截这个请求后，进行相应的操作，获取返回值

5. 由 app 调用 h5 中的回调函数，比如 window.bridge.getDouble(20);

javascript

window.bridge = {getDouble: value => { // 20}, getTriple: value => {// more  }
};
location.href =  'sdk://double?value=10' ;

android：

webview.setWebViewClient( new WebViewClient () {
@Override
public boolean houldOverrideUrlLoading( WebView view,String url) {
// 判断如果 url 是 sdk:// 打头的就拦截掉
// 然后从 url sdk://action?params 中取出 action 与params 
Uri uri = 
Uri.parse(url);                                 if ( uri.getScheme().equals( "sdk" )) {// 比如 action = double, params = value=10webview.evaluateJavascript( 'window.bridge.getDouble(20)' );return true;}return super .shouldOverrideUrlLoading(view, url);}
});

ios:

- (BOOL)webview:( UIWebView *)webview shouldStartLoadWithRequest:( NSURLRequest *)request navigationType:( UIWebViewNavigationType )navigationType { 
// 判断如果 url 是 sdk:// 打头的就拦截掉
// 然后从 url sdk://action?params 中取出 action 与params
NSString *urlStr = request.URL.absoluteString;
if ([urlStr hasPrefix:@ "sdk://" ]) {// 比如 action = double, params = value=10NSString *func = @"window.bridge.getDouble(20)" ;[webview stringByEvaluatingJavaScriptFromString:func];return NO; }return YES;
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！