关于Scheme的介绍

使用场景

在移动端web页面上,点击按钮直接打开手机端app,如果调用失败则前往对应app的应用市场.

实现方法

H5唤醒APP，需要使用 scheme协议 (有app端提供)，但此协议在微信内置浏览器中是无法调用的，微信现在可以通过微信开放标签实现，所有在开始需要判断设备的环境和浏览器环境，如果是安卓或者IOS，在执行scheme协议。

下面代码以实现唤醒淘宝为例

<template>
    <div>
        <button @click="satrtApp">打开淘宝APP</button>
    </div>
</template>
<script>
    export default {
        name:"demo",
        data(){
            return{
                
            }
        },
        methods:{
            startApp(){
                  var u = navigator.userAgent;
                var isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1; // 微信内
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                 if (isWeixin) {
                  alert('请在浏览器上打开')
                } else {
                  //android端
                  if (isAndroid) {
                    //安卓app的scheme协议
                    window.location.href = 'tbopen://m.taobao.com/tbopen/index.html?h5Url=这里放具体的地址';
                    setTimeout(function () {
                      let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
                      if (typeof hidden == "undefined" || hidden == false) {
                        //应用宝下载地址
                        window.location.href = "https://a.app.qq.com/o/simple.jsp?pkgname=com.taobao.taobao&g_f=1000047";
                      }
                    }, 2000);
                  }
                  //ios端
                  if (isIOS) {
                    //ios的scheme协议
                    window.location.href = 'taobao://s.taobao.com?id=商品id'
                    setTimeout(function () {
                      let hidden = window.document.hidden || window.document.mozHidden || window.document.msHidden || window.document.webkitHidden
                      if (typeof hidden == "undefined" || hidden == false) {
                        //App store下载地址
                        window.location.href = "http://itunes.apple.com/app/id387682726";
                      }
                    }, 2000);
                  }
                }
            }
        }
    }
</script>

总结一下大厂APP的scheme协议

应用类

更多应用类scheme

系统类