标题: 商城开发笔记-13-Android与HTML5交互 [打印本页]
作者: 51黑bing 时间: 2016-3-22 17:30
标题: 商城开发笔记-13-Android与HTML5交互
一、WebApp、Hybrid App、NativeApp介绍与对比
目前主流应用程序大体分为三类：Web App、HybridApp、 NativeApp。如下图所示：
首先，我们来看看什么是 Web App、HybridApp、 NativeApp。
1.Web APP例子：京东http://m.jd.com/
Web App指采用Html5语言写出的App，不需要下载安装。类似于现在所说的轻应用。生存在浏览器中的应用，基本上可以说是触屏版的网页应用。
优点
（1）开发成本低
（2）更新快
（3）更新无需通知用户，不需要手动升级
（4）能够跨多个平台和终端
缺点：
（1）临时性的入口
（2）无法获取系统级别的通知，提醒，动效等等
（3）用户留存率低
（4）设计受限制诸多
（5）体验较差
下图是WebAPP受到的限制：
在设计Web APP时，应当遵循以下几点：
1. 简化
o 简化不重要的动画/动效
o 简化复杂的图形文字样式
2. 少用
o 少用手势，避免与浏览器手势冲突
o 少用弹窗
3. 减少
o 减少页面内容
o 减少控件数量
o 减少页面跳转次数，尽量在当前页面显示
4. 增强
o 增强Loading时的趣味性
o 增强页面主次关系
o 增强控件复用性
2.Hybrid App例子：淘宝、饿了么、京东、QQ、微信等等。
HybridAPP指的是半原生半Web的混合类App。需要下载安装，看上去类似NativeApp，但只有很少的UI WebView，访问的内容是 Web 。
例如Store里的新闻类APP，视频类APP普遍采取的是Native的框架，Web的内容。
HybridApp 极力去打造类似于NativeApp 的体验，但仍受限于技术，网速，等等很多因素。尚不完美。
3.Native App
NativeAPP 指的是原生程序，一般依托于操作系统，有很强的交互，是一个完整的App，可拓展性强。需要用户下载安装使用。
优点：
（1）打造完美的用户体验
（2）性能稳定
（3）操作速度快，上手流畅
（4）访问本地资源（通讯录，相册）
（5）设计出色的动效，转场，
（6）拥有系统级别的贴心通知或提醒
（7）用户留存率高
缺点：
（1）分发成本高（不同平台有不同的开发语言和界面适配）
（2）维护成本高（例如一款App已更新至V5版本，但仍有用户在使用V2， V3， V4版本，需要更多的开发人员维护之前的版本，不然旧版本出问题了，用户可能就不用了）
（3）更新缓慢，根据不同平台，提交–审核–上线 等等不同的流程，需要经过的流程较复杂
二、技术特性对比
由上图可见，WebAPP 的开发基于Html5语言。而Html5语言本身又有着不可避免的局限性。正是这些局限性的存在，使得Web App在体验中要逊于NativeApp。
三、HybridApp开发中Android与H5（JS）交互
既然混合APP现在这么流行，开发成本、体验都是开发技术中的首选，那么我们有必要来学习一下。
Android中使用HTML开发的核心是使用WebView、原生API与JS的交互。
Android与HTML5的交互有2种情况：
1.Android原生API 调用HTML页面中的JS代码
2.HTML页面中的JS代码调用Android原生API
为什么需要交互？因为HTML说到底只不过是一个静态的Layout，只有与原生API进行交互才能开发我们需要的功能。
下面开始介绍主要的核心步骤：
1.设置webView允许执行JS脚本：
webSettings.setJavaScriptEnabled(true);
2.添加通信接口（注意：InterfaceName要与JS中的名字一致）
webView.addJavascriptInterface(Interface,”InterfaceName”)
3. JS调用Android
InterfaceName.MethodName
4. Android调用JS（参数可以通过+“”+来拼接）
webView.loadUrl("javascript:functionName()");
例子代码：
/**
* 初始化WebView
*/
private void initWebView() {
WebSettings settings = wv_detail.getSettings();
//可以执行JS
settings.setJavaScriptEnabled(true);
//不阻塞网络图片
settings.setBlockNetworkImage(false);
//使能缓存
settings.setAppCacheEnabled(true);
appInterface = newAppInterface(this);
//添加JS接口
wv_detail.addJavascriptInterface(appInterface, "appInterface");
//添加监听
wv_detail.setWebViewClient(new MyWebViewClient());
wv_detail.loadUrl(Constants.URL_GOOD_DETAIL);
}
/**
* Android与JS通信的接口
*/
class AppInterface {
private Context mCtx;
public AppInterface(Context mCtx) {
this.mCtx = mCtx;
}
//Android调用JS
@JavascriptInterface
public void showDetail(final long goodId) {
runOnUiThread(new Runnable() {
@Override
public void run() {
wv_detail.loadUrl("javascript:showDetail(" + goodId + ")");
}
});
}
//JS调用Android，这里只是在Android端写好的方法
@JavascriptInterface
public void buy(long goodId) {
//做你需要做的事情
}
//
}
/**
* 监听
*/
class MyWebViewClient extends WebViewClient {
//页面有链接点击时候调用
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//自定义功能
if (url.startsWith("nan://.....")) {
//自定义功能，比如打电话，等
}
return super.shouldOverrideUrlLoading(view, url);
}
//页面加载完毕调用（因为JS有些方法需要在页面加载完毕的时候才能调用，不然没效）
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
appInterface.showDetail(mGood.getId());
}
}
下面给出HTML中的JS代码：
<script>
$(function(){
$("#btnBuy").click(function(){
var id = $("#txtWareId").val();
//JS调用Android中的方法
window.appInterface.buy(id);
});
})
//被Android调用的方法
function showDetail(id){
$("#txtWareId").val(id);
$.ajax({
url:"get?id="+id,
success:function(ware){
$("#ware_name").html(ware.name);
$("#ware_img").attr("src",ware.imgUrl);
$("#ware_price").html("￥ "+ware.price);
$("#ware_sale_quantity").html(ware.sale);
}
})
}
</script>
四、结束语
好了，今天的笔记就到这里了，今天大年初一，楠妹妹祝大家猴年大吉O(∩_∩)O~~！至于高级的话，我们还需要去了解WebView的优化，学习前端的开发技术，WebViewClient与WebChromeClient的使用与区别，等等。
WebViewClient与WebChromeClient的区别：
WebViewClient主要帮助WebView处理各种通知、请求事件的
WebChromeClient主要辅助WebView处理Javascript的对话框、网站图标、网站title、加载进度等。
看上去他们有很多不同，实际使用的话，如果你的WebView只是用来处理一些html的页面内容，只用WebViewClient就行了，如果需要更丰富的处理效果，比如JS、进度条等，就要用到WebChromeClient。
| 欢迎光临 (http://www.51hei.com/bbs/) |
Powered by Discuz! X3.1 |