混合應(yīng)用中的javascript實踐

Flink_China 發(fā)布于2019-08-19 18:37 / 3470人閱讀

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

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

概念 什么是混合應(yīng)用

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

混合方式

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

交互 方法注入

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

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

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

其中 window.appMethod 這個方法，是一個從 iOS 和 android 方法中提取而來的方法，根據(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ào)用時機更為重要。在js中調(diào)用一個不存在方法，會發(fā)生錯誤從而導(dǎo)致代碼無法繼續(xù)向下執(zhí)行。
比如進(jìn)入頁面時，app需要告訴html一些登錄信息，以初始化點贊，收藏等組件。如果由app直接調(diào)用js方法去通知，那么很可能頁面還沒加載完，而發(fā)生上面提到的錯誤。
所以好的時機是讓js主動去向app發(fā)起請求，示例：

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


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

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

參數(shù)傳遞

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

# 本段代碼使用了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": "我不會寫app，姑且用js寫偽代碼"
  };
  NSString * result = [self.webView stringByEvaluatingJavaScriptFromString:@"window.jsMethod.comment( JSON.stringify(params) )"];
})

方法監(jiān)聽

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

資源加載

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

調(diào)試

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

vConsole 截圖

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機型則會比較悲劇，使用 crosswalk方案或許是個正確的選擇。

特性啟用

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

局部視圖

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

GPU云服務(wù)器云服務(wù)器 javascript最佳實踐 javascript基礎(chǔ)與實踐教程 javascript中的 javaScript中的this

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/79789.html

發(fā)表評論

登陸后可評論

0條評論

Flink_China

男|高級講師

我要關(guān)注我要私信

TA的文章

用C語言來寫“煙花”，快拿去給心中的那個人看

閱讀 3312·2021-11-18 10:02
JavaScript疑難雜癥系列-相等性判斷

閱讀 2757·2019-08-30 13:56
CSS3學(xué)習(xí)筆記

閱讀 419·2019-08-29 12:36
走在 SVG + Low Poly 的路上

閱讀 531·2019-08-28 18:07
Builder——用Ruby創(chuàng)建XML

閱讀 724·2019-08-27 10:51
vue移動端項目的適配(以mint-ui為例)

閱讀 3459·2019-08-26 12:13
NPM酷庫044：json5，更可讀的JSON

閱讀 3300·2019-08-26 11:46
vue插件開發(fā)流程詳解-從開發(fā)到發(fā)布至npm（二）

閱讀 3323·2019-08-23 12:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

混合應(yīng)用中的javascript實踐

相關(guān)文章

【譯】前端練級攻略

前端練級攻略(第二部分)

混合式app開發(fā)框架

混合式app開發(fā)框架

前端每周清單半年盤點之 PWA 篇

發(fā)表評論

0條評論

Flink_China

男|高級講師

TA的文章

用C語言來寫“煙花”，快拿去給心中的那個人看

JavaScript疑難雜癥系列-相等性判斷

CSS3學(xué)習(xí)筆記

走在 SVG + Low Poly 的路上

Builder——用Ruby創(chuàng)建XML

vue移動端項目的適配(以mint-ui為例)

NPM酷庫044：json5，更可讀的JSON

vue插件開發(fā)流程詳解-從開發(fā)到發(fā)布至npm（二）

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

混合應(yīng)用中的javascript實踐

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！