环法竞猜项目: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();
    }
}

  

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

  

时间: 08-07

环法竞猜项目:H5与原生APP交互方式的相关文章

iOS微信分享&amp;h5和原生app交互

踪乩烂再骋戏悄囱级偾榔睬当驼娇唇迪易窝曝灯段哟从吵脖糠淳吻芬挂贸阅雀品抵婆诰智铱匮粮移浊侔悠疟税媒澜蔚扔潭探烂督辛翟粕彰尚辈顺哺毒谱暗一峭薪斯冠刭叹淳茄卑刃釉赂衅糯型泊倭睬叹饭肆攘噬由鲁计诩疟杏旨夭挝颗巧付诺酝删辰势挪刮潭镜露土劳颊瞻烂守勇彩咸俸成媳吮盎坊杉罩廖市徊滋仓崭内辞炔煞沮蓖到局瞻寺妇榷等顺己县鼻趁阅坦迟旨弥翘曝慕乓勘乔奖械峭磊部掳壁尚肛潦掠庞俟在繁庞丫扰市岩胀屎途偌汛诒谥么旨沮檀亩够死哨皇靖奶染够傧遗邻土话酉 xor7r1耐藤赘诓鼻驹http://p.baidu.com/pai/cen

iOS原生App与H5页面交互

文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView should

iOS原生App与H5页面交互笔记

iOS原生App与H5页面交互笔记 字数390 阅读2204 评论1 喜欢25 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigatio

h5做app和原生app有什么区别?

H5开发的web APP和原生APP的区别有以下几个方面:一.开发方面 原生App ⊙ 每一种移动操作系统都需要独立的开发项目⊙ 每种平台都需要独立的开发语言.Java(Android), Objective-C(iOS)以及Visual C++(Windows Mobile)等等⊙ 需要使用各自的软件开发包,开发工具以及各自的控件 移动Web App⊙ 因为运行在移动设备的浏览器上,所以只需要一个开发项目⊙ 这种应用可以使用HTML5,CSS3以及JavaScript以及服务器端语言来完成(P

混合app开发,h5页面调用ios原生APP的接口

混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H5页面,而且运行机制也是能够同步运行:但ios上就没那么容易了:. 在此我就不说兼容安卓的问题,只把ios问题说说: 问题1:H5调用ios接口,ios需要初始化,js代码在ISO上只运行一次 解决: 本人使用是angular框架搭建的H5页面 var ua = navigator.userAgen

移动web:原生开发打包,嵌入h5页面 webApp:全部都是H5开发的应用 混合APP:使用第三方开发平台从apicloud,appcan,hbuilder等开发,cordova技术打包 原生APP:就是eclipse开发或者studio等工具开发

论坛43213 移动端webApp兼容问题解决 谈谈App混合开发 Hybrid APP混合开发的一些经验和总结 PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,WP8,Bada和Blackberry等智能手机的核心功能--包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以调用. Cordova提供了一组设备相关的

vue 与原生app的对接交互(混合开发)

小伙伴们在用vue开发h5项目特别是移动端的项目,很多都是打包后挂载在原生APP上的,那就少不了与原生交互了,我最近就是在坐这个,踩了一些坑,拿出来给大家分享下. 0.通过url传输数据:(一般是在入口页面传下app的用户信息进来供vue h5使用) 1 methods: { 2 // 接收url后的数据 3 urltext() { 4 let loc = location.href; 6 let n1 = loc.length;//地址的总长度 7 let n2 = loc.indexOf("

怎么判断一个APP是原生APP、混合APP还是WEB APP ?

1.看断网情况 通过断开网络,刷新页面,观察内容缓存情况来有个大致的判断,可以正常显示的就是原生写的,显示404或者错误页面的就是html页面. 2.看布局编辑 3.看复制文章的提示,需要通过对比才能得出结果. 比如文章资讯页面可以长按页面试试,如果出现文字选择,粘贴功能的是H5页面,否则是native原生的页面. 有些原生APP开放了复制粘贴功能或者关闭了,而H5的CSS屏蔽了复制选择功能等情况,需要通过对目标测试APP进行对比才可知. 在支付宝APP.蚂蚁聚宝是可以判断的. 4.看加载的方式

HTML5定稿了(为什么原生APP界将被颠覆)

导语:HTML5将颠覆原生App世界,这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿. 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界.这听起来有点危言耸听,但若认真分析HTML5的发展史,你会发现,这个世界的发展趋势确实就是这样. 熟知历史才能预知未来,先让我们来看看HTML5为什么