preface

Requirement scenario: Open labels provided by wechat can be used by developers to switch from h5 web pages to wechat applet pages.

steps

1. Bind the domain name

Log in to the wechat public platform and set the JS interface security domain name.

2. Introduce JS files (version 1.6.0)

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

3. Verify the configuration through the config interface injection permission and apply for the required open label

Wx. config({debug: true, // Enable the debug mode, the return value of all API calls will be displayed in the client alert, if you want to view the passed parameter, you can open it in the PC, the parameter information will be printed in the log, only in the PC will print the appId: Timestamp:,// Required, generated signature nonceStr: ",// Required, generated signature random string jsApiList: ",// Required, generated signature jsApiList: OpenTagList: ['wx-open-launch-app'] // Optional, list of open labels to use, e.g. ['wx-open-launch-app']});Copy the code

4. Open labels

The official demo

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index? user=123&action=abc" > <template> <style>.btn { padding: </style> <button class=" appellate "> </button> </template> </ wX-open-launch-appellate >Copy the code

Pay attention to

  • pathPath must contain.html(official not stated)
  • The official explanation, forVueSuch view frames in order to avoidtemplateTag conflict issues can be used<script type="text/wxtag-template"><script>To wrap slot templates and styles instead.

Rewrite the demo

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html? User =123&action= ABC "> <script type="text/wxtag-template"> <div class=" BTN "> </wx-open-launch-weapp> })Copy the code

Custom style issues

I introduced styles in the open label, but it didn’t work, so I figured out how to position it and set transparency to 0.

# launch - BTN {width: 8.9333 rem; Height: 4.56 rem; position: absolute; top:0; left:0; right:0; bottom:0; opacity: 0; }Copy the code

That is, the use of positioning, found that the style can not be supported, and finally used the most old-fashioned way, with text support.

<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html? User =123&action= ABC "> <script type="text/wxtag-template"> <div class=" BTN "> </script> </wx-open-launch-weapp> })Copy the code

conclusion

  1. The security domain name of the JS interface needs to be configured
  2. JSSDK version 1.6.0
  3. Path requires.html
  4. Custom style problem, here using positioning method, and text to spread height

Reference documentation

Wechat H5 page jump small program

H5 jump small program click button various style injection can not support the problem

Official documents of wechat applets