国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

混合應用中的javascript實踐

Flink_China / 3462人閱讀

摘要：混合應用在幾年前便進入大眾視野，近來更是越發風生水起，深受人民群眾的喜愛。混合方式如同茴字有幾種寫法一般，構建混合應用也有不同的方式。機型則會比較悲劇，使用方案或許是個正確的選擇。所以在開發中一定要做好可用性檢測，減少出現的幾率。

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

概念 什么是混合應用

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

混合方式

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

交互 方法注入

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

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

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

其中 window.appMethod 這個方法，是一個從 iOS 和 android 方法中提取而來的方法，根據手機系統不同，使用不同策略，例如：

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;

相比方法的注入點，策略處理，方法的調用時機更為重要。在js中調用一個不存在方法，會發生錯誤從而導致代碼無法繼續向下執行。
比如進入頁面時，app需要告訴html一些登錄信息，以初始化點贊，收藏等組件。如果由app直接調用js方法去通知，那么很可能頁面還沒加載完，而發生上面提到的錯誤。
所以好的時機是讓js主動去向app發起請求，示例：

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


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

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

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

# 本段代碼使用了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) )"];
})
方法監聽

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

資源加載

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

調試

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

vConsole 截圖

vConsole

其他 兼容性

html在app中的兼容性取決于app內嵌瀏覽器內核。iOS系統默認的瀏覽器是safari，而andriod系統默認的瀏覽器則五花八門。

如果選擇系統默認瀏覽器作為內嵌瀏覽器的話，ios一般兼容性較好，能取得和PC端一致的效果。android機型則會比較悲劇，使用 crosswalk方案 或許是個正確的選擇。

特性啟用

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

局部視圖

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79789.html

相關文章

  • 【譯】前端練級攻略

    摘要：由于系統變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。 譯者：前端小智 原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發的時候。我看到了很多文章及...

    wuyumin 評論0 收藏0

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

    摘要：是文檔的一種表示結構。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統像今天這樣復雜之前編寫的。 本文是 前端練級攻略 第二部分，第一部分請看下面： 前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

    BWrong 評論0 收藏0

  • 混合式app開發框架

    摘要：混合式開發做出的手機應用無論在性能還是易用性方面都很接近原生應用。下面介紹幾個流行的混合式開發框架。相比于其他開發框架，更加輕量，體積小巧。 目前混合式開發已經逐漸成熟，混合式app開發只需要要求開發者會使用css和js前端代碼就可以實現手機app應用的開發，而不需要再去學習安卓或蘋果開發，降低了app開發的門檻。混合式開發做出的手機應用無論在性能還是易用性方面都很接近原生app應用。...

    hot_pot_Leo 評論0 收藏0

  • 混合式app開發框架

    摘要：混合式開發做出的手機應用無論在性能還是易用性方面都很接近原生應用。下面介紹幾個流行的混合式開發框架。相比于其他開發框架，更加輕量，體積小巧。 目前混合式開發已經逐漸成熟，混合式app開發只需要要求開發者會使用css和js前端代碼就可以實現手機app應用的開發，而不需要再去學習安卓或蘋果開發，降低了app開發的門檻。混合式開發做出的手機應用無論在性能還是易用性方面都很接近原生app應用。...

    darkbug 評論0 收藏0

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

    摘要：前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對于...

    崔曉明 評論0 收藏0

發表評論

0條評論

Flink_China

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<