摘要：混合應(yīng)用在幾年前便進(jìn)入大眾視野，近來(lái)更是越發(fā)風(fēng)生水起，深受人民群眾的喜愛(ài)。混合方式如同茴字有幾種寫法一般，構(gòu)建混合應(yīng)用也有不同的方式。機(jī)型則會(huì)比較悲劇，使用方案或許是個(gè)正確的選擇。所以在開發(fā)中一定要做好可用性檢測(cè)，減少出現(xiàn)的幾率。

混合應(yīng)用(hybird app) 在幾年前便進(jìn)入大眾視野，近來(lái)更是越發(fā)風(fēng)生水起，深受人民群眾的喜愛(ài)。

混合應(yīng)用(hybird app) 顧名思義，便是將web app與native app混合在一起，既享受html快速開發(fā)、快速版本迭代帶來(lái)的便利，也能使用原生app調(diào)用系統(tǒng)接口和第三方SDK的強(qiáng)大擴(kuò)展能力。

如同茴字有幾種寫法一般，構(gòu)建混合應(yīng)用也有不同的方式。其中一種是主要使用靜態(tài)html，用 phonegap 或 cordova 加殼的方式打包成app。另一種則是小部分webview直接引入服務(wù)端渲染的html，其他功能都是原生app開發(fā)。
其中前一種方式最為出名的解決方案便是使用 angular.js + cordova 的 ionic,而使用后一種方式的app則數(shù)不勝數(shù)。
但是無(wú)論使用哪一種方式，都面臨一個(gè)問(wèn)題，html和app的交互。html自己不會(huì)動(dòng)起來(lái)，本文將淺談javascript如何交互app和html。

常見的app和html交互有 使用url 和 互相調(diào)用方法 兩種方式。
使用url 這種方式比較簡(jiǎn)單，通過(guò) location.href = "url" ，即可將方法和參數(shù)傳遞給app，但是無(wú)法傳遞復(fù)雜的數(shù)據(jù)。
互相調(diào)用方法 這種方式則較為復(fù)雜，除了需要app端寫好調(diào)用的方法注入到 window 對(duì)象之外，還需要JavaScript暴露方法給app使用。以常見的評(píng)論交互為例：

// 點(diǎn)擊“發(fā)表評(píng)論”,js需要調(diào)用app的評(píng)論框
$(".js-comment").click(function(){
  window.appMethod.comment();
});

// app端在用戶點(diǎn)擊“發(fā)送”按鈕時(shí)，再調(diào)用javascript的插入評(píng)論方法（我不會(huì)app開發(fā)，以下是偽代碼）
function comment(){
  TEXTAREA.OPEN();
}
SUBMIT_BUTTON.CLICK(function(){
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.comment()"];
})

其中 window.appMethod 這個(gè)方法，是一個(gè)從 iOS 和 android 方法中提取而來(lái)的方法，根據(jù)手機(jī)系統(tǒng)不同，使用不同策略，例如：

var window.appMethod = null;

var androidMethod = {
  comment: function(){
    window.android.comment();
  }
};

var iOSMethod = {
  comment: function(){
    location.href = "ios://comment?"
  }
};


window.appMethod = iOS_DEVICE ? iOSMethod : androidMethod;

相比方法的注入點(diǎn)，策略處理，方法的調(diào)用時(shí)機(jī)更為重要。在js中調(diào)用一個(gè)不存在方法，會(huì)發(fā)生錯(cuò)誤從而導(dǎo)致代碼無(wú)法繼續(xù)向下執(zhí)行。
比如進(jìn)入頁(yè)面時(shí)，app需要告訴html一些登錄信息，以初始化點(diǎn)贊，收藏等組件。如果由app直接調(diào)用js方法去通知，那么很可能頁(yè)面還沒(méi)加載完，而發(fā)生上面提到的錯(cuò)誤。
所以好的時(shí)機(jī)是讓js主動(dòng)去向app發(fā)起請(qǐng)求，示例：

// 不和諧：app直接通知js更新用戶登錄狀態(tài)，可能會(huì)發(fā)生錯(cuò)誤
eval("window.jsMethod.setUser();")


// 和諧：js主動(dòng)去向app發(fā)起請(qǐng)求
$(function(){
  window.appMethod.getUser();
})

// app端在接收到getUser方法后，調(diào)用js方法（我不會(huì)app開發(fā)，以下是偽代碼）
function getUser(){
  // 獲取user狀態(tài)，然后執(zhí)行
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.setUser()"];
}

