h5启动原生APP总结

许久没有写博客了，最近有个H5启动APP原生页面的需求，中间遇上一些坑，看了些网上的实现方案，特意来总结下

一、需要判断客户端的平台以及是否在微信浏览器中访问

1、客户端判断

在启动APP时，Android和IOS系统处理的方式是不一样的，Android这边由于开放，可以在浏览器中通过<a>标签以及meta标签的方式，让浏览器app获取手机打开应用的权限进而启动APP。

而在IOS这边，IOS9以后的系统，则可以在APP开发过程中加入配置和逻辑代码编写，系统在浏览器即将访问到某个域名前就把这个域名对应的APP打开，这个有点闪，封闭还是有封闭的好处。

所以首先要在客户端判断，是Android系统还是IOS系统，判断代码如下

复制代码
function isInIos(){var userAgentInfo = navigator.userAgent ,Agents = ["iPhone" , "iPad", "iPod"];for(var v = 0; v < Agents.length; v++) {if (userAgentInfo.indexOf(Agents[v]) > 0) {return true;}}return false;
}
复制代码

2、是否在微信内置浏览器中

无论是在哪个平台的客户端Android/IOS，在微信的平台上访问都有一个问题，那就是无法启动客户端，这是微信为了安全性考虑的限制，android这边屏蔽schema协议，除非公司是微信的伙伴加入了白名单才能

使用，IOS系统可以去访问app对应appstore的下载页，但是微信经常屏蔽appstore的这个网址，进而访问不到。比较方便的做法就是在微信浏览器中，无论是IOS还是android都去应用宝的下载(IOS 这边最后会到

appstore中)页面打开。我这边的需求是提示用户点击“...”用默认浏览器打开。

判断是否是在微信中，代码如下：

function isInWx(){var agent = window.navigator.userAgent.toLowerCase();return agent.match(/MicroMessenger/i) == 'micromessenger';
}

 

 

二、原理

首先无论是andorid还是IOS端，在浏览器中通过JS都是无法判断该手机是否装有某APP的，即使这个浏览器有权限读取手机应用列表，也没有一个固定的对外API让咱们进行查询。而H5启动APP本质上是通过

URL scheme打开APP，一个APP可以设置一个或多个打开自己的URL scheme，浏览器去访问某一个APP的URL scheme，然后若系统安装有这个APP，则会请求权限去打开这个APP。其实也算是浏览器app

打开另一个app，iOS就可以使用 UIApplication 的 canOpenUrl 方法来检测URL scheme 是否能打开对应的APP，而android也是类似的方式。当然如果JS跳转URL scheme没有反应，也意味着这个手机没有

装这个app。

 

三、android平台

首先编辑AndroidManifest.xml，主要是增加第二个<intent-filter>

复制代码
<activity android:name=".activity.LoadingActivity"android:label="${APP_NAME}"android:screenOrientation="portrait"android:theme="@style/FirstActivityTheme"><intent-filter><action android:name="android.intent.action.MAIN" /><category android:name="android.intent.category.LAUNCHER" /></intent-filter><intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><data android:host="android"android:scheme="wushang" /></intent-filter>
</activity>
复制代码

比如此处wushang就是scheme，这个最好是app的唯一标识符，要不然在H5唤醒时，会出现一个选择框，选择启动哪一个APP。而host表示启动该页面，其实这个更应该用com.android.sky这样的包名来替代更好。

这样的情况完整的URL就是wushang://android?data=sky，后面是参数传递。在Activity中可以用如下代码获取参数

public void onCreate(Bundle savedInstanceState) {             Uri uridata = this.getIntent().getData();             String mydata = uridata.getQueryParameter("data");            
}

之后在进行字符串截取还是什么鬼的都随意啦。

 

接下来来谈谈前端代码，这里有两种情况

1、页面在刷新进入时，请求权限唤起APP

这个比较简单，就只用在页面的顶部head中加入meta标签即可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

这个标注当页面刷新即去访问这个链接，进而启动APP。但是存在一个问题，如果是苹果系统的Safari浏览器的话，访问有这个meta的头，会给出错误提示，所以这个头部可以在后端进行页面渲染时通过客户端的

