admin管理员组文章数量:1574959
最近公司业务做到推广这块,下发短信H5链接点击有APP跳APP,没有跳应用市场的业务,参考大佬的博客实现
代码如下:
toApp() {
//微信内置浏览器
let ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//微信内置浏览器,提醒浏览器打开 -我这边ui提供的是图片
this.dialogImg = true;
return;
}
//ios
if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
window.location = ('xxx://');//schema链接或者universal link
window.setTimeout(() => { //如果没有安装app,便会执行setTimeout跳转下载页
window.location.href = "xxx"; //ios下载地址3
}, 3000);
//android
} else if (navigator.userAgent.match(/android/i)) {
try {
window.location.href = ('app://xxx'); //schema链接或者universal link
window.setTimeout(() => {
window.location = "xxx"; //android下载地址
}, 3000);
} catch (e) {
}
}
}
场景描述
- 服务器下发跳转路径,客户端根据服务器下发跳转路径跳转相应的页面
- H5页面点击锚点,根据锚点具体跳转路径APP端跳转具体的页面
- APP端收到服务器端下发的PUSH通知栏消息,根据消息的点击跳转路径跳转相关页面
- APP根据URL跳转到另外一个APP指定页面
h5 唤起 App 方案
-
URL Scheme(android/ios都支持)
-
Universal Link(ios9 及以上支持的)
-
App Links(android 6+ 及以上支持)【这个可以不用,因为这个只在短信打开app可以用到】
-
微信开放标签SDK(android/ios都支持)
-
微信/浏览器中唤起 app store
这次主要使用到的是URL Scheme,有点像 web 中我们通过域名定位到一个网站,app 同样是通过类似的这个东西(URL Scheme)来定位到 app,不过URL Scheme只能在浏览器中使用,微信环境触发不了。
实现思路:
- navigator.userAgent-微信内置浏览器,android ,ios内置浏览器区分,微信内置打开的话要提示用内置浏览器打开
- window.location = (‘xxx://’)-配置android ,ios的schema链接
- 如果没有安装app,便会执行setTimeout跳转下载页,区分不同下载地址即可
我的理解比较浅,只是实现了功能,具体的原理下方大佬的文章很详细,可参考一下.
参考文档:
https://blog.csdn/weixin_43972437/article/details/121210350?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165957877516781818735740%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=165957877516781818735740&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allsobaiduend~default-2-121210350-null-null.142v39pc_rank_v36&utm_term=h5%E8%B7%B3%E8%BD%ACAPP&spm=1018.2226.3001.4187
版权声明:本文标题:基于H5跳转APP,未安装的话就跳转appstore 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dianzi/1725440295a1023482.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论