uniapp h5在浏览器唤起app

需求

当用户打开h5 链接时候，点击打开app, 若用户在已经安装过app的情况下直接打开app，若未安装过跳到应用市场下载安装

这个功能在实现上主要分为两种场景，从普通浏览器唤醒以及从微信唤醒。这两个场景又分为了IOS端和安卓端

配置

安卓
在manifest.json的"app-plus"->“distribute”->"android"节点下添加schemes数据:“schemes” : “nameAPP”

"schemes" :  ["nameAPP"]

IOS
在manifest.json的"app-plus"->“distribute”->"ios"节点下添加urltypes数据:

"urltypes": [{"urlidentifier": "xxx.xxx", //  一般为域名倒写，例如 taobao.com"urlschemes": ["nameAPP"]}]，"urlschemewhitelist":["nameAPP"]     //白名单

注意

下面代码的 nameAPP:// 就是代表着schemes/Universal Link 通用链接，也就是跳到自己app 的快捷链接如果链接需要带参数的话redxiang://params ,这里的我写的是没带参数的，我只做了微信浏览器的判断,因为微信直接打开的h5链接是不能直接换起app的，需要在微信开放平台配置相关参数**(偷个懒直接让它跳到应用市场)。目前直接获取当前手机是android还是ios

微信开放标签文档

<view class="sign-box" @click="myplayUser">立即下载
</view>

data() {return {timer:null,opening:null,}},

这里做了监听visibilitychange事件是浏览器新添加的一个事件，当浏览器的某个标签页切换到后台，或从后台切换到前台时就会触发该消息，简单说相当于onhide

 watch: {'opening': {handler: function(newVal, oldVal) {if(newVal == false){document.addEventListener("visibilitychange",()=> {if (this.timer) {// this.opening = falseclearTimeout(this.timer)}}, false);}},immediate:true}},

写好了之后记得需要打包自定义基座测试

也是第一次写，还是看到一个大佬的文章写的

myplayUser(){//判断是否微信登陆 是的话直接跳到应用市场var u = navigator.userAgent;var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内if(isWeixin>-1){if (uni.getSystemInfoSync().platform == 'android') {window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=xxxxxxxxxxx'}else if (uni.getSystemInfoSync().platform == 'ios'){window.location = 'https://apps.apple.com/cn/app/idxxxxxxx'}return false}//若在其他浏览器 uni.showLoading({title:'跳转中...'})let that = thisthat.opening = trueif (uni.getSystemInfoSync().platform == 'android') { //  安卓处理let ifr = document.createElement('iframe');ifr.src = "nameAPP://";  //配置的app 链接"schemes" :  ["nameAPP"]ifr.style.display = 'none';document.body.appendChild(ifr); //如果可以已经安装就可以直接打开了that.timer = window.setTimeout(function () {  //  未安装的情况that.opening = falsedocument.body.removeChild(ifr);//  提示下载uni.hideLoading()let r = confirm("未安装APP? 是否下载")if (r) {window.location = 'https://a.app.qq.com/o/simple.jsp?pkgname=uni.zxxxxxxx'}}, 4000)} else {  //  IOS处理window.location = "nameAPP://"    //如果可以已经安装就可以直接打开了that.timer = setTimeout(function () { //  未安装的情况。that.opening = false//  跳转app storeuni.hideLoading()let r = confirm("未安装APP? 是否去App store查看")if (r) {window.location = 'https://apps.apple.com/cn/app/idxxxxxxx'}}, 4000);}},

uniapp h5在浏览器唤起app相关推荐

H5 如何实现唤起 APP
前言写过hybrid的同学,想必都会遇到这样的需求,如果用户安装了自己的APP,就打开APP或跳转到APP内某个页面,如果没安装则引导用户到对应页面或应用商店下载.这里就涉及到了H5与Native之 ...
uniapp实现被浏览器唤起
1,配置UrlSchemes 在manifest.json配置 /* 应用发布信息 */ "distribute" : {/* android打包配置 */"androi ...
H5 如何实现唤起 APP兼容版
在移动端开发中,H5页面唤起本地APP是一个非常常见的需求.本文将介绍如何在H5页面中实现唤起本地APP的具体操作. 常见的唤起APP方式 URL Scheme URL Scheme是一种特殊的URL ...
H5手机浏览器唤起微信实现分享
最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis,share分享这种的点击出来二维码.在网上看了很多,都说APP能唤起微信,手机网页实现不了.也找了很多都不能直接唤起微信 ...
H5外部浏览器唤起微信分享
最近在做一个手机站,要求点击分享可以直接打开微信分享出去.而不是jiathis,share分享这种的点击出来二维码.在网上看了很多,都说APP能唤起微信,手机网页实现不了.也找了很多都不能直接唤起微信 ...
uni-app h5修改浏览器导航栏的 title以及icon
1.title 在pages.json文件中修改:"navigationBarTitleText":"uni-app" 2.icon的修改 2.1 在stati ...
uni-app h5微信浏览器预览和下载pdf
预览offce文件.可以打开 PDF WORD PPT EXCEL 文件 - DCloud 插件市场一.预览pdf 预览本来使用的是uni-app插件市场的插件,但是这里会使用到插件开发 ...
前端小程序，h5，浏览器，app, doc，.docx，.ofd，.PDF，.WPS以及Office文档的在线解析预览方式
在线预览是将Word.PPT.Excel.PDF.OFD.音视频等文件在浏览器中解析查看. 我使用的是usdoc,也有用office online进行在线预览,不过注意的是使用usdoc的时候,我们先 ...
uniapp h5修改浏览器导航栏的 title
方法1 uni.setNavigationBarTitle({title:"我的"}); 方法2 在pages.json 里面的设置整个项目的title "global ...

uniapp h5在浏览器唤起app

需求

配置

注意

写好了之后记得需要打包自定义基座测试

uniapp h5在浏览器唤起app相关推荐

最新文章

热门文章