一文理清H5调起App那些事

以安卓为例，实现h5调起app步骤：

在安卓AndroidManifest.xml中，启动Activity下添加属性：

<intent-filter><action android:name="android.intent.action.VIEW" /><category android:name="android.intent.category.DEFAULT" /><category android:name="android.intent.category.BROWSABLE" /><dataandroid:scheme="xxx" /></intent-filter>

自定义scheme://host/path，例如：mqqwpa://im/chat?chat_type=wpa，对应安卓中的data：

    <dataandroid:scheme="mqqwpa"android:host="im"android:pathPrefix="/chat"/>

“?”后带参chat_type，值为wpa，跟我们常用的http url或api是一样的：http://www.baidu.com?id=1！

Activity中，写接收代码：
```
 String action =  getIntent().getAction();if (Intent.ACTION_VIEW.equals(action)) {Uri uri = getIntent().getData();if (uri != null) {LogUtil.e(uri.getHost() + uri.getPath());}}
```
我们通过getHost和getPath来判断具体的打开路径，通过uri.getQueryParameter("id")来获取参数，然后再跳转到目标Activity！
接下来，在网页中写一个超链接<a href="mqqwpa://im/chat?chat_type=wpa">打开app</a>，点击超链接即可调起App！

这里有两个需要注意点的：

1.我们该如何定义scheme://host/path？

一般的，我们定义路径时，最好只定义scheme，例如：
```
<data android:scheme="xxx" />
```
而不定义具体的host和path，这样做的好处是，我们不可能仅仅只跳转一个Actviity，当需要跳转多个Activity时，我们只需要在h5中写不同的路径（保证scheme统一）就行，代码中我们通过获取host和path去判断具体跳转意图既可！
2.我们该将scheme定义在哪个Activity？

这里需要再次强调第一条，为什么要只定义scheme，而不定义具体host和path，因为我们不仅仅只需要打开一个Activity，如果定义具体host和path，那么我们就需要在清单文件中的不同activity下定义多个data，这样做理论上也是可以的，但弊端就是，当我们打开某个具体Activity后按返回键会直接退出应用，这样应该不符合良好的用户体验吧？

所以，一般的，最好把scheme定义在启动页SplashActivity，代码中只需在SplashActivity->MainActivity这一步后面加上intent的action以及scheme的判断，再次跳转即可：
```
  startActivity(new Intent(mContext, MainActivity.class));String action = getIntent().getAction();if (Intent.ACTION_VIEW.equals(action)) {Uri uri = getIntent().getData();if (uri != null) {if (uri.getHost().equals("xxx") && uri.getPath().equals("/xxx")) {String id = uri.getQueryParameter("id");if (!TextUtils.isEmpty(id)) {Intent intent = new Intent(mContext, XXXActivity.class);intent.putExtra(Const.PARAM_ID, id);startActivity(intent);}}}}
```
这样就可以快速进入目标Activity，且按返回键时，会返回到MainActivity中，不会退出应用（Splah和Main的启动方式最好为SingleTask）！

这样，一个h5调起app的功能就写好了，但当你拿出来给产品和测试同学使用的时候，就会被无情打脸！！！

问题一，当用户未安装app时，点击调起链接没有任何反应，而产品需求是，未安装app，跳转至下载页面，已安装app直接打开；
问题二，也是最致命的问题，一般的分享推广推销都是在微信中进行的，当你在微信中给一个好友分享一个推广网页时，好友点击打开app没有任何反应，你会不会感到绝望？

先说问题一，因为h5中无法直接判断用户是否安装了应用，所以广大网友也有自己的解决办法，就是点击打开app按钮时，调用js方法，不管安装没安装，在n秒后都进入下载页！但实际上，当你在浏览器中点击后，浏览器都会有一个弹框提示“是否打开app”，用户同意的快还好，如果同意的慢，一是弹框几秒后会消失，二是因为我们写了下载方法，所以会弹出下载提示，这个体验是非常糟糕的！

window.location = "mqqwpa://im/chat?chat_type=wpa";
let loadDateTime = new Date();
window.setTimeout(function () {let timeOutDateTime = new Date();if (timeOutDateTime - loadDateTime < 5000) {window.location = "http://qq.apk";} else {window.close();}
},
500);

