混合开发-h5页面与ios、安卓之间的通信(H5篇)
2020-07-13 06:11
1276 查看
混合开发-h5页面与ios、安卓之间的通信(H5篇)
- WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页
- 首先你需要判断是哪端
- 使用navigator.userAgent获取浏览器属性
下面的可能不准确 具体的 webView的userAgent 根据ios 安卓而定
// 可能不准确 具体的 webView的userAgent 根据ios 安卓而定 var ua = navigator.userAgent; trident: ua.indexOf('Trident') > -1, // IE内核 presto: ua.indexOf('Presto') > -1, // opera内核 webKit: ua.indexOf('AppleWebKit') > -1, //苹果、谷歌内核 gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, // 火狐内核 mobile: !!ua.match(/AppleWebKit.*Mobile.*/) || !!ua.match(/AppleWebKit/), // 是否为移动终端 ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // IOS终端 android: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, // 安卓终端 iPhone: ua.indexOf('iPhone') > -1, // 是否为iphone或QQHD浏览器 iPad: ua.indexOf('iPad') > -1, // 是否为iPad webApp: ua.indexOf('Safari') == -1, // 是否web应用程序,没有头部与底部 QQbrw: ua.indexOf('MQQBrowser') > -1, // QQ浏览器(手机上的) weiXin: ua.indexOf('MicroMessenger') > -1, // 微信 QQ: ualower.match(/\sQQ/i) == " qq", // QQ App内置浏览器(需要配合使用) weiBo: ualower.match(/WeiBo/i) == "weibo", // 微博 ucLowEnd: ua.indexOf('UCWEB7.') > -1, // ucSpecial: ua.indexOf('rv:1.2.3.4') > -1, webview: !(ua.match(/Chrome\/([\d.]+)/) || ua.match(/CriOS\/([\d.]+)/)) && ua.match(/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/), ucweb: function () { try { return parseFloat(ua.match(/ucweb\d+\.\d+/gi).toString().match(/\d+\.\d+/).toString()) >= 8.2 } catch (e) { if (ua.indexOf('UC') > -1) { return true; } return false; } }(), Symbian: ua.indexOf('Symbian') > -1, ucSB: ua.indexOf('Firofox/1.') > -1
- navigator.userAgent.indexOf(“Android”) > -1 || navigator.userAgent.indexOf(“Linux”) > -1 为安卓手机的webView
- navigator.userAgent.indexOf(“iPhone”) > -1 为苹果手机的webView
通过判断对ios 、安卓进行不同的业务代码,例:
//此代码为 关闭webView回到原生app //处理交互 方法名要和 native app内定义的对应 brak() { var u = navigator.userAgent; if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) { //安卓手机 window.android.backToApp(); } else if (u.indexOf("iPhone") > -1) { //苹果手机 window.webkit.messageHandlers.backToApp.postMessage({});//{}内可传值 } },
开发项目中,如APP中h5页面请求数据,需要token,页面上是没有登陆的,只能让ios、andriod通信传入页面中
// 这里需要定义方法,让IOS、Andriod调用传入 html中 window.obtainToken = function(token) { window.token = token; _this.$store.state.token = token; _this.$store.state.token = token; postData();// 进行接口请求等操作 };
未完待续。。。
相关文章推荐
- 微信h5支付页面与web服务器之间的通信,使用jquery ajax向服务器发送数据——微信h5支付开发5
- h5和ios原生混合开发,h5数据列表页面上滑崩溃
- H5 app混合开发,安卓物理键,屏蔽重复点击
- 电商类APP H5与iOS和android混合开发问题记录
- 禁用混合开发中H5页面的浏览器默认功能
- 【安卓】iOS 程序开发引用的第三方库之间出现 duplicate symbol 时的处理方法
- Android混合开发之Activity类与html页面之间的相互跳转
- iOS开发-应用之间的跳转及通信
- IOS开发网络第一天之06线程之间的通信
- 微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码
- IOS,H5混合开发,setTimeout定时器失效
- H5微信页面开发 IOS系统 input输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置,导致弹框里的按钮响应区域错位
- IOS和H5之间的交互开发
- Android混合开发之Activity类与html页面之间的相互跳转之Android:如何使用addJavaScriptInterface
- IOS请求H5页面、要求自定义agent判断是电脑、安卓还是iPhone登录
- h5开发安卓ios坑总结
- iOS开发-应用之间的跳转及通信
- iOS开发,UIWebview与H5之间的交互
- 安卓混合开发中原生页面与web页面的交互
- h5开发:IOS开发与H5混合开发常见的坑