h5android交互
㈠ android嵌入h5，怎么交互
Android和H5之间的交互
hybrid App开发也不是什么新鲜事了，其中native和h5之间的交互则是必不可少的。Android中是如何和H5交互的？
1、webView加载页面
我们都知道在Android中是通过webView来加载html页面的，根据HTML文件所在的位置不同写法也不同：
//例如：加载assets文件夹下的test.html页面
mWebView.loadUrl("file:///android_asset/test.html")
//例如：加载网页
mWebView.loadUrl("http://www..com")
如果只是这样调用mWebView.loadUrl()加载的话,那么当你点击页面中的链接时，页面将会在你手机默认的浏览器上打开。那如果想要页面在App内中打开的话，那么就得设置setWebViewClient：
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
mWebView.loadUrl(url);
return true;
}
}
});
2、Android本地通过java调用HTML页面中的JavaScript方法
想要调用js方法那么就必须让webView支持
WebSettings webSettings = mWebView.getSettings();
//设置为可调用js方法
webSettings.setJavaScriptEnabled(true);
若调用的js方法没有返回值，则直接可以调用mWebView.loadUrl("JavaScript:do()");其中do是js中的方法；若有返回值时我们可以调用mWebView.evaluateJavascript()方法：
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
js代码如下：
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function do(){
document.getElementById("p").innerHTML="hello world";
}
</script>
2、js调用Android本地Java方法
在Android4.2以上可以直接使用@JavascriptInterface注解来声明，下面是在一个本地Java方法
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
定义完这个方法后再调用mWebView.addJavascriptInterface()方法：
mWebView.addJavascriptInterface(new JsInteration(), "android");
那么在js中怎么来调用呢？
<script type="text/javascript">
function s(){
//调用Java的back()方法
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
4、拦截HTML页面中的点击事件
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//判断url拦截事件
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
以上就是Java调用js方法以及js调用Java方法的实现交互方式中的一种。下面给出完整代码：
mainActivity
public class MainActivity extends AppCompatActivity {
public static final String TAG = "MainActivity";
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mWebView = (WebView) findViewById(R.id.webView);
mWebView.loadUrl("file:///android_asset/test.html");
WebSettings webSettings = mWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
mWebView.addJavascriptInterface(new JsInteration(), "android");
mWebView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (url.equals("file:///android_asset/test2.html")) {
Log.e(TAG, "shouldOverrideUrlLoading: " + url);
startActivity(new Intent(MainActivity.this,Main2Activity.class));
return true;
} else {
mWebView.loadUrl(url);
return false;
}
}
});
}
//Android调用有返回值js方法
@TargetApi(Build.VERSION_CODES.KITKAT)
public void onClick(View v) {
mWebView.evaluateJavascript("sum(1,2)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.e(TAG, "onReceiveValue value=" + value);
}
});
}
public class JsInteration {
@JavascriptInterface
public String back() {
return "hello world";
}
}
}
test.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function sum(a,b){
return a+b;
}
function s(){
var result =window.android.back();
document.getElementById("p").innerHTML=result;
}
</script>
</head>
<body>
<button onclick="s()">调用本地方法</button>
<a href="file:///android_asset/test2.html">点击</a>
<p id="p"></p>
</body>
</html>
㈡ H5页面与原生App（安卓，IOS）交互
在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。
1. 页面开发 —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）
2.前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为index.html），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。
3.进行数据对接：两种对接方式（1）.前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。（2）.前端页面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。
㈢ H5调用Android和ios原生方法(react)
混合开发中需要web需要和原生交互方式。
原生需要写方法来让H5调用，H5在window中获取方法。
ios壳中方法全部放在webkit.messageHandlers对象中，前端调用只需要
Android中调用方法，直接在window中调用安卓给的对象
H5调用原生方法后，原生怎么回调给H5?
跟原生一样，H5需要写好方法，让原生调用，这里调用就是原生直接调用了H5的方法，当然这个方法是要全局的方法，在window对象中的。
在react中写原生调用的方法，需要在调用的组件中componentDidMount里面添加方法：
原生方法可能多个地方使用，每次都去判断系统，然后分别调用不同方法很麻烦，不是前端该有范儿。应该在一个文件中统一处理，其他页面只需要调用处理好的方法就好。
例如获取当前设备号，原生封装好方法后，统一在一个文件中处理：
这样在其他页面就可以直接使用getDeviceId就可以得到得到设备号，才不管你是哪个系统呢。
㈣ H5和Native交互原理
Hybrid架构的核心就是JSBridge交互，而实现这个交互的前提是弄清楚H5和Native端的交互
本文主要介绍Native端（Android/iOS）和H5端（泛指前端）的交互原理
原生和前端的交互有两种方式：url scheme以及JavaScriptCore（在Android中是addJavascriptInterface）
url scheme适用于所有的系统设备（低版本Android和低版本iOS都适用）
但是url scheme毕竟是通过url拦截实现的，在大量数据传输，以及效率上都有影响
另一种方法则在低版本中会有这样或那样的问题
如JavaScriptCore不支持iOS7以下，addJavascriptInterface在4.2以前有风险漏洞
当然了，时至今日，这些低版本造成的影响已经慢慢不再
这个是最广为流传的交互方式，起因是因为在hybrid刚出来时，很多低版本都需要兼容，因此几乎都用的这种
一些概念：
一般清空下，url scheme是一种类似于url的链接,是为了方便app直接互相调用设计的
具体为,可以用系统的OpenURI打开一个类似于url的链接(可拼入参数),
然后系统会进行判断,如果是系统的url scheme,则打开系统应用,
否则找看是否有app注册这种scheme,打开对应app
需要注意的是,这种scheme必须原生app注册后才会生效,如微信的scheme为(weixin://)
而本文中混合开发交互的url scheme则是仿照上述的形式的一种方式
具体为,由前端页面通过某种方式触发scheme(如用iframe.src),
然后Native用某种方法捕获对应的url触发事件,然后拿到当前的触发url,
根据定义好的协议,分析当前触发了那种方法,然后根据定义来执行等
协议类似于： quickhybrid://xxx
一般这种交互的url没有必要在原生app配置中注册
注意⚠️： ️iOS10以后，urlscheme必须符合url规范，否则会报错。
基本原理：
如下图：
相比于其它方案的优点：
所以如果需要兼容这类型低版本的机型，url scheme方案是不二选择
分别包括Android，iOS中H5和原生互相调用，总结如下：
H5调Android：
首先，原生webview需要先注册可供前端调用的JS函数
然后H5中即可调用原生中注册的函数
注意：
Android调H5：
在4.4版本之前
在4.4及以后（包括）
注意：
H5调iOS：
以OC为例
首先，需要引入JavaScriptCore库
然后原生需要注册API
之后前端就可以调用了
注意：
iOS调H5：
注意：
本文转自： http://www.cnblogs.com/dailc/p/8097598.html
㈤ H5&&Android交互
JS调用Android原生方法，参数须是Java的内置类型：int、String等，若是JavaScript对象，需字符串化，否则Android无法正确接收；
JS调用Android原生方法，返回值是内置类型：int、String等，JS能够正确接收。若是Java自定义类型，则JS接收不到正确数据；
JS可以通过Android原生方法的返回值获取内置类型的参数，如String
若需要互传复杂类型的对象，双方须以String对媒介，以各自语言的Json工具类进行相互转化；
㈥ Android WebView与H5交互
可以通过registerHandler（）用来注册一个java函数，来实现js回调的handler
Js做如下声明
MainActivity
activity_main.xml
wx.html
附上一篇 传送门
㈦ 安卓Webview 与 vue h5 使用js交互
总的来说都是使用安卓webview.loadUrl(url)加载页面
url为在线网页连接
将打包好的网页资源放入安卓静态目录
加载目录为
Android 调用 JS 有两种方式，都是通过 WebView 的方法：
webview.loadUrl()
webview.evaluateJavascript()
js方法
vue需要把方法挂载到windows
通过映射js object暴露给js操作
安卓
h5调用
经常需要适配安卓和ios
加入以下机型判断
Android与H5交互——JSBridge - (jianshu.com)
㈧ H5与原生APP交互方式 (IOS及安卓)
判断设备
JS与IOS交互方式一：WKScriptMessageHandler
WKWebView有一个内容交互控制器，该对象提供了通过JS向WKWebView发送消息的途径。需要设置MessageHandler，大家把这个功能简称为MessageHandler。
IOS具体实现参考： 链接
这里只说js调用
JS与IOS交互方式二：WebViewJavascriptBridge交互 拦截url做事件处理，如果要传参数，不建议用这种
Android端交互
冒号前面区分是什么功能，冒号后面是接收的参数