混合開發

混合開發HybridAPP

 

小雜種APP，混合APP

 

對比如今流行的三種APP：WebAPP，NativeAPP,HybridAPP

 

WebAPP:

* 不須要下載安裝，經過移動端瀏覽器來訪問

* HTML5+CSS3+JS；Web前端開發人員

* 開發成本低，更新維護迭代成本也很低，使用成本低，跨平臺

* 較爲依賴網絡，流暢度較低，吃性能

* 不能調用設備的原生功能

 

 

NativeAPP:

* 須要下載安裝，打開訪問

* IOS開發人員，Android開發人員，xml+Objective-C/xml+swift(ios),xml+java

* 開發成本高，更新維護迭代成本也很高，使用成本高，不能跨平臺

* 基本不太依賴網絡，流暢度較高，性能好

* 能夠調用設備的原生功能

 

 

HybridAPP：

目前流行的開發模式有兩種：

1. 原生主導開發（最普遍，最簡單）

    大部分功能仍是由native開發人員來開發，部分界面嵌入H5頁面來實現，這樣就能夠將nativeApp和webapp的優勢集合到一塊兒了

    

    穩定性、兼容性都會比較好

    

    怎麼去判斷一個APP是nativeAPP仍是HybridAPP：

    

     * 長按文字，看是否能選中

    

     * 打開手機的開發者模式

    其實開發HybridAPP內嵌的H5頁面和開發純WebAPP的區別在於：須要和原生Native進行交互，這些方法都很簡單。還有一個知識就是在某些狀況下須要判斷ios仍是Android，原理：利用window.navigator.userAgent

    

    [判斷ios、android](http://www.jb51.net/article/117472.htm)

    

    附錄：Native與JS交互

2. H5主導開發

 

Native與JS交互方式

 

 

咱們知道混合開發的模式如今主要分爲兩種，H5工程師利用某些工具如DCLOUD產品、codorva+phonegap等等來開發一個外嵌native殼子的混合app

還有就是應用比較普遍的，有native開發工程師和H5工程師一塊兒寫做開發的應用，在native的webview裏嵌入H5頁面，固然只是部分界面這麼作，這樣作的好處就是效率高，開發成本和維護成本都比較低，較爲輕量，可是有一個問題不可避免的會出現，就是js和native的交互

native與js交互部分等詳細內容請移步這裏：

[簡書資源](http://www.jianshu.com/p/d19689e0ed83)

[掘金資源](https://juejin.im/post/599a58f6f265da247b4e756b)

 

 

Native（Objective-C或Swift）調用Javascript方法

 

1.Native調用Javascript語言，是經過UIWebView組件的stringByEvaluatingJavaScriptFromString方法來實現的，該方法返回js腳本的執行結果。

 

// Swift
webview.stringByEvaluatingJavaScriptFromString("Math.random()")
// OC
[webView stringByEvaluatingJavaScriptFromString:@"Math.random();"];

　　

從上面代碼能夠看出它其實就是調用了window下的一個對象，若是咱們要讓native來調用咱們js寫的方法，那這個方法就要在window下能訪問到。但從全局考慮，咱們只要暴露一個對象如JSBridge對native調用就行了，因此在這裏能夠對native的代碼作一個簡單的封裝：

 

//下面爲僞代碼
webview.setDataToJs(somedata);
webview.setDataToJs = function(data) {
 webview.stringByEvaluatingJavaScriptFromString("JSBridge.trigger(event, data)")
}

　　

另外：==在android中，native與js的通信方式與ios相似==

 

 

2.在iOS 7以後，apple添加了一個新的庫JavaScriptCor

 

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *textJS = @"showAlert('這裏是JS中alert彈出的message')";
[context evaluateScript:textJS];

　　

Javascript -> OC/Swift

 

Javascript調用Native，並無現成的API能夠直接拿來用，而是須要間接地經過一些方法來實現。UIWebView有個特性：在UIWebView內發起的全部網絡請求，均可以經過delegate函數在Native層獲得通知。這樣，咱們就能夠在UIWebView內發起一個自定義的網絡請求，一般是這樣的格式：

 

jsbridge://methodName?param1=value1&param2=value2

　　

發起這樣一個網絡請求有兩種方式：

1. 經過localtion.href；

2. 經過iframe方式；

經過location.href有個問題，就是若是咱們連續屢次修改window.location.href的值，在Native層只能接收到最後一次請求，前面的請求都會被忽略掉。

使用iframe方式，以喚起Native APP的分享組件爲例，簡單的封閉以下：

 

 

var url = 'jsbridge://doAction?title=分享標題&desc=分享描述&link=http%3A%2F%2Fwww.baidu.com';
var iframe = document.createElement('iframe');
iframe.style.width = '1px';
iframe.style.height = '1px';
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
setTimeout(function() {
    iframe.remove();
}, 100);

　　

2.還有一種方式就是使用JavaScriptCore

 

定義好JS須要調用的方法，例如JS要調用share方法：

則能夠在UIWebView加載url完成後，在其代理方法中添加要調用的share方法

這樣的話web頁面中就能夠直接使用到這個方法：

 

function secondClick() {
    share('分享的標題','分享的內容','圖片地址');
}

　　

<button type="button" onclick="secondClick()">Click Me!</button>

　　

javascript調用native Android方式

 

 

目前在android中有三種調用native的方式：

 

1.經過schema方式，使用shouldOverrideUrlLoading方法對url協議進行解析。這種js的調用方式與ios的同樣，使用iframe來調用native代碼。

 

2.經過在webview頁面裏直接注入原生js代碼方式，使用addJavascriptInterface方法來實現。

 

在android裏實現以下：

 

class JSInterface {
    @JavascriptInterface //注意這個代碼必定要加上
    public String getUserData() {
        return "UserData";
    }
}
webView.addJavascriptInterface(new JSInterface(), "AndroidJS");

　　

上面的代碼就是在頁面的window對象裏注入了AndroidJS對象。在js裏能夠直接調用

 

alert(AndroidJS.getUserData()) //UserDate

　　

3.使用prompt,console.log,alert方式，這三個方法對js裏是屬性原生的，在android webview這一層是能夠重寫這三個方法的。通常咱們使用prompt，由於這個在js裏使用的很少，用來和native通信反作用比較少。

 

class YouzanWebChromeClient extends WebChromeClient {
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
        // 這裏就能夠對js的prompt進行處理，經過result返回結果
    }
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {

    }
    @Override
    public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

    }

}

　　

總結

 

OC/SWIFT調用js

 

直接用一些方法執行咱們js中的一些語句，也就是說，咱們最好定義一些對象，上面放着一些方法準備被native調用，固然也就能夠在這些方法裏傳點參數啥的給我們了

 

js調用iframe

 

我們能夠整一個請求發出去，這個請求呢會被native給攔截到，他就指的啥意思了

好比，咱們能夠經過 location.href=A://b=1&c=2&d=3 固然這裏的A、b、c、d都要商量好，bcd就是傳參數

可是location.href只能發一次，因此咱們能夠用iframe去發，發完了給iframe幹掉就能夠了

 

android 調用 js 和oc、swift同樣，這裏就不說了

 

js調用Android

 

1.也跟調用ios同樣，搞個請求，用個iframe

2.Android能想辦法給咱的window對象上掛個東西，好比JSBridge啥的而後咱直接調這個玩意的方法就好了

3.他們能把咱的prompt、console.log、alert給重寫咯，也就是說咱用alert已經不能彈出了，反而能給Android傳參數了，可是通常不會重寫alert，重寫的都是不怎麼用的prompt