H5 page in wechat evokes applet & app

Wechat open label is an extended tag collection provided by wechat public platform for web developers . By using wechat to open the label , The ability of web developers to use wechat or the system safely and conveniently , Provide better web experience for wechat users . This document is for web developers , Introduce how to use wechat open label and related precautions . It should be noted that , Wechat open label has the minimum wechat version requirements , And the minimum system version requirements . The version of wechat is required to be ：7.0.12 And above . The system version is required to be ：iOS 10.3 And above 、Android 5.0 And above .

Open label usage steps

1. Bind domain name

Log into wechat public platform “ Setting of public number ” Of “ Feature set ” Fill in “JS Interface security domain name ”, JS The interface security domain name corresponds to H5 Page domain name address

2. introduce JS file

Call when needed JS The interface page is introduced as follows JS file ：

http://res.wx.qq.com/open/js/jweixin-1.6.0.js （ Support https）

     

      
1.
     

Also support npm Package mode introduction , Version required 1.6.0 And above

npm install weixin-js-sdk --save

     

      
1.
     

3. adopt config The interface injects the permission verification configuration and applies for the required open label

And use JS-SDK The configuration is the same , All pages that need to use open tags must first inject configuration information , And pass openTagList Open label required for field application , Otherwise it won't work （ The same url Just one call ）.

wx.config({
  debug: true, //  Turn on debugging mode , Call all api The return value of will be on the client side alert come out , To see the parameters passed in , Can be in pc End open , The parameter information will go through log play , Only in pc Only when the end is printed 
  appId: '', //  Required , The only sign of official account number 
  timestamp: , //  Required , Generate signature timestamp 
  nonceStr: '', //  Required , Generate a random string of signatures 
  signature: '',//  Required , Signature 
  jsApiList: [], //  Required , Required JS Interface list 
  openTagList: [] //  Optional , List of open tags to use , for example ['wx-open-launch-app']
});

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
     

4. Page evokes applet code

<wx-open-launch-weapp id="launch-btn" username="gh_XXXXX" weappid="wxd44d0XXX0f0dXXX" path="/pages/page/page.html?id=aaa" >
    <script type="text/wxtag-template"> <!--html Page display code --> </script>
</wx-open-launch-weapp>

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
     

5. The page evokes App Code

    <wx-open-launch-app @launch="launch" @error="launchError" id="launch-btn" appid=" application APP Of Appid" extinfo=" Pass to APP Parameters of （ Can be used to open app The follow-up logic of ）" >
         <script type="text/wxtag-template"> <!--html Page display code --> </script>
    </wx-open-launch-app>

     

      
1.
      
2.
      
3.
      
4.
      
5.
      
6.
      
7.
      
8.
      
9.
      
10.
      
11.
     

Be careful

1. The open object of this function

Certified service number , Service number binding “JS Interface security domain name ” You can use this tag to jump to any legal and compliant applet .
Authenticated non personal subject applet , The static website developed by using small program cloud hosts the webpage under the bound domain name , You can use this tag to jump to any legal and compliant applet .

2. Parameter description

username Required jump The applet is original id, That is, the applet corresponding to gh_ At the beginning id, Attention is not official account. id
about path attribute , The declared page path must be added with .html suffix , Such as pages/home/index.html
If the jump prompt is missing ID, Check username Corresponding to the original ID Whether it is right

3. Vue An error will be reported in the project. The tag does not exist

stay main.js Add ignore code to the file , Ignore the components that open wechat applets

Vue.config.ignoredElements = ['wx-open-launch-weapp']

     

      
1.
     

Reference resources

  Open label documentation