我这里有一个相对完美的解决办法，自己做一个过渡页(h5)，在过渡页中通过window.onlaod自动打开我们的scheme，过渡页中有两个按钮，打开和下载，当用户未安装应用时无法自动跳转，就直接停留在过渡页，用户可以根据需求做出选择！

下面是一个直接打开qq聊天窗口的例子：

当我们跳转至该网页时，会自动提示是否打开app，当停留在此页面时，用户可以选择打开或下载！

但实际使用时，又被无情打脸，也就是上面所说的问题二，在qq全家桶，qq，qq浏览器，微信中，window.onload失效，无法自动跳转，只能手动点击跳转：

而在微信中，不但window.onload失效，就连手动点击也是完全没有反应的，这就让人犯了难，全国最火的广告推广软件微信不支持调起app？这可如何是好？

当然，解决办法也不是没有，腾讯应用宝提供了自家的微下载推广功能，前提是你的app在腾讯应用宝上架了才能使用：

腾讯开发平台后台管理，打开自己的应用：

配置安卓和ios应用地址，定义好scheme，然后将h5中的链接改为应用宝提供的链接，此时再次在qq全家桶中测试，会进入应用宝提供的应用打开和下载过渡页，在此页面会自动调起app：

但别急，又出问题了，qq全家桶没问题了，但其它浏览器又出问题了：

其它浏览器打开此界面，完全不识别应用，只有下载按钮可选！！！

这。。。笔者也是很无语。。。，那么现在的解决办法只有判断浏览器，是qq，微信还是其它浏览器，然后跳转不同链接，qq全家桶就跳转应用宝链接，其它浏览器就跳转自定义scheme：

let u = navigator.userAgent;
if (u.indexOf('QQ') > -1 || u.indexOf('WeChat') > -1) {window.location ="https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq";
} else {window.location = path;
}

但问题又来了（这么多问题笔者也米有办法- -），虽然应用宝页面可以调起app，但我定义的scheme以及参数呢？无法传递和接收啊？？是个大问题！

但，别着急，腾讯开放平台提供了applink能力，接入后，就可以将自己的scheme拼接在应用宝链接后面，在qq全家桶包括微信中完美打开指定页面，同时支持安卓和苹果，需要指出的是，applink能力需要申请，而且不支持用户直接后台操作申请，需要加qq群找管理申请（这个操作笔者也有点迷- -！），另外如果你未安装app，那么在应用宝链接页面点击下载后，它会自动将你得scheme信息复制到剪切板上，你在下载安装并打开app后，可以检测剪切板内容，并做相应跳转！

打开腾讯应用宝接入文档：找到下方：

进入qq群，找群主申请，通过后在链接后面拼接自己的scheme（需要urlencode）就可以了：

window.location ="https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq&android_schema=xxx&ios_scheme=xxx";

以下是对于各浏览器对h5调起app的支持情况总结：

	QQ/QQ浏览器	微信	其它浏览器
window.onload	不支持	不支持	支持
自定义scheme	支持	不支持	支持
自定义下载	支持	不支持	支持
应用宝链接	支持	支持	不支持

