If I am tired of WX-open-launch-syndrome, I will try to get to the point.

Ps: No further details, baidu, there are many cases

  1. Jweixin.js is introduced, requiring version 1.6.0

Res2.wx.qq.com/open/js/jwe…

  1. Set the wx. Config

JsApiList :[‘chooseImage’, ‘previewImage’] [‘ appappellate ‘]

  1. Wx-open-launch-pervasive P tag detection is ignored in VUE

In the main. Js add: Vue. Config. IgnoredElements = [‘ wx – open – launch – weapp ‘]

  1. Add the WX-open-launch-retry P tag to the VUE page

On the View page of vue:

<wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxxx"
      path="pages/order-tab/order-tab.html"
      @launch="sucFun"
      @error="errFun"
    >
      <script type="text/wxtag-template">
        <style>.guideBtn{width: 347px;
          height: 50px;
          background-color: #ff6611;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          line-height: 50px;
          text-align: center; }</style>
        <div class="guideBtn">Go to register</div>
      </script>
</wx-open-launch-weapp>
Copy the code

In VUE’s methods:

sucFun(msg) { console.log(msg) },
errFun(msg) { console.log(msg) }
Copy the code

Alternatively, you can use V-HTML to unbind in VUE, for example:

In the VUE view:

<div id="wxLaunchBox" v-html="weappDom"></div>
Copy the code

In vue script (which can be placed in created) :

this.weappDom = `
    <wx-open-launch-weapp
      id="launch-btn"
      username="gh_xxxxxx"
      path="pages/order-tab/order-tab.html"
      @launch="sucFun"
      @error="errFun"
    >
      <script type="text/wxtag-template">
        <style>.guideBtn{width: 347px;
          height: 50px;
          background-color: #ff6611;
          border-radius: 2px;
          color: #fff;
          font-size: 16px;
          line-height: 50px;
          text-align: center; }</style>
        <div class="guideBtn">Go to register</div>
      </script>
    </wx-open-launch-weapp>
    `
Copy the code

Note: Position :fixed, position:absoulte cannot be added to the wrap style using
, otherwise the button will not be displayed

  1. The environment

Wechat development tools and the real machine test results may be different, be sure to use the real machine test android and ios test results may be different, to test

  1. Web-view does not support WX-open-launch-appeet

Therefore, if YOU use WX-open-launch-appellate IN h5, this function will be disabled and the button will not be displayed if YOU add THE H5 appellate into B through webview

In this case, long press to identify the small program code! – the system comes with a long-press recognition feature – the official specs don’t say it’s supported, but it does work.

If you can’t use the img plugin directly, you can use the image preview function provided by the official documentation.

wx.previewImage({
    current: ' '.// HTTP link for the current image (note: it is online, not local)
    urls: [] // List of HTTP links for images to preview (note: online links, not local)
});
Copy the code

After clicking, a preview of the small program code or two-dimensional code interface appears, and then long press to identify

If that still doesn’t work, change the requirements or interaction. Anyhow, everybody thinks a way ðŸĪŠ

Ps: try your best to let everyone walk less pit, other pit we slowly step on 🐷. To tell the truth, wechat related development is really pit, and it is not friendly 😭😭😭 (pain three even ~~~)