uniapp利用scheme启动App

最新推荐文章于 2024-09-12 14:33:57 发布

Mitin_

最新推荐文章于 2024-09-12 14:33:57 发布

阅读量3.3k

点赞数 1

文章标签： uni-app

原文链接：https://blog.csdn.net/sunhuaqiang1/article/details/124992935

版权

一、说明

二、实现步骤

三、扩展及相关链接

一，说明

需求方说明要在用户点击链接后判断用户是否下载该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>