H5页面源码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Title</title><style>* {margin: 0;padding: 0;}.container {max-width: 640px;height: 100vh;margin: auto;background: #3a8ee6;text-align: center;padding-top: 50%;}.container img {width: 80px;height: 80px;margin-bottom: 40px;}.container .btn {margin-top: 10px;width: 80%;height: 45px;background: #2bd9b4;border-radius: 23px;color: white;text-align: center;line-height: 45px;margin-left: 10%;}</style></head><body><div class="container"><div><img src="https://pp.myapp.com/ma_icon/0/icon_6633_1631677952/96"></div><div class="btn" onclick="openApp()">打开QQ</div><div class="btn" onclick="toDown()">下载QQ</div></div><script>let path = "mqqwpa://im/chat?chat_type=wpa&uin=800013811";function toDown() {let u = navigator.userAgent;let url;if (u.indexOf('iPhone') > -1) { //iphoneurl = "https://apps.apple.com/cn/app/qq/id444934666"} else if (u.indexOf('Android') > -1) { //androidurl = "https://down.qq.com/qqweb/QQ_1/android_apk/Android_8.8.28.6155_537094708_32.apk"}window.location = url;}function openApp() {let u = navigator.userAgent;if (u.indexOf('QQ') > -1 || u.indexOf('WeChat') > -1) {window.location ="https://a.app.qq.com/o/simple.jsp?pkgname=com.tencent.mobileqq&android_schema=" + encodeURIComponent(path) +"&ios_scheme=" + encodeURIComponent(path);} else {window.location = path;}}window.onload = function() {openApp();}</script></body>
</html>

微下载Applink接入文档：

### android_schema 参数传递方式(该协议在浏览器能唤起的即可）
例如，原微下载链接为：
http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx
对应的应用跳转伪协议为：
xxx://xxx/test?id=1则在原微下载链接中传递android_schema 参数即可，注意需要做urlencode，如下：
http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx
&android_schema=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1如果需要安卓和IOS同时支持APPlink，则把两个对应的schema拼接即可
例：http://a.app.qq.com/o/simple.jsp?pkgname=com.xxx.xxx
&ios_scheme=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1
&android_schema=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1PS：
1、通常scheme带的第一个参数用?连接；
2、scheme自查：A．将未encode的scheme:xxx://xxx/test?id=1，直接复制到浏览器的地址栏里，点击进入;B．将encode的scheme拼在微下载的链接测试页面自测http://qzs.qq.com/open/yyb/wxz_tools/html/schemetools.html?type=1&sch=xxx%3A%2F%2Fxxx%2Ftest%3Fid%3D1

一文理清H5调起App那些事相关推荐

h5调起app的方法；app调起vue中的某个方法
h5调起app的方法 window.fuXinJSBridge.personSuccess(par) // par 为参数:personSuccess双方约定的方法名 app调起vue中的某个方法 / ...
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET
企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 原文:企业号微信支付公众号支付 H5调起支付API示例代码 JSSDK C# .NET 先看效果 1.本文演示的是 ...
一文理清散乱的物联网里开发者必须关注的技术！
一文理清散乱的物联网里开发者必须关注的技术! 不管是从商业模式导出的业务模型,还是从技术发展的角度看,文本都倾向于将物联网技术构架看作是互联网技术构架的延展.而与这个观念对立的,是传统嵌入式软件开发的 ...
前端MUI+H5+HBuilderX开发APP（IOS，android），后台Springboot,java学习与实践文章，更新中（二）
前端MUI+H5+HBuilderX开发APP(IOS,android),后台Springboot,项目搭建,图标设置等,更新中(二) 新建我的第一个APP manifest.json: 图标设置: ...
h5跳转app指定页面及各种坑的总结
11.29更新项目中对微信内的处理方案及一些坑 12.3更新ios9后url scheme的坑及最终解决方案最近遇到一个需求:如果用户安装了app,则跳app:如果用户没安装app,则跳app下载链 ...
H5唤起android app，启动关联应用
H5 也好,用js也和行, 代码如下: (请前端同学来写,安卓开发写的毕竟还是丑的一P) <!DOCTYPE html> <html> <body> ...
MLK | 一文理清集成学习知识点(BoostingBagging)
???? 前情回顾 MLK | 那些常见的特征工程 MLK | 模型评估的一些事 MLK | 机器学习的降维"打击" MLK | 非监督学习最强攻略 MLK | 机器学习采样方法大 ...
H5跳转APP，如果当前设备没有安装该APP，跳转去应用商店下载
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.使用步骤总结前言 H5跳转APP,如果当前设备没有安装该APP,跳转去应用商店下载提示:以下是本篇文章正文内 ...
h5做的app和原生app的区别
之所以说h5做的app和原生app的区别,是因为一位博友的问题: 随着 h5 的普及,是不是不再需要开发 app ? 我的回答是要分业务需求,分场合而定. 比如现在的微信小程序这么流行,甚至也取代了不 ...

一文理清H5调起App那些事

一文理清H5调起App那些事相关推荐

最新文章

热门文章