前些日子,Android原生开发将被取缔的吵得火热,JavaScript是能做一个完全的APP,但只使用JavaScript做出来的APP也不会牛逼到哪里去。最好的是混合(Hybrid)开发,在需要的时候使用JavaScript,各有好处。

Hybrid App中原生页面 VS H5页面:http://www.jianshu.com/p/00ff5664e000

原生页面和H5页面的优劣势分析:

原生页面

优势:

(1)运行速度比较快

(2)能使用设备的底层功能,如摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等

(3)在界面设计、功能模块、操作逻辑等层面相较web更易做到App的便捷性和舒适性,功能更加强大

(4)节省流量

劣势:

(1)不同的操作系统(如Android和iOS)需要独立的进行开发,使用其各自的开发包、开发工具和控件

(2)每次有更新,都需要重新打包一次发布到应用平台上,且每次要向各个应用商店进行提交审核。之后用户需要手动进行点击更新安装(安装成本较高)

(3)开发成本比较高,尤其需要适配各种机型时(如Android应用,需要适配各种Android手机)

H5页面

优势:

(1)由于是运行在浏览器上,所以只需要开发一次便可以在不同的操作系统上显示

(2)迭代版本时,不需要打包便可以发布(实时更新、快速迭代),与云端实现实时数据交互

(3)开发成本相对较低,对浏览器的适配较简单,且发布门槛相对较低

劣势:

(1)每次打开页面,都得重新加载,获取数据...

(2)过于依赖网络,速度无法保证。特别在弱网环境下,不仅耗费流量而且加载缓慢,就算是WiFi情况下也不容乐观

(3)只能使用有限的设备底层功能(无法使用摄像头、方向传感器、重力传感器、拨号、GPS、语音、短信、蓝牙等功能)

(4)仍处于发展阶段,部分功能无法在基于现有技术的浏览器基础上实现,且无法全面的显示最完美的用户体验,只能用现有技术去弥去找最佳解决方案

分析淘宝中的原生页面和H5页面

----------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------

由上图得知,是否有底部tab导航栏也无法区别出H5页面

----------------------------------------------------------------------------------------------------------------------------

---------------------------------------------------------------------------------------------------------------------------

如下图是一个原生与webview混排的界面,红色线框是各控件的绘制边界,中间那一大块布局丰富的界面没有显示出很多边界红色,就是H5实现的。

案例:

JS调用Java,将Java中的Json数据显示在H5界面,点击调起视频播放器

效果图: 

初始化webView: webview = (WebView) findViewById(R.id.webview);

设置WebSettings:

        //设置支持javaScript
