前言

今日接到一个开发需求，app以及H5增加支付宝登录功能。增加支付宝登录那么移动端势必需要唤起支付包APP，那就需URLScheme方式唤醒支付宝APP并完成登录再返回app或H5

实现

首先需要对app进行配置URLScheme

对于IOS配置打包

配置路径manifest->app-plus->distribute->ios
注意不要使用大写及中文以及特殊字符等

"urltypes" : [
                    {
                        "urlidentifier" : "com.runtest.test",
                        "urlschemes" : [ "runtest" ]
                    }
                ]

配置好后需要打包才能生效，在另一个页面访问runtest://即可唤起应用

安卓打包路径

配置路径manifest->app-plus->distr

完整代码如下

<template>
        <view class="btnWrap">
            <view class="btn" @click="handleBtnDlown">立即下载</view>
        </view>
    </view>
</template>

<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()
    };
    export default {
        data() {
            return {}
        },
        onLoad() {
            //页面初始化进入app，进不去就说明没安装app，然后可以点击下载去应用市场去下载
            if (browser.versions.ios) {
                window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxx";
            } else if (browser.versions.android) {
                window.location.href = "test://";  //manifest.json配置的schemes
            }
    },
        methods: {
            // 下载app
            handleBtnDlown() {
                 if (browser.versions.android) {
                    window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=xxx;
                }
            }
        }
    }
</script>