When developing WeChat public number project, share page users sign up to participate in the activity. The activity flow is to be completed on app, and the activity page is clicked to sign up. It needs to check whether the user's mobile phone is installed app, and does not install the guide user to download. If app is installed, the app will be awakened.

Because the bottom layer of wechat forbids non Tencent software to jump to the app directly through H5, when it is opened in wechat, it will display the top right corner - select the picture opened in the browser, then directly jump to open the app in the browser, and jump to the page corresponding to the app.

Callapp lib is used here to wake up. Callapp lib is an H5 evocative app solution, which can meet most of the evocative client scenarios. It also reserves an extension port to help you realize some customized functions.

1) installation
npm install --save callapp-lib

2) citation
import CallApp from 'callapp-lib';

3) test

<template>
  <div class="rouse-test">
    <div id='call-button' class="call-button" @click="openApp">Click to evoke App</div>
  </div>
</template>

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

  export default {
    name: "rouseTest",
    methods: {
      openApp() {
        const options = {
          scheme: {
            protocol: 'shandwtolp'//APP protocol. The scheme field of URL Scheme is the identification of the APP you want to open
          },
          appstore: '',//Fill in the download address of appstore
          yingyongbao: '',//Fill in the download address of Alipay
          fallback: '',//Fill in the address to jump after calling end failure
          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>

The scheme field of the URL Scheme needs to be provided by IOS/Android. This is for reference only

• Android configuration

<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>

• IOS configuration

4) operation effect

Detailed parameter configuration view: https://github.com/suanmei/ca...