Wechat open label to achieve wechat browser H5 page evoke wechat small program or APP, DEMO page links, wechat open label official documents

Matters needing attention

  • Wechat open labels have minimum requirements for wechat version and minimum requirements for system version. Wechat version requirements: 7.0.12 or later. The system version must be iOS 10.3 or later, and Android 5.0 or later.

Open label usage steps

The procedure of using wechat open label is similar to that of wechat JS-SDK, which also requires the introduction of JS files and other steps. If it is the public identity of the web page, need to bind the secure domain name, if it is the use of small program cloud development static website hosting small program web page, do not need to bind the secure domain name can be directly used (that is, skip the following “step 1: bind the secure domain name”).

Step 1: Bind the domain name

Log in to the wechat public platform, enter the “function Setting” of “public Account Setting”, and fill in the “JS interface security domain name”.

Step 2: Import the JS file

Need to call in JS interface pages to introduce the following JS file: res.wx.qq.com/open/js/jwe… (HTTPS is supported)

For further improve service stability, when the resource is inaccessible, can change access: res2.wx.qq.com/open/js/jwe… (HTTPS is supported)

Note: The AMD/CMD standard module loading method is supported.

Step 3: Verify the configuration through the Config interface injection permission and apply for the required open label

In the same way as using JS-SDK configuration, all pages that need to use open labels must first inject configuration information and apply for the required open labels through the openTagList field, otherwise they will not be used (the same URL only needs to be called once). Open label application and JS interface application are independent of each other, so they can be applied at the same time.

After obtaining the relevant appId and wechat signature, verify the configuration through the config interface injection permission

  • The ready interface can be used to verify success and the error interface can be used to verify failure

    Window.wx. config({debug: true, // Enable debug mode, return values of all API calls will be alert in client, if you want to view the parameters, you can open it in PC, parameter information will be printed in log, only on PC will print the appId: Timestamp: timestamp, // Required, generated signature timestamp nonceStr: nonce, // Required, generated signature random string signature: JsApiList: [“onMenuShareTimeline”, // Share to friends circle], // Required, list of JS interfaces to use openTagList: [” WX-open-launch-downloadp “, “WX-open-launch-app “], // Optional, list of opentags needed to use}); / / by ready interface window handle a successful validation. Wx. Ready (() = > {the console. The log (” ok “, “wx – ready = = = = = = = = = = =”); All interface calls must be made after the result of the config interface. Config is an asynchronous operation on the client side, so if the relevant interface needs to be called when the page loads, it must be called in the ready function to ensure correct execution. For interfaces that are invoked only when triggered by the user, they can be called directly and do not need to be placed in the ready function}); / / by dealing with failed validation error interface window. Wx. Error ((err) = > {the console. The log (err, “wx – err = = = = = = = = = = =”); });});});});});});});});});});

Small program jump button (open label description) :
  • A button on a page that provides a jump to a specified applet. After using this label, the user needs to click the label button in the web page to jump to the applet
  • Open objects for this feature:
  1. The web page bound to the “JS interface security domain name” by the authenticated service number can use this label to jump to any legal and compliant small program.
  2. Certified non-personal subject small program, the use of small program cloud development of static web hosting binding domain name under the web page, can use this label to jump to any legal compliance small program.

  • The attribute username is the original ID of the applet to be jumped, which starts with **gh_** and is mandatory

  • Note: The declared page path must be suffixed with.html, such as pages/home/index.html

Related HTML code
<div style="width: 750px; height: 200px;" > <wx-open-launch-weapp id="launch-btn01" username="gh_6718e48f289e" path="pages/index/index.html" > <template> <button style="color: #666; width: 50px; height: 50px; display: block; text-align: center;" Class = "wx - BTN wx - btn01" > jump applet < / button > < / template > < wx - open - launch - weapp > < / div >Copy the code
The event

  • The ready—— label is initialized and can be clicked

  • Launch —— triggered after the user clicks the jump button and operates the confirm popup

  • Error —— An error occurs after the user clicks the jump button (with a return value {errMsg: string}; If the value of errMsg is launch:fail, the jump fails.)

Related JS code
/ / tuning up the success callback launchBtn01 addEventListener (" launch ", (e) = > {the console. The log (e, "launch1 - eee = = = = = = = = ="); }); . / / tuning up failed callback launchBtn01 addEventListener (" error ", (e) = > {the console. The log (e.d etail, "launch1 fail -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -"); });Copy the code
App Jump button (open label description) :
  • A button on a page that provides a jump to a specific App. This function is only available to authenticated service numbers. Before using this label, you need to go to the management center of wechat open platform – public account or applet details – interface information – Webpage jump mobile application – bound to the App to jump in association Settings. Reference document for detailed configuration rules wechat Webpage Hopping APP Function
  • The attribute appID is the appID to be jumped, which is applied for by the third-party SDK and is mandatory
  • Where the attribute extinfo is the additional information required for the jump (URL parameters, etc.)
Related HTML code
<div style="width: 750px; height: 200px;" > <wx-open-launch-app id="launch-btn02" appid="wx6870fe2aa6a6b9cd" extinfo="" > <template> <button style=" color: #666; width: 200px; height: 160px; display: block; text-align: center;" </button> </template> </wx-open-launch-app> </div>Copy the code
Related JS code
/ / tuning up the success callback launchBtn02 addEventListener (" launch ", (e) = > {the console. The log (e, "launch2 - eee = = = = = = = = ="); }); . / / tuning up failed callback launchBtn02 addEventListener (" error ", (e) = > {the console. The log (e.d etail, "launch2 fail -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -"); });Copy the code
The event

  • The ready—— label is initialized and can be clicked

  • Launch —— triggered after the user clicks the jump button and operates the confirm popup

  • Error —— An error occurs after the user clicks the jump button (with a return value {errMsg: string}; If the value of errMsg is launch:fail, the call fails, or the app is not installed on Android, or the app is not installed on iOS when the user clicks OK on the pop-up window. If the value of errMsg is “launch:fail_check fail”, it indicates that the jump permission of App fails to be verified. Ensure that AppID is correctly bound.)

Hit the pit

  • It must be placed on the server. After the configuration is successful, it must be displayed under the button of the real machine. The cost of trial and error is slightly higher
  • WeChat page jump app, android phones prompted after click the button “will leave WeChat, open the program, click allow, no jump reaction, no error feedback, according to the WeChat open platform technologies to provide solutions reason android package need according to the document configuration, trouble related android development colleagues to assist configuration hair production package, configuration document links: Android Access Guide Configuration