uniapp利用scheme启动App_uniapp scheme

作者：繁依Fanyi0 | 2024-03-21 11:54:49

踩

uniapp scheme

一、说明

二、实现步骤

三、扩展及相关链接

一，说明

需求方说明要在用户点击链接后判断用户是否下载该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.com/store/apps/details?id=xxx";// 应用市场对应的包名
                }
            }
        },
    })
</script>
 
</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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/281059