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

Posted 2020-10-01

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

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