webview与JS的交互
webview与JS的交互
一:hybird app, web app 和 native app 的区别
Web App | Hybird App | 混合Native App | |
开发成本 | 低 | 中 | 高 |
维护更新 | 简单 | 简单 | 复杂 |
体验 | 差 | 优 | 优 |
跨平台 | 优 | 优 | 差 |
Native App是一种基于智能手机本地操作系统如IOS,Android等并运用原生程序编写运行的第三方运用程序,也叫本地App。
Web App 是针对Iphone,Android优化后的web站点,前端使用的技术是:html5,css,javascript等,服务器端技术是java,php,asp等。需要注意的是web app开发还是比较有限的。因为Web APP开发不能整合设备的核心功能,比如发文本信息,也不能充分使用APP Store进行更新。但是Web APP开发也有其优势所在。
首先它解决了iphone APP的可扩展性问题,因为它是可以跨平台使用的。比如你开发了一款Web App,那么它既可以在手机iphone上使用,也可以再平板ipad上使用,而不像iphone APP那样只针对某个平台。
其次web APP也绕开了APP store严格的提交和更新审查规则。众所周知,随着APP store中的APP逐渐增多,APP store也推出了一系列的提交和审查规则,可谓相当之严格。而web APP则绕开了这些提交和更新审查规则,从而使得web APP的升级和维护变得更容易。因为它是一个独立的站点,而不是依附于app store上的,不管是升级还是维护在客户端进行即可,无需提交审核。
Hybird App通常分为三种类型:多view混合型,单View混合型,web主体型。
1. 多view混合型:
即Native View和web View独立展现,交替出现。目前常见的Hybird App是Native View与web View交替出现,这种应用混合逻辑相对简单,即在需要的时候,将webView当成一个独立的view(Activity)运行起来,在webview内完成相关的展示操作。这种移动运用主体通常是 Native App, web技术只起到补充作用。开发难度和Native App相当。
2. 单view混合型:
即在同一个View内,同时包括Native View和Web View。互相之间是覆盖(层叠)的关系。这种Hybrid App的开发成本较高,开发难度较大,但是体验较好。如百度搜索为代表的单View混合型移动应用,既可以实现充分的灵活性,又能实现较好的用户体验。
3. Web主体型:
即移动应用的主体是Web View,主要以网页语言编写,穿插Native功能的Hybrid App开发类型。这种类型开发的移动应用体验相对而言存在缺陷,但整体开发难度大幅降低,并且基本可以实现跨平台。Web主体型的移动应用用户体验的好坏,主要取决于底层中间件的交互与跨平台的能力。国外的appMobi、PhoneGap,国内的AppCan和Rexsee都属于Web主体型移动应用中间件。其中Rexsee不支持跨平台开发。appMobi和PhoneGap除基础的底层能力更多是通过插件(Plugins)扩展的机制实现Hybrid。而AppCan除了插件机制,还提供了大量的单View混合型的接口来完善和弥补Web主体型Hybrid App体验差的问题,接近Native App的体验。
以上的知识点是从这边参考的: http://www.gtuanb.com/a/yd/2013/1231/127.html
二:Android webview与js的交互方式
1. 关于webview。
我们知道目前android市场上的一些应用采用的开发方式分为三种:Native App,web App,Hybird App 。下面介绍Hybird App中实现的主要技术native组件与JS的数据交互的理解。
Android API中提供了webview组件来实现对html渲染,所谓的HybridApp开发方式即是汇集了HTML5、CSS3、jS的相关开发技术,以及数据交换格式json/XML。 下面是Android_webview 与 JS交互的步骤如下:
1. 新建一个webview的布局webview.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" > <WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
如果应用中需要用到多个webview的界面,那只要写一个布局就够了。
2. 在activity中初始化webview
1. 初始化布局
setContentView(R.layout.exam);
webView = (WebView) findViewById(R.id.webview);
webView.setScrollBarStyle(0);//滚动条风格,为0指滚动条不占用空间,直接覆盖在网页上
2. 添加设置,使js代码能运行
WebSettings setting = webView.getSettings();
setting.setJavaScriptEnabled(true);
setting.setJavaScriptCanOpenWindowsAutomatically(true);
setting.setAllowFileAccess(true);// 设置允许访问文件数据
setting.setSupportZoom(true);
setting.setBuiltInZoomControls(true);
setting.setJavaScriptCanOpenWindowsAutomatically(true);
setting.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
setting.setDomStorageEnabled(true);
setting.setDatabaseEnabled(true);
setting.setDefaultTextEncodingName("GBK");//设置字符编码
webView.addJavascriptInterface(new AndroidForJs(this), "JavaScriptInterface");
设置完这些后会发现在调试js代码时还是不能弹出alert对话框调式代码,上网查了之后发现是要添加如下代码:
webView.setWebChromeClient(new WebChromeClient());
3. 装载html5页面
本地界面:webView.loadUrl("file:///android_asset/test.html");,其中test.html页面是放在assets文件夹下。
在线界面:webView.loadUrl("http://www.baidu.com");
3. 具体的交互如下:
(1)js调用native代码
上面的代码中 webView.addJavascriptInterface(new AndroidForJs(this), "JavaScriptInterface");
其中AndroidForJs就是专门用来放js调用native的代码的,"JavaScriptInterface"就是js调用AndroidForJs时的名称,先写一个AndroidForJs.java代码如下:
public class AndroidForJs { private Context mContext;
private String cmdCode, resultKey;
private long visitTime; public AndroidForJs(Context context) {
this.mContext = context;
} // 以json实现webview与js之间的数据交互
public String jsontohtml(String abc) {
JSONObject map;
JSONArray array = new JSONArray();
try {
map = new JSONObject();
map.put("name", abc);
map.put("age", 25);
map.put("address", abc);
array.put(map); map = new JSONObject();
map.put("name", "jacky");
map.put("age", 22);
map.put("address", "中国北京");
array.put(map); map = new JSONObject();
map.put("name", "vans");
map.put("age", 26);
map.put("address", "中国深圳");
map.put("phone", "13888888888");
array.put(map);
} catch (JSONException e) {
e.printStackTrace();
}
return array.toString();
}
}
上面的都是android(java)方法的配置项,前端不需要做任何事情。下面如下方法是前端调用native方法。
然后在js中可以用如下方式调用native方法
var result = JavaScriptInterface.jsontohtml("uyiyu");
其中"uyiyu"就是js传给native的参数,需要的话就把参数传过去,不需要的话就不传。看具体的需求。其中jsontohtml是java中的一个方法。也可以改成其他的方法名。
result是native方法返回的值.一般是返回前端json数据,但是使用这种方式有问题,前端拿不到返回的数据,我们可以接着往下看。
注意:项目中遇到的问题是如果调用的native方法如果是一个向服务器发起请求的方法,如下:
public String jsontohtml () {
String result = null;
cmdCode = "123";
visitTime = System.currentTimeMillis() / 1000;
resultKey = Utils.getResultKey(cmdCode, visitTime, mContext);
String key = Utils.getKey(cmdCode, visitTime, mContext);
final String url = Utils.getMainUrl(key, cmdCode, visitTime,
AllServerPort.URL_GET_EQUIPMENT, mContext);
LogUtil.d(url);
new HttpGetData(mContext, new CallBack() { @Override
public void handlerData(String result) {
// TODO Auto-generated method
// stub
LogUtil.d("-----RESPONSE------" + result);
Map<String, String> backMsg = Utils.parseResponseResult(
mContext, result, cmdCode, visitTime, resultKey);
if (backMsg.get(Constant.BACK_FLAG).equals("1")) {
String body = backMsg.get(Constant.BACK_BODY);
JSONObject jsonBody;
JSONArray jsonArray = null;
try {
jsonBody = new JSONObject(body);
jsonArray = jsonBody.getJSONArray("dispatchKitList");
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
result = jsonArray.toString();
LogUtil.d("------------success--------------" + jsonArray.toString());
} }
}, url).start();
return result;
}
这时如果还用var result = JavaScriptInterface.jsontohtml ();这个方法会发现获取的result是null的,这是因为java中向服务器请求后到服务器返回结果进入回调函数handlerData是需要一段时间的,而js没有等待这段时间就从java获取了返回值,这时result还没被赋值,就为空了,解决的方法只能是native从服务器端获取到数据后再调用js的方法把结果传给js。所以上述方法改为
public String jsontohtml () {
String result = null;
cmdCode = "123";
visitTime = System.currentTimeMillis() / 1000;
resultKey = Utils.getResultKey(cmdCode, visitTime, mContext);
String key = Utils.getKey(cmdCode, visitTime, mContext);
final String url = Utils.getMainUrl(key, cmdCode, visitTime,
AllServerPort.URL_GET_EQUIPMENT, mContext);
LogUtil.d(url);
new HttpGetData(mContext, new CallBack() { @Override
public void handlerData(String result) {
// TODO Auto-generated method
// stub
LogUtil.d("-----RESPONSE------" + result);
Map<String, String> backMsg = Utils.parseResponseResult(
mContext, result, cmdCode, visitTime, resultKey);
if (backMsg.get(Constant.BACK_FLAG).equals("1")) {
String body = backMsg.get(Constant.BACK_BODY);
JSONObject jsonBody;
JSONArray jsonArray = null;
try {
jsonBody = new JSONObject(body);
jsonArray = jsonBody.getJSONArray("dispatchKitList");
} catch (JSONException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Message message = MyEquipmentActivity.handler.obtainMessage();
message.what = Constant.HANDLER_SHOW_EQUIPMENT; message.obj = jsonArray.toString();
MyEquipmentActivity.handler.sendMessage(message);
LogUtil.d("------------success--------------" + jsonArray.toString());
} }
}, url).start();
return result;
}
Handler中调用js方法
public static Handler handler = new Handler() { @Override
public void handleMessage(Message msg) {
// TODO Auto-generated method stub
super.handleMessage(msg);
String handlerMsg = "";
if (msg.obj != null) {
handlerMsg = msg.obj.toString();
}
switch (msg.what) {
case Constant.HANDLER_SHOW_EQUIPMENT:
webView.loadUrl("javascript:getEquipmentSuccess('" + handlerMsg + "')");
break;
default:
break;
}
} };
如上代码:webView.loadUrl("javascript:jsontohtmlSuccess('" + handlerMsg + "')");
js中调用native方法拿JSON数据最终方案:
前端只需要如下调用即可:
function jsontohtmlSuccess (json) { var data = eval("("+json+")");//解析json字符串 // data 就是我们从开发那边拿回来的json数据了。 }
2) native调用js方法
常见的方法是
不带参数:webView.loadUrl("javascript:submit()");
带参数:webView.loadUrl("javascript:getListSuccess('" + handlerMsg + "')");
目前程序中使用的方法就是这个,但是因为用这个方法无法获取js return的参数,所以需要来回互相调用才能完成一次交互,比较麻烦。
3) 即上面可知:开发有2种(带参数和不带参数)方法调用前端代码,如下:
不带参数:webView.loadUrl("javascript:submit()");
带参数:webView.loadUrl("javascript:getListSuccess('" + handlerMsg + "')");
其中submit是我们javascript中的一个方法名称。如下可以这样写代码:
function submit(){
var result = {“json”:””}; // json数据
JavaScriptInterface.submitResult(result);
}
Json数据使用result变量保存起来,之后使用JavaScriptInterface.submitResult(result)方法调用即可。submitResult是java方法,不用管!开发通过上面的代码就可以拿到我们前端的返回数据。
综合所述:
1. js中调用native方法拿JSON数据最终方案:
前端只需要如下调用即可:
function jsontohtmlSuccess(json) {
var data = eval("("+json+")");//解析json字符串
// data 就是我们从开发那边拿回来的json数据了。
}
服务器端需要有这个方法:
webView.loadUrl("javascript:jsontohtmlSuccess('" + handlerMsg + "')");
2. JS中的数据返回给native端。如下代码:
function submit(){
var result = {“json”:””};
JavaScriptInterface.submitResult(result);
}
服务器端 需要有这个调用方法:
webView.loadUrl("javascript:submit()");
比如现在html5页面有一个按钮btn,点击按钮btn后,需要把数据传递给native端;代码如下:
<div id=” bookidA”> bookidA </div>
Var bookidA = document.getElementById(“bookidA”);
bookidA.addEventListener(‘click’,function(e){
e.preventDefault();
submit();
});
function submit(){
var result = {“json”:””};
JavaScriptInterface.submitResult(result);
}
三: JS与iOS Native Code互调方法
为大家介绍一个优秀的国人开发开源小项目:WebViewJavascriptBridge。它优雅地实现了在使用UIWebView时JS与ios 的Objective-C nativecode之间的互调,支持消息发送、接收、消息处理器的注册与调用以及设置消息处理的回调。它是连接UIWebView和Javascript的bridge。
如下JS代码实现connectWebViewJavascriptBridge
// 连接html
function connectWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
callback(WebViewJavascriptBridge)
} else {
document.addEventListener('WebViewJavascriptBridgeReady', function() {
callback(WebViewJavascriptBridge)
}, false)
}
}
connectWebViewJavascriptBridge (function(bridge) {
// init方法是把数据传给开发 data是前端需要传递的数据
// 再调用responseCallback(data)
bridge.init(function(message, responseCallback) {
var data = {“json”:””};
responseCallback(data);
});
// registerHandler 这个方法是从ios拿到数据 给前端。其中testJavascriptHandler要与开发那边名字对应上
bridge.registerHandler('testJavascriptHandler', function(data, responseCallback) {
var data = eval("("+data+")");
})
});
webview与JS的交互的更多相关文章
- 在Ubuntu15.10中,使用wxPython的webview和JS进行交互
在Ubuntu下进行wxPython开发,因为需求,所以使用了wxPython的webview和JS的交互. 在Windows下,下图显示的代码可以正常的运行,但是在Ubuntu下进行开发,以下的代码 ...
- Android为TV端助力之Webview与JS双向交互
package com.hhzt.iptv.adservice; import android.app.Activity;import android.graphics.Bitmap;import a ...
- WKWebView和WebView与JS的交互方式
UIWebView与JS的交互方式 一,OC调用JS直接调用苹果提供的API - (nullable NSString *)stringByEvaluatingJavaScriptFromString ...
- OC 里面 webView与js
webView与js的交互流程吗,iOS端暴露函数 ,js直接调用 [链接]WKWebView-如何通过JS调用OC方法 https://www.jianshu.com/p/68f799d6679e ...
- WebView与JS的几种交互
http://www.jianshu.com/p/0042d8eb67c0 最近整理了一下原生与H5之间的交互方式,简单的做个总结.OC端与JS的交互,大致有这几种:拦截协议.JavaScriptCo ...
- Android中webview和js之间的交互(转)
http://www.cnblogs.com/leizhenzi/archive/2011/06/29/2093636.html 1.android中利用webview调用网页上的js代码. Andr ...
- webview与js交互
对于android初学者应该都了解webView这个组件.之前我也是对其进行了一些简单的了解,但是在一个项目中不得不用webview的时候,发现了webview的强大之处,今天就分享一下使用we ...
- 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互
[源码下载] 背水一战 Windows 10 (64) - 控件(WebView): 加载指定 HttpMethod 的请求, 自定义请求的 http header, app 与 js 的交互 作者: ...
- 在UAP中如何通过WebView控件进行C#与JS的交互
最近由于项目需求,需要利用C#在UWP中与JS进行交互,由于还没有什么实战经验,所有就现在网上百度了一下,但是百度的结果显示大部分都是在Android和IOS上面的方法,UWP中的几乎没有.还好微软又 ...
随机推荐
- 【协议】2、TCP/IP协议三次握手与四次握手流程解析
一.TCP报文格式 TCP/IP协议的详细信息参看<TCP/IP协议详解>三卷本.下面是TCP报文格式图:图1 TCP报文格式 上图中有几个字段需要重点介绍下: (1)序号:Seq序 ...
- 漫画|你还记得原生的JDBC怎么连接数据库吗?
数据表的设计范式 在实际开发中最为常见的设计范式有三个: 第一范式是最基本的范式.如果数据库表中的所有字段值都是不可分解的原子值,就说明该数据库表满足了第一范式: 第二范式需要确保数据库表中的每一列都 ...
- JAVA的高并发基础认知 一
一.多线程的基本知识 1.1进程与线程的介绍 程序运行时在内存中分配自己独立的运行空间,就是进程 线程:它是位于进程中,负责当前进程中的某个具备独立运行资格的空间. 进程是负责整个程序的运行,而线程是 ...
- jQuery的DOM操作之设置和获取HTML、文本和值 html()text()val()
1. html()方法: 此方法类似于JavaScript中的innerHTML属性,可以用来读取或者设置某个元素中的html内容. <html> <head> <met ...
- ES 5 中 判断数组的方法
源代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- 【读书笔记】iOS-属性
assign:简单的赋值. retain:赋值之后,会调用新的retain方法和旧值的release方法. copy:表示先将值拷贝一份,然后,将这个拷贝赋值给实例变量,这个修饰词只适用于实现了NSC ...
- Flume初入门简单配置与使用
1.Flume在集群中扮演的角色 Flume.Kafka用来实时进行数据收集,Spark.Storm用来实时处理数据,impala用来实时查询. 2.Flume框架简介 1.1 Flume提供一个分布 ...
- sqoop简单配置与使用
sqoop(sql-to-hadoop) Apache Sqoop是用来实现结构型数据(如关系数据库)和Hadoop之间进行数据迁移的工具.它充分利用了MapReduce的并行特点以批处理的方式加快数 ...
- SD从零开始65 框架协议(Outline Agreement)
SD从零开始65 框架协议(Outline Agreement) 合同-销售凭证类型Contracts-Sales Document Types 框架协议在几乎所有的业务处理中都扮演重要的角色:客户和 ...
- 洗礼灵魂,修炼python(55)--爬虫篇—知识补充—RFC 2616 http状态码
不多说直接上状态码表: 状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽 ...