uniapp利用scheme启动App

一、说明

二、实现步骤

三、扩展及相关链接

一，说明

需求方说明要在用户点击链接后判断用户是否下载该APP，如果已经安装就打开APP并跳转到某个对应页面，如果没有下载就跳转应用商店下载后打开且跳转到对应页面

注意：安装后打开且跳转到对应页面这异步无法使用此方法实现，目前还在摸索中...

二、实现步骤

1.基本配置

在 “App常用其它设置” -> “Android设置” -> “UrlSchemes” 项中进行设置：

或者可以直接到源码视图下的 "app-plus"->"distribute"->"android" 节点的 schemes 属性配置UrlSchemes，示例如下：

"app-plus" : /* 应用发布信息 */"distribute" : {/* android打包配置 */"android" : {"schemes" : "test"},
//以下省略......

2.制作对应H5页面

使用独立的H5页面进行判断，如果安装了打开此H5链接会出现跳转到对应的APP按钮，如果没有安装，可以点击H5页面中的下载跳转到应用市场

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.btnWrap {width: 100%;height: 500px;}.btn {width: 100px;height: 40px;line-height: 40px;text-align: center;border-radius: 10px;padding: 0;margin: 0 auto;background-color: #afe;font-weight: 800;margin-top: 200px;}
</style><body><div id="app"><div class="btnWrap"><div class="btn" @click="handleBtnDlown">立即下载</div></div></div></body>
<script>//  兼容var browser = {versions: function () {var u = navigator.userAgent,app = navigator.appVersion;return {trident: u.indexOf('Trident') > -1,/*IE内核*/presto: u.indexOf('Presto') > -1,/*opera内核*/webKit: u.indexOf('AppleWebKit') > -1,/*苹果、谷歌内核*/gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,/*火狐内核*/mobile: !!u.match(/AppleWebKit.*Mobile.*/),/*是否为移动终端*/ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),/*ios终端*/android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,/*android终端或者uc浏览器*/iPhone: u.indexOf('iPhone') > -1,/*是否为iPhone或者QQHD浏览器*/iPad: u.indexOf('iPad') > -1,/*是否iPad*/webApp: u.indexOf('Safari') == -1,/*是否web应该程序，没有头部与底部*/souyue: u.indexOf('souyue') > -1,superapp: u.indexOf('superapp') > -1,weixin: u.toLowerCase().indexOf('micromessenger') > -1,Safari: u.indexOf('Safari') > -1};}(),language: (navigator.browserLanguage || navigator.language).toLowerCase()};Vue.prototype.$http = axiosvar app = new Vue({el: '#app',data: {},created() {if (browser.versions.android) {// 配置的schemes后加://应该是固定写法，再后面的内容为参数window.location.href = "test://3"; //manifest.json配置的schemes}},methods: {// 下载apphandleBtnDlown() {if (browser.versions.android) {window.location.href = "https://play.google.com/store/apps/details?id=xxx";// 应用市场对应的包名}}},})
</script></html>

三、扩展及相关链接

1，uniapp安卓设置：https://uniapp.dcloud.net.cn/tutorial/app-android-schemes.htmlscheme：https://uniapp.dcloud.net.cn/tutorial/app-android-schemes.htmlhttps://uniapp.dcloud.net.cn/tutorial/app-android-schemes.html

2，deeplink相关服务Xinstall相关文档：DCloud接入 · XInstallhttps://www.xinstall.com/doc/Dcloud/DcloudGuide.html

3，Xinstall的uniapp插件：Xinstall-推广赋能专家 - DCloud 插件市场免填写邀请码渠道统计，用户来源追溯，一键拉起/闪装，携带参数安装，增加客户转化，清楚投放效果https://ext.dcloud.net.cn/plugin?id=37014，安卓原生开发谷歌deeplink文档：https://developer.android.com/guide/navigation/navigation-deep-link?hl=zh-cnhttps://developer.android.com/guide/navigation/navigation-deep-link?hl=zh-cn

本文参考文章为以下文章，文章为注明不可转载，如有需求请联系本人进行删除，更多详情请查看该链接：跨平台应用开发进阶(十六) ：uni-app实现URLScheme方式唤醒APP_No Silver Bullet的博客-CSDN博客_uniapp唤起app