HTML5可以与本地App交互吗？
前端开发
浏览：901 次
h5与原生App的交互原理
如今，移动webApp经常需要与本地App（在webview中运行）进行交互和通信，例如微信的jssdk通过窗口。wx对象调用一些本地App功能。因此，这次我们将回顾h5与原生App之间的交互原理。
h5和原生App之间的交互本质上是两种调用：
App调用h5的代码
H5调用App的代码
1.App调用h5的代码
因为app是主机，可以直接访问h5，所以这个调用相对简单。它是在h5中公开一些全局对象（包括方法），然后在本地App中调用这些对象。
javascript语言
一
二
三
四
窗sdk={
；double=值=>值*2，
；三重＝值＝＞值*3，
};
安卓
一
二
三
四
五
六
webview.avalateJavascript（'windows.sdk.double（10）'，新值回调＜String>（）{
@推翻
；public void onReceiveValue（字符串）{
nbsp； ；//二十
}
});
网间网操作系统
一
二
NSString*func=@“window.sdk.double（10）”；
NSString*str=[webview stringByEvaluatingJavaScriptFromString:func]；//二十
2.h5呼叫App代码
因为h5无法直接访问主机应用，所以这个调用相对复杂。
有两种常用的调用方式：
App将一个全局js对象注入h5，然后直接在h5中访问该对象
自定义协议请求由h5发起。App拦截请求后，调用h5中的回调函数
2.1将全局js对象从app注入h5
这种方法的通信机制简单易懂。H5没有什么新功能，因此建议使用。然而，这种方式可能存在安全风险。详细检查您不知道的Android WebView使用漏洞。
安卓
一
二
三
四
五
六
七
八
九
十
十一
webview。addJavascriptInterface（新对象）{
@Javascript接口
；公共int double（值）{
nbsp； ；返回值*2；
}
nbsp；
@Javascript接口
；公共int三元组（值）{
nbsp； ；返回值*3；
}
}，“appSdk”）；
网间网操作系统
一
二
NSString*scripts=@“window.appSdk={double:value=>value*2，triple:value=>value*3}”；
[webview stringByEvaluatingJavaScriptFromString:scripts]；
javascript语言
一
窗口.appSdk。双（10）；//二十
2.2通过h5发送自定义协议请求
这种方法有点复杂，因为它需要自定义协议，这对许多前端开发人员来说是新的。因此，通常不建议使用此方法，可作为第一种方法的补充。
需要以下步骤：
协议由App定制，例如sdk://action?params
在h5中定义回调函数，例如windowbridge={getDouble:value=>{}，getTriple:value=>{}}
自定义协议请求由h5发起，例如location href='sdk://double?value=10' ;
App拦截请求后，执行相应的操作以获取返回值
App调用h5中的回调函数，例如window。桥getDouble（20）；
javascript语言
一
二
三
四
五
六
七
八
九
十
窗桥={
；getDouble:value=>{
nbsp； ；//二十
}，
；getTriple:value=>{
nbsp； ；//更多
}
};
地方href='sdk://double?value=10' ;;
安卓
一
二
三
四
五
六
七
八
九
十
十一
十二
十三
十四
十五
十六
十七
webview。setWebViewClient（新的WebViewClient）{
nbsp； ；@推翻
nbsp； ；公共布尔值shouldOverrideUrlLoading（WebView视图，字符串url）{
nbsp； ； ； ； ； ；//判断如果url以sdk://开头，它将被阻止
nbsp； ； ； ； ； ；//然后从urlsdk://action?params从中执行操作和参数
nbsp； ； ； ； ； ； ；
nbsp； ； ； ； ； ；Uri Uri=Uri。解析（url）； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ； ；&铌
