浏览器扫码启动APP跳转到对应的界面 （H5端 唤起APP）uni-app

html 代码如下

1.先建立一个indexScan.html 界面把下面的代码赋值进去，然后发布到服务器

2.把这个链接生成一个二维码

3.使用浏览器扫码功能打开这个界面，就可以启动（唤起）APP

4.APP端加上下面代码（uni-app端）要使用自定义基座打包后才可以测试这个功能（如下面：uni-app端）

界面有两个按钮，因为有些浏览器不会自动跳转，需要手动点击

  <div class="btn" style="margin-top: 20px;"  @click="handleBtnDlown">立即下载APP</div>
            <div class="btn" style="background-color: #4d9ae7;margin-top: 20px;" @click="clickOpen">直接打开APP</div>

js部分：

<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: {
            show:false,
            sno:'',
            ramdom:'',
        },
        created() {
            this.ramdom =  Math.random().toString(36).substr(2, 10);
            // alert('打开App')
            var params = new URLSearchParams(window.location.search);
            var sno = params.get("sno");
            this.sno = sno //扫码带入参数
            console.log('this.$route.query',sno)
            
            if (browser.versions.weixin) { //在微信浏览器打开，提示用户用浏览器打开
                console.log('请使用浏览器打开')
                this.show = true;
                return;
            }
            
            if (browser.versions.android) {
                // 配置的schemes后加://应该是固定写法，再后面的内容为参数
                // 传如参数tpm://pages/EquipmentInfoUpdate/EquipmentInfoUpdate 跳转到指定界面，我的界面是在APP写死路径，所以我只传了一个sno
                window.location.href = "yustartpm://"+sno  //manifest.json配置的schemes
               
            }
             
             if(browser.versions.ios){
                 alert("IOS 系统努力开发中~耐心等待~");
                // window.location.href = "http://xxx/xxxx.apk"; 
                console.log('ios 开发中')
            }
        },
        methods: {
            clickOpen(){
                if (browser.versions.android) {
                
                   window.location.href = "tpm://"+this.sno //manifest.json配置的schemes名字：tpm
                }else if(browser.versions.ios){
                     alert("IOS 系统努力开发中~耐心等待~");
                }
                
            },
            // 下载app
            handleBtnDlown() {
                if (browser.versions.android) {
                    window.location.href = "http://xxx/xxx.apk"; // 应用市场对应的包名
                }else if(browser.versions.ios){
                     alert("IOS 系统努力开发中~耐心等待~");
                }
            }
        },
    })
</script>

uni-app端

1.安卓端要在

2.接收参数

注意要写绝对路径，如果从参数获取到URL且APP是启动状态会自动拼接当前界面URL，导致无法跳转，直接进入fail