总类在加上去。

2、通过点击事件唤起APP

最简单的办法当然是直接使用a标签，如下

<a href="wushang://android">open Android app</a>

但是在实际使用时，是需要对客户端的平台类型还有是否在微信内置浏览器中进行判断的，所以这样的做法肯定是不行的。

接下来谈谈在开发过程中，遇到的一个问题，记录下。因为这边移动端使用的工具库库是zepto，采用的点击事件是tap，但是在用tap进行处理是经常要点很多下，才能唤起APP

<script type="text/javascript">$('#go').tap(function(){window.location.href = "wushang://android";});
</script>

具体原因不知，可能是tap事件采用的是轻点触碰。然后摸索了下，才用click事件，或者直接在a标签上标注处理函数就没有这问题

复制代码
<a id="go" >open Android app
</a>
<a href="javascript:startApp()">open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>$('#go').click(function () {if(publicFun.isIos()){alert('it is IOS')}else{window.location.href = "wushang://android";}});function startApp(){if(publicFun.isIos()){alert('it is IOS')}else{window.location.href = "wushang://android";}}
</script>
复制代码

所以决定以后遇到这类问题，就用这两种方式了。下面是实际的处理函数

复制代码
 window.startApp = function(){     //启动APPif(publicFun.isInWx()){     //微信中alert("请在浏览器中打开");}else{      //非微信中if(publicFun.isIos()){　　　　//IOS系统，直接去itunes中，既可以下载也可以打开window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";}else{      //android系统，通过定时器的方式，判断是否安装有APPvar hasApp = true , t = 1000;setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";} , 2000);var t1 = Date.now();window.location.href = "wushang://android";setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为falsevar t2 = Date.now();hasApp = !(!t1 || t2 - t1 < t + 150);} , t);}}} 
复制代码

其实有个非常简单的办法，就是直接跳转应用宝。无论是在android还是IOS，以及微信非微信。应用宝的下载页面都有下载和打开两个功能（如果是在IOS平台，它是通过连接app store的方式）

 

四、IOS平台

针对ios9及以上的打不开问题，实际上ios9提供了更好的解决方案————通用链接。

这是iOS9推出的一项功能，如果你的应用支持Universal Links(通用链接)，那么就能够方便的通过传统的HTTP链接来启动APP(如果iOS设备上已经安装了你的app，不需要额外做任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许可以更简单点来说明，在iOS9之前，对于从各种从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，我们通常只能使用scheme。

以上来自网上关于通用链接的介绍，对于前端简单点讲就是你访问一个http的url，如果这个url带有你提交给开发平台的配置文件中匹配规则的内容，ios系统会去尝试打开你的app，如果打不开，系统就会在浏览器中转向你要访问的链接。很好的一个属性，因为通过这个属性在ios9上我们能够绕过微信的拦截从而打开app。

所以上面的点击事件，仅仅是去访问app store，因为若app已安装，在浏览器访问时，就已经去到APP中了。

这些都是IOS配置上的东西，就不多写了。至于传参，以及页面定向，其实也就是相当于在UIWebView中获取当前连接的URL，然后进行字符串拆分以及校验，即可判断去哪个页，以及获取参数值。

 

转载于:https://www.cnblogs.com/mtl-key/p/7126760.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/371753.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

什么时候使用Apache Camel？

什么时候使用Apache Camel？

Apache Camel是JVM / Java环境中我最喜欢的开源框架之一。 它可以轻松集成使用多种协议和技术的不同应用程序。 本文介绍了何时使用Apache Camel以及何时使用其他替代方法。 问题&#xff1a;企业应用程序集成&#xff08;EAI&#xff09; 由于新产品和新应用&#xff0c;几乎…
阅读更多...
软工个人总结

软工个人总结

目录 一、个人提升二、写下属于自己的人月神话三、对下一届、后来人、自己的建议四、我的团队——Clover五、关于代码质量六、学过软件工程&#xff1f;七、自我介绍八、个性发挥一、个人提升 1. 开学初的目标 希望通过团队合作领会团队合作的内在精神&#xff0c;希望在分工完…
阅读更多...
排序算法之（7）——堆排序

排序算法之（7）——堆排序

【堆排序的思路】 堆排序主要是利用了堆的性质。对于大顶堆&#xff1a;堆中的每一个节点的值都不小于它的孩子节点的值&#xff0c;具体可參考我的还有一篇博客http://blog.csdn.net/adminabcd/article/details/46880591&#xff0c;那么大顶堆的堆顶元素就是当前堆中全部元素…
阅读更多...
重新登录：重新登录

重新登录：重新登录

嗨&#xff0c;我再次回到日志中来&#xff0c;这是任何应用程序设计和开发的固有部分。 我是坚强的基础知识的忠实拥护者&#xff0c;在我的拙见中&#xff0c;日志记录是任何企业级应用程序中经常被忽略但基本的关键要素之一。 我已经写在此之前这里 。 为了理解当前文章&…
阅读更多...
分治1--二分查找

分治1--二分查找

分治1--二分查找 一、心得 二、题目和分析 三、代码和结果 1 #include <iostream>2 using namespace std;3 int a[10]{1,2,4,5,7,8,9,10,13,20};4 5 6 //非递归 7 int find(int i){8 int l0,r9;9 int mid(lr)/2; 10 while(l<r){ 11 mid(lr)/2; 12…
阅读更多...
Spring自定义命名空间

Spring自定义命名空间

Spring自定义命名空间提供了一种很好的方式来简化用于描述Spring应用程序上下文的bean定义的xml文件。 这是一个相当古老的概念&#xff0c;最初是在Spring 2.0中引入的&#xff0c;但值得不时地进行审查。 考虑一种情况&#xff0c;必须为没有自定义名称空间的Spring MVC应用程…
阅读更多...
预告片：裸指关节SOA

预告片：裸指关节SOA

我正在研究这个想法&#xff0c;但我不知道它是否对你们有吸引力。 我想就您是否需要进一步探讨提出您的意见。 达成协议&#xff1a;我遇到过一些团队&#xff0c;他们在使用SOA技术时由于其工具的复杂性而陷入泥潭。 我只在Java中看到过这种情况&#xff0c;但是我从一些C&am…
阅读更多...
JMX和Spring –第1部分

JMX和Spring –第1部分

这是三篇文章的第一篇&#xff0c;这三篇文章将展示如何通过JMX支持为Spring应用程序赋能。 Maven配置 这是用于设置此示例代码的Maven pom.xml&#xff1a; <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSche…
阅读更多...
java婚庆网站源码_基于jsp的婚庆网站-JavaEE实现婚庆网站 - java项目源码

java婚庆网站源码_基于jsp的婚庆网站-JavaEE实现婚庆网站 - java项目源码

基于jspservletpojomysql实现一个javaee/javaweb的婚庆网站, 该项目可用各类java课程设计大作业中, 婚庆网站的系统架构分为前后台两部分, 最终实现在线上进行婚庆网站各项功能,实现了诸如用户管理, 登录注册, 权限管理等功能, 并实现对各类婚庆网站相关的实体进行管理。该婚庆…
阅读更多...
JQuery实现的模块交换动画效果

JQuery实现的模块交换动画效果

<!doctype html> <html><head><meta http-equiv"content-type" content"text/html;charsetutf-8" /><title>JQuery实现的模块交换动画效果</title><meta name"Keywords" content"jquery&#xff0c…
阅读更多...
JMX和Spring –第2部分

JMX和Spring –第2部分

这篇文章从本教程的第1部分继续。 嗨&#xff0c;在我的前一篇文章中&#xff0c;我解释了如何通过Spring设置JMX服务器以及如何通过身份验证和授权保护对它的访问。 在本文中&#xff0c;我将展示如何实现一个简单的MBean&#xff0c;该MBean允许用户在运行时更改Log4j记录器…
阅读更多...
android p wifi一直在扫描_（一百六十八）Android P wifi 扫描失败结果上报流程梳理-扫描上报梳理②...

android p wifi一直在扫描_（一百六十八）Android P wifi 扫描失败结果上报流程梳理-扫描上报梳理②...

接(一百五十五)Android P wifi 扫描失败结果上报流程梳理-扫描上报梳理 扫描失败上报梳理发现梳理的差了很多&#xff0c;特补充1.WificondScannerImplOverridepublic boolean startSingleScan(WifiNative.ScanSettings settings,WifiNative.ScanEventHandler eventHandler) {i…
阅读更多...
带有ActiveMQ的JMS

带有ActiveMQ的JMS

带有ActiveMQ的JMS JMS是Java Message Service的缩写&#xff0c;它提供了一种以松散耦合&#xff0c;灵活的方式集成应用程序的机制。 JMS以存储和转发的方式跨应用程序异步传递数据。 应用程序通过充当中介的MOM&#xff08;面向消息的中间件&#xff09;进行通信&#xff0c…
阅读更多...
用户故事排球教练助手

用户故事排球教练助手

计划&#xff1a;估计这个任务需要一周时间 需求分析&#xff1a;作为一名排球教练助手&#xff0c;我需要了解每场每位队员的技术动作&#xff0c;每场比赛每位队员的得分情况&#xff0c;以便教练更好的了解到每位队员的发挥情况和特长。 设计文档&#xff1a;用户进入此界面…
阅读更多...
TMS320DM642学习----第一篇（硬件连接）

TMS320DM642学习----第一篇（硬件连接）

DSP设备型号&#xff1a;SEED-DTK-VPM642&#xff08;目前实验室用途&#xff1a;视频处理&#xff0c;图像处理方向&#xff0c;预计搭载目标跟踪以及云台防抖等算法&#xff09; 官网链接&#xff1a;http://www.seeddsp.com/index.php/Home/Product/detail/name/1/id/174.ht…
阅读更多...
关于inline-block 元素之间为何会产生间隔

关于inline-block 元素之间为何会产生间隔

关于inline-block 元素之间为何会产生间隔 现象&#xff1a; <body><input type"text"><input type"text"> </body> 在浏览器中的表现&#xff1a; 实时上不仅仅是 inline-block 会导致这种现象。 inline 也会导致。 那问题来了&a…
阅读更多...
数据库备份 java jar_Java实现数据库备份并利用ant导入SQL脚本

数据库备份 java jar_Java实现数据库备份并利用ant导入SQL脚本

​数据备份对于经常在运维部署方面的工作者来说&#xff0c;是一件相对简单的事情&#xff0c;都可以通过某一个SQL工具进行备份&#xff0c;但是如果在项目运行当中&#xff0c;我们需要对数据进行实时&#xff0c;或者是每隔一星期&#xff0c;一个月&#xff0c;等等进行数据…
阅读更多...
JSF简单Ajax示例

JSF简单Ajax示例

今天&#xff0c;我们将看到一些使用JSF的Ajax简单样本。 如果要查看有关JSF / Web应用程序的其他文章&#xff0c;请单击以下链接&#xff1a; 重定向后的JSF持久化对象和消息 &#xff0c; 使用JAAS和JSF进行用户登录验证 &#xff0c; JSF&#xff1a;Converter and Bean Au…
阅读更多...
常用的好用的window工具

常用的好用的window工具

1. FastStone Capture截图录屏软件 百度软件中心&#xff1a;http://rj.baidu.com/soft/detail/13504.html?ald 注册企业版&#xff1a; 用户名&#xff1a;c1ikm 注册码&#xff1a;AXMQX-RMMMJ-DBHHF-WIHTV 中文输入乱码解决方法&#xff1a; 2. Notepad文本编辑器&#xff…
阅读更多...
Pointcut is not well-formed: expecting #39;name pattern#39; at character position 36

Pointcut is not well-formed: expecting #39;name pattern#39; at character position 36

转载于:https://www.cnblogs.com/jzssuanfa/p/7162717.html
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023