background

In business requirements, there are often pages for users to share in wechat. Other users open H5 in wechat and click the corresponding button. At this time, if the user has App installed in the phone, the App will be directly evoked and the corresponding page will be automatically redirected

Here you need to access the < wX-open-launch-app > tag in wechat open TAB to pass extinfo to the client to specify the corresponding page

Please refer to the official documentation: Open Label Instructions, which will not be described here

However, except for the access steps, the information of relevant matters needing attention in the document is very meager, so I will explain the pits one by one (they are all small points for attention, but it may take some time to find out the reason).

wx.config

First of all, it is consistent with using jS-SDK. Jweixin. JS needs to be introduced first, and then wx.config is used for configuration and application

One caveat here is that even if you only need to introduce open tags without using any JsApi, you need to pass at least one entry to jsApiList, not an empty array, as in

wx.config({
    ...
    jsApiList: ['onMenuShareWeibo'].openTagList: ['wx-open-launch-app']})Copy the code

Otherwise, iOS configuration will be no problem, but Android can not be successfully configured, triggering wx.error (the worst is that there is no problem on the developer tool, it will be found when the real machine verification, and the content of error output is irrelevant)

The label reference

The following is an example of a reference in the official documentation

<wx-open-launch-app xx='xx'>
    <template>
        <style>.btn { padding: 12px }</style>
        <button class="btn">Within the App to view</button>
    </template>
</wx-open-launch-app>
Copy the code

React cannot use the

And styles in

So an accurate example would be the following

// @ts-ignore
<wx-open-launch-app xx='xx'>
  <script type='text/wxtag-template'>
    <style>{'.btn { padding: 12px }'}</style>
    <button class='btn' style={{... }}>Within the App to view</button>
  </script>
{/* @ts-ignore */}
</wx-open-launch-app>
Copy the code

Style to write

External styles do not affect the style of the elements inside the tag.

You cannot write units using VW or vH, so you need getPx conversion

The parent element of < wX-open-launch-app > cannot be a Flex layout, otherwise it will be squeezed to a width near zero

Tag attributes

appid

Appid is the appID of the associated application configured in the wechat public platform (note that it is not the appID of the public account).

When “launch:fail_check fail” fails, there are two possibilities to check

  • Whether the appId mentioned above is accurate
  • Is the public Id of appId configured in wx.config accurate? (There are two public ids in the business, public Id A is used by default, but the background is configured with public Id B at that time, so I was wasted A long time by this error.)
extinfo

Extinfo contains the most important information, which is the corresponding path information to give the client to jump to

The format is a string, so if the convention data is an object, don’t forget to parse json.stringify first to the client

Error message acquisition

The documentation says that the return value of the error event is {errMsg: string}, but it should actually be {detail: string}, i.e

btn.addEventListener('error'.function (e) {
  console.log('fail', e.detail);
});
Copy the code

Out to deal with

Arouse the failure

The user may not have the corresponding App installed in the phone, or other situations where the App will not be successfully invoked

Wx. error and

binding error events need to be handled in the bottom, For example, adjust the original process of jumping to AppStore/AppStore, etc. (wx.error refers to the processing of configuration failure caused by wechat version or system version too low, and the error of open label refers to the processing of application not installed yet)

Initialization is not complete

The button will not be displayed (only shown as a small white circle 👇) until the wechat open label initialization is complete (usually within 1s).

Therefore, one more loading state button can be displayed and replaced after the ready event of the open label is triggered