Jump to the pit course of APP using wX-open-launch-app

preface

Record my experience of using WX-open-launch-app to jump to the pit, so that I can refer to it in the future. Everyone’s experience is different, so share it for everyone’s reference only. Android version: 11 wechat version: 8.0.10

The preparatory work

1. An authenticated service number

In the upper right corner of the official account, you can check whether you are authenticated or not. However, it is not that our account has not been authenticated successfully, because there are two words in our name: video, so its status shows that it is not authenticated. In fact, it has been authenticated. Ask the person in charge if you are unsure.

2. Authenticated open platform account

You can check whether the account is authenticated in the account center

3. The service number and open platform account must be the same subject

Service numbers can view subjects in the public account Settings, and open platform accounts can view subjects in the account center

4. Open platform binding service number

View it in the admin/public account of the open platform

5. Open platform Service Number Set web page hopping mobile application association

On the open platformManagement center/The public accountsClick view to operate



JS interface security domain name in the service numberPublic account setting/function settingIn the

Mobile app Appid on open platformManagement center/Mobile shouldIn use, according to their own application to choose

As an extra point about appids, each mobile app bundled with the open platform has an AppID (we’ll call it the mobile AppID for the sake of the description) and then an AppID (we’ll call it the developer ID) for the service number. Don’t confuse the two ！！！！ That’s what HAPPENED to me…

6. Ensure that the secure domain name is bound to only one mobile application

To get the signature

The part of obtaining the signature is done by the colleague in the lower section. The reason is simple, because the IP to obtain the access_token must be added to the IP whitelist of the service number, and our local IP is not fixed. The official documentation for this section is detailed. Call this interface and we get the following parameters: appId, TIMESTAMP, nonceStr, signature

The config configuration

1. Introduction of js file – res.wx.qq.com/open/js/jwe… (HTTPS is supported)
2. Setting the Config

wx.config({
  debug: true.// If debug mode is enabled, the return values of all API calls will be displayed on the client side. To view the passed parameters, you can open it on the PC side
  appId: ' '.// Mandatory, developer ID
  timestamp:,// Mandatory to generate the timestamp of the signature
  nonceStr: ' '.// Mandatory to generate a random string of signatures
  signature: ' '.// Mandatory, signature
  jsApiList: ["onMenuShareAppMessage"].// Mandatory, a list of JS interfaces that need to be used
  openTagList: ['wx-open-launch-app'] // Optional list of open labels to use
});
Copy the code

Complete sample

// appID is the application ID! Application ID! Application ID!!<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
  <! -- template is mandatory -->
  <template>
    <button>Within the App to view</button>
  </template>
</wx-open-launch-app>

<script>
  wx.config({
    debug: true.// If debug mode is enabled, the return values of all API calls will be displayed on the client side. To view the passed parameters, you can open it on the PC side
    appId: ' '.// Mandatory, developer ID
    timestamp:,// Mandatory to generate the timestamp of the signature
    nonceStr: ' '.// Mandatory to generate a random string of signatures
    signature: ' '.// Mandatory, signature
    jsApiList: ["onMenuShareAppMessage"].// Mandatory, a list of JS interfaces to be used
    openTagList: ['wx-open-launch-app'] // Optional list of open labels to use
  });
  wx.ready(() = > {
      console.log("ready")
  })
  wx.error(() = > {
    console.log("error")})var btn = document.getElementById('openApp');
  btn.addEventListener('launch'.() = > {
    console.log('success');
  });
  btn.addEventListener('error'.(e) = > {
    console.log('fail', e.detail);
  });
</script>
Copy the code

One thing to note about extInfo is that we should use a custom scheme, otherwise we’ll have a browser selection process when we open our App. At this point, all the front-end work is done except for the styling. If the debugging page is displayed, {“errMsg”:”config: OK “} indicates that the debugging page is normal

Failed to wake up the App

When we were ready to call up our app, it didn’t work!! The problem you encounter might look something like this

1. IOS can successfully evoke, Android can’t
2. When Android is running in the background, the app can be successfully evoked, but when the app process is terminated, the app cannot be evoked
3. When Android invokes the app, there is a mask that makes it impossible to click

It is most likely that the SDK has some problems with the access configuration of Android and IOS. Ask relevant colleagues to deal with them. Please refer to the following documents: IOS Access Guide Android Access Guide Of course you can also find answers in the wechat open community

The style is set

1. wx-open-launch-appThis tag can add a style style
2. wx-open-launch-appTag external and internal styles are isolated

<wx-open-launch-app id="openApp" appid="wxf192a1452e01ee9c">
  <template>
    <! External styles cannot be applied to template
    <style>
      .btn{
        padding: 100px;
      }
    </style>
    <button class="btn">Within the App to view</button>
  </template>
</wx-open-launch-app>
Copy the code