一、ios与H5之间的交互
| <!DOCTYPE html> | |
| <html> | |
| <meta charset="utf-8"> | |
| <body> | |
| <h1>OC与JS交互</h1> | |
| <p id="yidahulian1"></p> | |
| <p id="yidahulian2"></p> | |
| <script> | |
| --不带参数oc->js | function yida_oc_to_js() |
| { | |
| x=document.getElementById("yidahulian1"); // 找到元素 | |
| x.innerHTML="OC调用JS(没有传值)[成功]";// 改变指定标签内容 | |
| } | |
| -----带参数的oc->js | function yida_oc_to_js2(num,name,url) |
| { | |
| //alert(name+url); | |
| x=document.getElementById("yidahulian2"); // 找到元素 | |
| x.innerHTML="OC调用JS[成功],传过来的字符串为:"+num+name+url;// 改变指定标签内容 | |
| } | |
| </script> | |
| <input type="button" value="JS调用OC不传值" οnclick="js_call_oc()"/> | |
| <input type="button" value="JS调用OC并传值" οnclick="js_call_oc2()"/> | |
| <input type="button" value="JS调用OC代码里的无参方法名" οnclick="js_call_oc3()"/> | |
| <input type="button" value="JS调用OC代码里的有参数方法名" οnclick="js_call_oc4()"/> | |
| <script> | |
| -----js->oc | function js_call_oc() |
| { | |
| //向OC代码传空值 | |
| window.webkit.messageHandlers.yida_js_to_oc.postMessage(null); | |
| } | |
| function js_call_oc2() | |
| { | |
| //向OC代码传字符串 | |
| window.webkit.messageHandlers.yida_js_to_oc2.postMessage("百度https://www.baidu.com") | |
| } | |
| function js_call_oc3() | |
| { | |
| //向OC代码传数组 | |
| window.webkit.messageHandlers.yida_js_to_oc3.postMessage(["hello","world","百度"]); | |
| } | |
| function js_call_oc4() | |
| { | |
| //向OC代码传字典(对象) | |
| window.webkit.messageHandlers.yida_js_to_oc4.postMessage({"key1":"百度","key2":"hello world"}); | |
| } | |
| </script> | |
| </body> | |
| </html> |
二、
Android和H5交互一篇就够了
具体参考：https://blog.csdn.net/w15321970103/article/details/75635454
第一种方法：
android端：
//这个是button的点击事件
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn1:
//参数 “javascript:” + js方法名
wv.loadUrl("javascript:message()");
break;
case R.id.btn2:
//在android调用js有参的函数的时候参数要加单引号
wv.loadUrl("javascript:message2('" + name + "')");
break;
}
}
//下面的两个方法是让H5网页来调的
//这个注解必须加 因为 兼容问题
@JavascriptInterface
public void setMessage() {
Toast.makeText(this, "我弹", Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void setMessage(String name) {
Toast.makeText(this, "我弹弹" + name, Toast.LENGTH_SHORT).show();
}
H5页面端：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button id="btn0">调用android无参参数</button>
<button id="btn1">调用android有参参数</button>
<a href='aa://atguigu/path'>点我试试</a>
<a href='https://www.baidu.com'>百度</a>
<div id="content"></div>
</body>
<script type="text/javascript">
var name = "啊福老师 哇哇哇"
document.getElementById("btn0").onclick = function(){
//android是传过来的对象名称，setmessage是android中的方法
android.setMessage();
};
document.getElementById("btn1").onclick = function(){
//android是传过来的对象名称，setmessage是android中的方法
android.setMessage(name);
};
var content = document.getElementById("content");
function message(){
content.innerHTML = "调用了有参的js函数"
};
function message2(des){
content.innerHTML = "调用了"+des;
};
</script>
</html>
第二种交互方式 而是采用scheme + cookie的方式
--1、Java 调用 js里面的函数、效率低、估计要200ms左右
而js去调Java的方法、速度很快、50ms左右、所以尽量用js调用Java方法
--2、Java 调用 js 的函数、没有返回值、调用了就控制不到了
--3、Js 调用 Java 的方法、返回值如果是字符串、你会发现这个字符串是 native 的、转成 locale 的才能正常使用
--4、网页中尽量不要使用jQuery、执行起来需要5-6秒、最好使用原生的js写业务脚本、以提升加载速度、改善用户体验
--5、Android4.2以下的系统存在着webview的js对象注入漏洞…Android API 16 没有正确限制使用webview.addJavaScripteInterface方法，远程攻击者 使用JavaReflectionAPI利用执行任意java对象的方法
scheme设置：对于要启动的Activity
//这一章不详细讲解scheme的使用
<activity android:name=".SecondActivity">
<intent-filter>
<data android:scheme="aa"/>
<action android:name="android.intent.action.VIEW"/>
<category android:name="android.intent.category.DEFAULT"/>
<category android:name="android.intent.category.BROWSABLE"/>
</intent-filter>
</activity>
看一下原来的H5代码
<a href='aa://atguigu/path'>点我试试</a>
注意：
//Url地址 aa://atguigu/path
下面的是Activity清单文件的配置
<data android:scheme="aa" android:host="atguigu" android:path="/path"/>
上下对比其实和我们的URL地址是一样的
aa 是 scheme
host 是主机名称
path 是路径
当然还可以配置端口和加参数
aa://atguigu:8080/path？id = 10
通过activity配置那么就可以跳转到相应的界面里，如果activity只配置scheme = aa那么只要是aa的Url都是适配的
wv.setWebViewClient(new WebViewClient() {
//当页面开始加载的时候调用此方法
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
//通过对URl的解析来决定调转到哪个页面
//这边只是简单做一些判断当前是否是Scheme跳转
if (url.contains("aa")) {
Intent intent = new Intent(Intent.ACTION_VIEW,
Uri.parse(url));
startActivity(intent);
}
}
二、android与H5之间的交互2
参考https://blog.csdn.net/Sunny2011111/article/details/72729405
一、通过H5页面所在的app调用另一个app
1、HTML链接处理
<a href="[scheme]://[host]/[path]?[query]">点我</a>
说明：
schema: 判断启动的App
<a href="myapp://jp.app/openwith?name=zhangsan&age=26">启动应用程序</a>
1
本例中做如下超链接跳转：
<a href="finance://pay.com/mpos?orderId=1020160126"> Open APP </a>
其中：
schema —- finance 对应Android中 android:schema
host --- pay.com 对应android中 android:host
path --- mpos 对应android中 android:pathPrefix
query --- orderId=1020160102 为Html链接和APP相互传递的数据，可以在Uri中通过getQueryParameter 方法获取
全部Html源码：
2、android中如何处理？
1）在AndroidManifest.xml文件中，在需要跳转到的Activity中添加如下声明：
<activity
android:name=".ui.activity.OrderDetailActivity"
android:configChanges="keyboardHidden|orientation"
android:exported="true"
android:label="@string/app_name"
android:theme="@style/CustomTitle">
<intent-filter>
<category android:name="android.intent.category.BROWSABLE" />
<category android:name="android.intent.category.DEFAULT" />
<action android:name="android.intent.action.VIEW" />
<data
android:host="pay.com"
android:pathPrefix="/mpos"
android:scheme="finance" />
</intent-filter>
</activity>
2）如何获取链接中传递的数据？
if (getIntent() != null) {
if (Intent.ACTION_VIEW.equals(action)) {
Uri uri = Uri.parse(getIntent().getDataString());
if (uri != null) {
String orderId = uri.getQueryParameter("orderId");
}
}
}
3、应该注意的地方？
1）链接打开的Activity中，【android.intent.action.MAIN】和【android.intent.category.LAUNCHER】这2个，不能与这次追加的内容混合在一起；如果跳转的刚好是启动Activity，可以写一个类继承启动类。
2）参考：http://blog.csdn.NET/jiangwei0910410003/article/details/23940445
二、由H5页面直接调起另一个app
1、WebView基础设置如下：
String mUrl = "http://10.0.41.19:8099/TomcatTest/web_app_upload_image.html";
WebSettings webSettings = webView.getSettings();
//设置WebView属性，能够执行Javascript脚本
webSettings.setJavaScriptEnabled(true);
//设置可以访问文件
webSettings.setAllowFileAccess(true);
//设置支持缩放
webSettings.setBuiltInZoomControls(true);
//加载需要显示的网页
// 加载 asset目录下的本地html文件： mUrl = "file:///android_asset/web_app.html"
webView.loadUrl(mUrl);
//设置WebViewClient用来辅助WebView处理各种通知请求事件等，如更新历史记录、网页开始加载/完毕、报告错误信息等
webView.setWebViewClient(new WebViewClient() {
// 以下方法避免 自动打开系统自带的浏览器，而是让新打开的网页在当前的WebView中显示
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
// 用于辅助WebView处理JavaScript的对话框、网站图标、网站标题以及网页加载进度等
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onReceivedTitle(WebView view, String title) {
tv_title.setText(title);
}
});
// 使 H5可调用Native方法： android.nativeMethod()
webView.addJavascriptInterface(new MyJsInterface(), "android");
2、H5 调用 Native 方法实现 H5页面 按钮点击事件处理，代码如下：
<input type="button" value="JS Call Native: Toast Message" οnclick="android.toastMessage()">
App WebViewActivity类中处理
public class MyJsInterface {
@JavascriptInterface
public void toastMessage(String msg) {
Toast.makeText(WebViewActivity.this, "app to H5 toast " + msg, Toast.LENGTH_SHORT).show();
Intent intent = new Intent(WebViewActivity.this, FirstActivity.class);
WebViewActivity.this.startActivity(intent);
}
3、Native 传递数据给 H5，场景：点击原生页面的标题栏按钮，给H5页面传值 并且更新 H5页面：
// 点击原生按钮，向H5页面发送数据，可更新H5页面
tv_click.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
String msg = "from Native";
<strong>// loadUrl必须在主线程中执行
webView.loadUrl("javascript:toNative('" + msg + "')");</strong>
}
});
H5 中页面数据更新代码：
<input type="text" value="hhhh" id="pp"/>
<script type="text/javascript">
// 2. js供 Native 调用的方法 （js接收数据）
function toNative(msg) {
alert("Hello, from H5, received msg: " + msg);
var p = document.getElementById("pp");
p.value = msg;
}
</script>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
