原生js 腳本 owa nss 目前 element eat 移動端 get

混合開發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

混合開發