標題: 商城開發筆記-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.zg4o1577.cn/bbs/) |
Powered by Discuz! X3.1 |
主站蜘蛛池模板：
中文字幕亚洲一区
|
激情婷婷成人
|
翔田千里一区二区
|
日本一区二区三区四区
|
中文字幕丁香5月
|
神马久久av
|
日韩电影一区
|
丝袜 亚洲 另类 欧美 综合
|
色爱综合网
|
欧美亚洲网站
|
亚洲午夜精品一区二区三区他趣
|
婷婷久久五月天
|
欧美aaaa视频
|
精品真实国产乱文在线
|
久久国产香蕉
|
国产做a爱免费视频
|
久久av一区|
国产在线观看一区二区
|
久久亚洲国产精品日日av夜夜
|
韩国av一区二区
|
国产亚洲精品久久yy50
|
久久国产欧美日韩精品
|
韩国精品在线观看
|
女同久久
|
国产精品国产三级国产aⅴ浪潮
|
欧美日韩国产一区二区三区
|
亚洲人精品午夜
|
亚洲免费久久久
|
日本精品一区二区三区视频
|
韩日在线视频
|
亚州中文|
www一级片|
国产日韩中文字幕
|
国产福利资源在线
|
国产高清区
|
999国产精品视频免费
|
久久久久国产精品午夜一区
|
精品久久网
|
久久久观看|
国产黄色网址在线观看
|
国产精品欧美一区二区三区不卡
|