环法竞猜项目（H5与原生APP交互方式）

大道之行，天下为公。这篇文章主要讲述环法竞猜项目：H5与原生APP交互方式相关的知识，希望能为你提供帮助。
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(); } }

【环法竞猜项目（H5与原生APP交互方式）】
（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)
};

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="biketo_title" content="2017环法竞猜！赢万元骑行装备" >

<
meta name="biketo_subtitle" content="使用美骑APP，参与2017环法竞猜活动，答对全部竞猜题目，100%获骑行装备奖。" >

<
meta name="biketo_url" content="http://hd.biketo.com.cn/tourFrance2017/#/index/sharepage" >

<
meta name="biketo_imageurl" content="http://hd.biketo.com.cn/tourFrance2017/public/img/share-icon.jpg" >

< 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 = {
‘biketo_title‘: document.getElementsByTagName(‘meta‘)[‘biketo_title‘].content,
‘biketo_subtitle‘:document.getElementsByTagName(‘meta‘)[‘biketo_subtitle‘].content,
‘biketo_url‘:document.getElementsByTagName(‘meta‘)[‘biketo_url‘].content,
‘biketo_imageurl‘: document.getElementsByTagName(‘meta‘)[‘biketo_imageurl‘].content
};

android.didsetParamFromWebView(JSON.stringify(titleJson));

}

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)); }