H5唤醒APP客户端

在开发微信公众号项目时，分享页面用户报名参加活动，这个活动流程要在app上完成，活动页面点击报名，需要检测用户手机是否安装app，没有安装引导用户去下载，若安装app，则唤醒打开app。

由于微信底层禁止非腾讯系软件通过H5直接跳转app，在微信中打开就显示点击右上角-选择在浏览器中打开的图片, 然后在浏览器中直接跳转打开app, 跳到app对应的页面。

这边使用的是callapp-lib来唤醒，callapp-lib 是一个 H5 唤起app的解决方案，能够满足大部分唤起客户端的场景，也预留了扩展口，帮你实现一些定制化的功能。

1）安装
npm install --save callapp-lib

2）引用
import CallApp from 'callapp-lib';

3）测试

<template>
  <div class="rouse-test">
    <div id='call-button' class="call-button" @click="openApp">点击唤起App</div>
  </div>
</template>

<script>
  import CallApp from 'callapp-lib';

  export default {
    name: "rouseTest",
    methods: {
      openApp() {
        const options = {
          scheme: {
            protocol: 'shandwtolp'//APP 协议，URL Scheme 的 scheme 字段，就是你要打开的 APP 的标识
          },
          appstore: '',//填写appstore的下载地址
          yingyongbao: '',//填写应用宝的下载地址
          fallback: '',//填写唤端失败后跳转的地址
          timeout: 3000,
        };
        const callLib = new CallApp(options);

        callLib.open({
          param: '',
          path: {"name": 'Jello'}
        });

        console.log(callLib.generateScheme({path: 'test', param: {"name": 'Jello'}}));
      }
    }
  }
</script>

<style scoped>

  .rouse-test {
    display: flex;
    justify-content: center;
  }

  .rouse-test .call-button {
    width: 50%;
    margin-top: 0.667rem;
    text-align: center;
    padding: 0.267rem;
    border: 0.013rem solid #666;
    color: #333;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

</style>

URL Scheme的scheme字段需要IOS/Android端提供，这边仅供参考

安卓配置

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />

    <data
        android:scheme="shandwtolp" />
</intent-filter>