WeChat JS-SDK Description (1)

Overview

WeChat JS-SDK is a web development toolkit based on WeChat provided by WeChat public platform for web developers.

By using WeChat JS-SDK, web developers can leverage WeChat to efficiently use mobile system capabilities such as taking photos, selecting images, voice, and location. At the same time, they can directly use WeChat-specific capabilities such as WeChat sharing, scanning, cards and coupons, and payment to provide WeChat users with a better web experience.

This document introduces how to use WeChat JS-SDK and related precautions for web developers.

JSSDK usage steps

Step 1: Bind domain name

First log in to the WeChat public platform and enter the "Function Settings" of the "Public Account Settings" to fill in the "JS Interface Security Domain Name".

Note: After logging in, you can view the corresponding interface permissions in the "Developer Center".

Step 2: Import JS file

In the page that needs to call the JS interface, introduce the following JS file (supports https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

Note: Supports loading using AMD/CMD standard module loading method

Step 3: Inject permission verification configuration through config interface

All pages that need to use JS-SDK must first inject configuration information, otherwise they will not be called (the same URL only needs to be called once, and the SPA web app with a changing URL can be called every time the URL changes. Currently, the Android WeChat client does not support the new H5 feature of pushState, so using pushState to implement the web app page will cause signing failure. This problem will be fixed in Android6.2).

wx.config({
    debug: true, // Turn on the debug mode. The return values ​​of all API calls will be alerted on the client. If you want to view the incoming parameters, you can open it on the PC. The parameter information will be printed through the log. It will only be printed on the PC.
    appId: '', // Required, the public account's *** identifier timestamp: , // Required, the timestamp for generating the signature nonceStr: '', // Required, the random string for generating the signature signature: '', // Required, signature, see Appendix 1
    jsApiList: [] // Required, list of JS interfaces to be used. For a list of all JS interfaces, see Appendix 2
});

Step 4: Successfully verify the process through the ready interface

wx.ready(function(){

    // After the config information is verified, the ready method will be executed. All interface calls must be made after the config interface obtains the result. Config is a client asynchronous operation, so if you need to call the relevant interface when the page is loaded, you must put the relevant interface in the ready function to ensure correct execution. For interfaces that are called only when triggered by the user, you can call them directly without putting them in the ready function.
});

Step 5: Handle failed verification through the error interface

wx.error(function(res){

    // If the config information verification fails, the error function will be executed. For example, if the signature expires, the verification fails. You can view the specific error information by turning on the debug mode of config or in the returned res parameter. For SPA, you can update the signature here.

});

Interface call instructions

All interfaces are called through wx objects (jWeixin objects can also be used). The parameter is an object. In addition to the parameters that each interface needs to pass, there are also the following common parameters:

1. success: callback function executed when the interface call succeeds.
2. fail: callback function executed when the interface call fails.
3. complete: The callback function executed when the interface call is completed, whether it succeeds or fails.
4. cancel: callback function when the user clicks cancel, which is only used in some APIs that require user cancellation.
5. trigger: The method that is triggered when the button in the Menu is clicked. This method only supports the relevant interfaces in the Menu.

Note: Do not try to use ajax asynchronous request in trigger to modify the shared content, because the client sharing operation is a synchronous operation, and the response packet from ajax will not be returned at this time .

The above functions all have one parameter, which is an object. In addition to the data returned by each interface itself, there is also a common attribute errMsg, whose value format is as follows:

When the call is successful: "xxx:ok", where xxx is the name of the called interface. When the user cancels: "xxx:cancel", where xxx is the name of the called interface. When the call fails: its value is the specific error message.