以上的示例中的方法并沒(méi)有進(jìn)行參數(shù)傳遞，是為了留到這里。
相比JavaScript，在android和iOS方法中傳遞參數(shù)顯得極為嚴(yán)格，除了要指定參數(shù)個(gè)數(shù)，還要指定參數(shù)類型。
雖然可以通過(guò)數(shù)組的方式進(jìn)行不定個(gè)數(shù)參數(shù)的傳遞，但是指定參數(shù)類型還是挺煩人的。所以建議始終使用 String 類型作為參數(shù)進(jìn)行傳遞，復(fù)雜的json格式參數(shù)使用 JSON.stringify。使用url傳遞則需要對(duì)參數(shù)進(jìn)行 encode 編碼。
以上面的發(fā)表評(píng)論為例：

# 本段代碼使用了jquery

// js給app傳參
var androidMethod = {
  comment: function(params){
    window.android.comment( JSON.stringify(params) );
  }
};

var iOSMethod = {
  comment: function(params){
    location.href = "ios://comment?"+$.param(params)
  }
};

... ... 

$(".js-comment").click(function(){
  var params = {
    "user_id": 30,
    "article_id": 958,
    "article_type": "news"
  };
  window.appMethod.comment(params);
});


// app給js傳參
SUBMIT_BUTTON.CLICK(function(){
   var params = {
    "comment_id": 5484,
    "comment_content": "我不會(huì)寫app，姑且用js寫偽代碼"
  };
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.comment( JSON.stringify(params) )"];
})

這里的方法監(jiān)聽指的是app對(duì)js方法的單向監(jiān)聽。
因?yàn)樾枰猘pp監(jiān)聽的js方法，都是顯示的調(diào)用了app方法，或是跳轉(zhuǎn)到了一個(gè)url。調(diào)用app的方法自不待言，url的監(jiān)聽卻有多種。
一種是a鏈接的 http GET 請(qǐng)求的監(jiān)聽，多見于 下一篇文章 , 相關(guān)文章 等跳轉(zhuǎn)頁(yè)面的方法。一般來(lái)說(shuō)不用帶參數(shù)。還有一種是自定義的 schema 監(jiān)聽，使用這種方式一般是不帶或帶較少的參數(shù)，比如 myiOS://mymethod?。

把資源加載放到交互里面，我也不知道合不合適。對(duì)于 第一種混合方式 來(lái)說(shuō)，可以把更多的靜態(tài)資源放到本地，然后通過(guò)app接口加載。對(duì)于第二種，更多的還是從服務(wù)端渲染并加載資源。
對(duì)于一些交互類的數(shù)據(jù)，而非資源，既可以選擇存放在瀏覽器的localStorge中，也可以選擇存放于app本地文件，這取決于哪一方進(jìn)行操作運(yùn)算了。

html的移動(dòng)端調(diào)試時(shí)很困難的，嵌入app的html調(diào)試更是難上加難。因?yàn)閖s和app的方法相互調(diào)用，任何一方出錯(cuò)，都會(huì)導(dǎo)致程序不按套路運(yùn)行。
除了仔細(xì)的約定兩端的方法和檢查代碼的錯(cuò)誤外，還需要一個(gè)強(qiáng)力的工具。在這里推薦使用 vConsole ，可以比較直觀的定位到錯(cuò)誤。

vConsole 截圖

html在app中的兼容性取決于app內(nèi)嵌瀏覽器內(nèi)核。iOS系統(tǒng)默認(rèn)的瀏覽器是safari，而andriod系統(tǒng)默認(rèn)的瀏覽器則五花八門。

如果選擇系統(tǒng)默認(rèn)瀏覽器作為內(nèi)嵌瀏覽器的話，ios一般兼容性較好，能取得和PC端一致的效果。android機(jī)型則會(huì)比較悲劇，使用 crosswalk方案 或許是個(gè)正確的選擇。

在內(nèi)嵌瀏覽器中，html5的某些特性默認(rèn)是關(guān)閉的，比如 localStorge , 需要app端手動(dòng)去開啟。所以在開發(fā)中一定要做好可用性檢測(cè)，減少出現(xiàn)bug的幾率。

當(dāng)html作為webview的局部視圖被加載時(shí)，由于app雖然可以獲取到頁(yè)面加載后的高度，但是無(wú)法獲取動(dòng)態(tài)改變后的高度，使得局部滾動(dòng)失效。
所以在作為局部視圖加載時(shí)，如果需要頁(yè)面高度會(huì)根據(jù)比如評(píng)論，動(dòng)畫效果而發(fā)生改變的話，需要及時(shí)通知app更新webview高度。