admin管理员组文章数量:1530085
目录
一、说明
二、实现步骤
三、扩展及相关链接
一，说明
需求方说明要在用户点击链接后判断用户是否下载该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 = axios
var app = new Vue({
el: '#app',
data: {},
created() {
if (browser.versions.android) {
// 配置的schemes后加://应该是固定写法，再后面的内容为参数
window.location.href = "test://3"; //manifest.json配置的schemes
}
},
methods: {
// 下载app
handleBtnDlown() {
if (browser.versions.android) {
window.location.href = "https://play.google/store/apps/details?id=xxx";// 应用市场对应的包名
}
}
},
})
</script>
</html>三、扩展及相关链接
1，uniapp安卓设置：https://uniapp.dcloud/tutorial/app-android-schemes.htmlscheme：https://uniapp.dcloud/tutorial/app-android-schemes.htmlhttps://uniapp.dcloud/tutorial/app-android-schemes.html
2，deeplink相关服务Xinstall相关文档：DCloud接入 · XInstallhttps://www.xinstall/doc/Dcloud/DcloudGuide.html
3，Xinstall的uniapp插件：Xinstall-推广赋能专家 - DCloud 插件市场 免填写邀请码渠道统计，用户来源追溯，一键拉起/闪装，携带参数安装，增加客户转化，清楚投放效果https://ext.dcloud/plugin?id=37014，安卓原生开发谷歌deeplink文档：https://developer.android/guide/navigation/navigation-deep-link?hl=zh-cnhttps://developer.android/guide/navigation/navigation-deep-link?hl=zh-cn
本文参考文章为以下文章，文章为注明不可转载，如有需求请联系本人进行删除，更多详情请查看该链接：跨平台应用开发进阶(十六) ：uni-app实现URLScheme方式唤醒APP_No Silver Bullet的博客-CSDN博客_uniapp唤起app
版权声明：本文标题：uniapp利用scheme启动App 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1725440920a1023553.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论