webSettings = webview.getSettings();
//设置支持javaScript
webSettings.setJavaScriptEnabled(true);
//设置文字大小
webSettings.setTextZoom(100);
//不让从当前网页跳转到系统的浏览器中
webview.setWebViewClient(new WebViewClient() {
//当加载页面完成的时候回调
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
      //添加javaScript接口
webview.addJavascriptInterface(new MyJavascriptInterface(), "Android");
// body onload="javascript:Android.showcontacts()"与内部类中的方法相同
// "Android"必须与HTMl中的body onload="javascript:Android.showcontacts()"相同

//可以加载网络的页面,也可以加载应用内置的页面
webview.loadUrl("http://192.168.191.1:8080/JsCallJava.html");



 

javaScript接口的内部类设置如下:

 class MyJavascriptInterface {
//调起Vedio
@JavascriptInterface //android4.4以后浏览器内核改变了,但webView是使用原来的内核
public void call(String video) {
Intent intent = new Intent();//隐式意图
intent.setDataAndType(Uri.parse(video),"video/*");
startActivity(intent);
} //加载Vedio信息
@JavascriptInterface
public void showcontacts(){
String json = "[{\"name\":\"LikeYou\",\"video\":\"http://192.168.191.1:8080/LikeYou.mp4\"}]";
// 调用JS中的方法
webview.loadUrl("javascript:show("+"'"+json+"'"+")");
}
}

源码及资源地下载 : http://www.cnblogs.com/wujiancheng/

(若没有效果,请将build.gradle 中的targetSdkVersion改为低于19) 因为android4.4以后浏览器内核改了,而webView还是使用原来的webkit内核

Android与H5互调(通过实例来了解Hybrid App)的更多相关文章

  1. Android与H5互调

    前言 微信,微博,微商,QQ空间,大量的软件使用内嵌了H5,这个时候就需要了解Android如何更H5交互的了:有些外包公司,为了节约成本,采用Android内嵌H5模式开发,便于在IOS上直接复用页 ...

  2. android 和h5互调步骤

    1. Android 中调用JS 假如:H5页面中有一段如下JS代码 function h5Test(str){ xxxx... xxxx... } Android中调用方式如下: 步骤一: 启动支持 ...

  3. 优化Recorder H5录音:可边录边转码上传服务器,支持微信提供Android IOS Hybrid App源码

    Recorder H5 GitHub开源库随着支持功能的增多,音频转码处理效率渐渐的跟不上需求了,近期抽时间对音频转码部分进行了升级优化,以支持更多实用的功能. 另外IOS的Hybrid App也完成 ...

  4. Hybrid APP基础篇(三)->Hybrid APP之Native和H5页面交互原理

    本文已经不维护,新地址: http://www.cnblogs.com/dailc/p/8097598.html 说明 Hybrid模式原生和H5交互原理 目录 前言 参考来源 前置技术要求 楔子 A ...

  5. Android驱动开发之Hello实例

    Android驱动开发之Hello实例:   驱动部分 modified:   kernel/arch/arm/configs/msm8909-1gb_w100_hd720p-perf_defconf ...

  6. Android与H5交互(java与js的交互)

    一.理论概述 1.js调用java方法 直接调用WebView的该方法就可以添加接口了,不过先要启动交互 // 启用javascript mWebView.getSettings().setJavaS ...

  7. Android studio 下JNI编程实例并生成so库

    Android studio 下JNI编程实例并生成so库 因为公司需要为Android相机做美颜等图像后期处理,需要使用JNI编程,最近学了下JNI,并且在Android Studio下实现了一个小 ...

  8. android post 方式 访问网络 实例

    android post 方式 访问网络 实例 因为Android4.0之后对使用网络有特殊要求,已经无法再在主线程中访问网络了,必须使用多线程访问的模式 该实例需要在android配置文件中添加 网 ...

  9. Android原生和H5交互;Android和H5混合开发;WebView点击H5界面跳转到Android原生界面。

    当时业务的需求是这样的,H5有一个活动商品列表的界面,IOS和Android共用这一个界面,点击商品可以跳转到Android原生的商品详情界面并传递商品ID:  大概就是点击H5界面跳转到Androi ...

随机推荐

  1. 解决CentOS java环境不生效的问题

    查看当前java版本 [root@localhost jdk1.6.0_45]# java -version openjdk version "1.8.0_65" OpenJDK ...

  2. Android 封装实现各种样式对话框

    先上图 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/disso ...

  3. makefile redefinition or previous definition

    operation.h:4: error: redefinition of 'class operation' operation.h:5: error: previous definition of ...

  4. gdb条件断点

    1 通用格式 break file:line if condition condition的格式:变量名 条件运算符 常量,比如 if  i == 3 2 例 #include <stdio.h ...

  5. c中的变量

    1 变量类型 1.1 static global or static .data/.bss 1.2 automic stack,its relevant to os kernel and compil ...

  6. UVA11722概率问题之线性规划

    链接:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&am ...

  7. Vue.js:安装node js到构建一个vue并启动它

    ylbtech-Vue.js:从安装node js到构建一个vue并启动它 1.返回顶部 1. 1.安装node js 下载地址:http://nodejs.cn/download/2.安装完成后运行 ...

  8. Linux使用笔记: 使用Samba访问windows的共享目录(转载)

    转自:http://easwy.com/blog/archives/mount-a-windows-shared-folder-on-linux-with-samba/ 通常我们使用Samba都是在W ...

  9. spring分布式事务学习笔记(1)

    此文已由作者夏昀授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 分布式事务对性能有一定的影响,所以不是最佳的解决方案,能通过设计避免最好尽量避免. 分布式事务(Distrib ...

  10. C# 多边形面积计算公式

    最近在做地图相关面积计算显示工作,百度了很多关于多边形面积计算方面公式和代码,只能说贼费劲,最终完成了把结果展示下     原理:鞋带公式 定义:所述鞋带式或鞋带算法(也称为高斯的面积公式和测量员的式 ...