APP調用H5函數

（1）登錄功能——調起APP的登錄頁面

操作：點擊h5頁面的"去登錄"按鈕，執行appLogin函數，檢測window對象是否有WebViewJavascriptBridge屬性，有的話就是IOS; window有ANDROID對象，就是安卓。分別執行對應環境下的操作。

appLogin () {
    var bridge = window.WebViewJavascriptBridge;
    var android = window.ANDROID;

    if (!!bridge) {
        bridge.callHandler(‘getAccessToken‘, null, null);
    } else if (!!android) {
        android.didClickLoginFromWebView();
    }
}

（2）登錄功能——登錄後回調到H5頁面

• 設置全局函數（因為ios使用了stringByEvaluatingJavaScriptFromString作為同步的方法，因此最好使用setTimeout作為延遲）
  • 引用解釋：stringByEvaluatingJavaScriptFromString是一個同步的方法，使用它執行JS方法時，如果JS 方法比較耗的時候，會造成界面卡頓。尤其是js 彈出alert 的時候。alert 也會阻塞界面，等待用戶響應，而stringByEvaluatingJavaScriptFromString又會等待js執行完畢返回。這就造成了死鎖。官方推薦使用WKWebView的evaluateJavaScript:completionHandler:代替這個方法。
    其實我們也有另外一種方式，自定義一個延遲執行alert 的方法來防止阻塞，然後我們調用自定義的alert 方法。同理，耗時較長的js 方法也可以放到setTimeout 中。
  • 來源：http://www.jianshu.com/p/d19689e0ed83

window.refreshPage = function (responseData) {
    setTimeout(function () {
        window.location.hash = ‘/index/page?access_token=‘+responseData;
        window.location.reload();
    },1)
};

（3）分享後回調功能

提供一個全局函數給app調用，告知函數名即可。

APP端分享時設置標題

因為title數據可能後期需要修改，考慮到靈活性，因此將這個title設置的數據放在前端。通過meta標寫在html中，由app負責讀取和設置。

（1）IOS：

直接寫在meta中，協商好name，IOS可以很方便地讀取到）

<meta name="title" content="2017環法競猜！贏萬元騎行裝備" >
<meta name="subtitle" content="環法競猜活動。" >
<meta name="url" content="http://hd.xxx.com.cn/tourFrance2017/#/index/sharepage" >
<meta name="imageurl" content="http://hd.xxx.com.cn/tourFrance2017/public/img/share-icon.jpg" >

（2）Android：

Android比較難讀取html頁面元素，所以需要通過json把數據傳給Android，didsetParamFromWebView是Android開發人員提供出的一個方法。（註意：需要把json轉成字符串）

setTitleForAndroid() {
    var android = window.ANDROID;
    var titleJson = {
        ‘title‘: document.getElementsByTagName(‘meta‘)[‘title‘].content,
        ‘subtitle‘:document.getElementsByTagName(‘meta‘)[‘subtitle‘].content,
        ‘url‘:document.getElementsByTagName(‘meta‘)[‘url‘].content,
        ‘imageurl‘: document.getElementsByTagName(‘meta‘)[‘imageurl‘].content
    };
    android.didsetParamFromWebView(JSON.stringify(titleJson));
}

環法競猜項目：H5與原生APP交互方式