Wechat developer tools

The debugging tool used when developing wechat applets or public accounts wechat Web developer tools, select the stable version to download.

Tools are referred to in the content

Tool use

Once the download is complete, launch the tool.

  • The development of native small procedures, you can create projects directly into the tool to provide an editor environment.

  • When using UniApp to develop wechat applets, configure the path of the tool in HbilderX, and then select [Settings -> Security -> Open Port] in the tool to open the open port. Using HbilderX to package the applet automatically launches the tool into the project.

  • About the debugging of wechat official account/webpage:

Wechat official accounts are essentially H5 web pages rendered using the built-in browser of wechat. After starting the tool, select the official account webpage project and enter the official account debugging page.

Looking at this page is not very familiar with the feeling, is basically the same as Chrome browser debugging, more is to debug some of the built-in methods of wechat browser. In a local test, you can enter the address of the locally started page into the address bar to debug the page.

Wechat public account test number

For projects that cannot be launched in a formal environment at the beginning of development, you can apply for a test number to test some functions.

Apply for the test number address

After entering the application page, scan the code to log in and fill in some configuration information.

  • The URL field is filled in with an interface, which needs the cooperation of the backend and can respond to the verification sent by wechat. If the interface is abnormal, the configuration cannot be successful.
  • Note The Token field must be the same as that on the backend. Otherwise, the configuration fails.

  • Enter a secure domain name in the format of XXXXx.com or XXX.xxxxx. cn, which does not require the HTTP or HTTPS prefix. After setting the secure domain name, follow the test public account by scanning the following TWO-DIMENSIONAL code, and then you can successfully call the open interface of wechat.

Access wechat JS-SDK

Access to JS-SDK in wechat public account/web page development can obtain some interface permissions, such as user-defined sharing, uploading pictures, obtaining location and other functions.

Js-sdk document address

process

Now let’s go through the process of using JS-SDK:

  • (1) Test the configuration of the public account, and give the appId and AppSecret in the test public account to the back end, which is needed for the back end signature
  • (2) page introduction of js file res.wx.qq.com/open/js/jwe…
  • (3) Configuration of injection interface permission verification
  let url = encodeURIComponent(location.href.split(The '#') [0]);
  $.ajax({
    url: '/api/getConfigData'.type: 'get'.dataType: 'json'.headers: {
      'Content-Type': 'application/json; charset=UTF-8',},data: {
      url,
    },
    success: function (data) {
      console.log(data);
      wx.config({
        debug: ture, // If debug mode is enabled, the return value of all API calls will be displayed in the client alert. If you want to view the parameters passed in, you can open it in the PC, and the parameter information will be printed in the log.
        appId: data.result.appId, // Mandatory, the unique identifier of the public account
        timestamp: data.result.timestamp, // Mandatory to generate the timestamp of the signature
        nonceStr: data.result.nonceStr, // Mandatory to generate a random string of signatures
        signature: data.result.signature, // Mandatory, signature
        jsApiList: ['updateAppMessageShareData'].// Mandatory, a list of JS interfaces to be used
      });
    },
    error: function (e) {
      // console.log(' Ajax request failed, exception message: ', e)}});Copy the code

In order to ensure security, the signature must be done on the server side, so it is necessary for the back end to call an interface to return the signature and other fields of the above code to the front end for use. In the wx.config method, jsApiList is the wechat interface you want to use.

The URL variable is the current page link, which is required for the backend signature. Therefore, the url variable is provided to the backend during interface adjustment. It can be adjusted according to the scenario.

  • (4) Verify the processing successfully through the ready interface
wx.ready(function(){
  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. Interfaces that are invoked only when triggered by the user can be invoked directly without being placed in the ready function.
});
Copy the code

For example, when using a custom share interface:

wx.ready(function () {   // It should be called before the user can click the share button
  wx.updateAppMessageShareData({ 
    title: ' '.// Share the title
    desc: ' '.// Share the description
    link: ' '.// Share link, the link domain name or path must be the same as the current page corresponding public number JS security domain name
    imgUrl: ' '.// Share ICONS
    success: function () {
      // The setting succeeded}})});Copy the code

If users click the button to trigger is, don’t need to wx. UpdateAppMessageShareData written in ready.

Q&A

As shown in the figure above, the wx.config permission was successfully verified, but the interface permission to be used by jsApiList was not obtained.

Here you can use the tool for debugging: “Debug” – “debug wechat developer tools”, go to the Network panel, then refresh your current page, find the preverify interface, verify_info_list field is empty, and error code 40048 is reported.

In some cases, there will be 63002 incorrect signatures and other issues, and the jS-SDK will not work properly.

Most of the reasons for this kind of problem are that you do not pay attention to some small details, such as field errors and public domain name configuration errors, etc. Pay attention to the following points to avoid these problems:

  • Ensure that the public/test number domain name is configured correctly,jsApiListIt can be used only under this domain name
  • Pay attention tononceStrEqual field capitalization
  • Ensure that the backend is signed whenappIdFields and front-endwx.configIs consistent with
  • It is used for the back-end signatureurlIf the front end is providing it, the front end will be requiredurlforencodeURIComponentEncoding, to the back end, the back end should also use the corresponding method to decode and then sign.urlAll you need is links to the current page with the “#”hash part removed, as shown in this example.

Wechat documents…… Some cases will not be explained, special problems can go to wechat open community

Api related Issues

Found in the use of wx. UpdateAppMessageShareData, interface state of success when unable to guide the pop-up. Later, after checking the data, I found that this interface can only customize the shared link, title, logo and description. To share, I still need to click the three dots on the upper right corner of wechat page to share the customized content.

In addition, sometimes the shared content only has a link instead of a card. Finally, it is found that it is normal to enter by scanning the TWO-DIMENSIONAL code, or to share it with wechat friends or moments when entering from the wechat public account. There are only links when sharing is only accessed from external links.

So there are a lot of cases, in the document is not explained, or you have to go to the toss, look up the data.

Debugging tools/methods

  • Online tools:

Wechat public platform interface debugging tool

Signature tool

  • Mobile wechat web page debugging, directly open the link in mobile wechat to achieve the corresponding operation:

Shut down the X5 kernel: debugmm.qq.com/?forcex5=fa…

Start the X5 kernel: debugmm.qq.com/?forcex5=tu…

When the X5 kernel is enabled, you can enter the TBS debugging page to clear the wechat browser cache and other debugtbs.qq.com/