How to set up Wechat JS SDK?

David Yu
Shanghai Coders
Published in
4 min readDec 9, 2018


Want to do let your user login through WeChat on your website?

Want to sell something through WeChat on your website?

You might need to implement WeChat JSSDK. In case you’re still wondering if you need it, click here.


A WeChat Official Account, Subscription/Service/WeChat Work

If you’re just dabbling, Sandbox account

WeChat Web Developer Tool (For debugging)

Official Document

What is WeChat JSSDK doing anyway?

It enables your website to access WeChat’s native mobile capabilities, such as getting user’s GPS location, sharing, scanning QRcode, etc.

Preparation before Coding

  1. AppID and AppSecret (Either from the sandbox account or official account’s Basic Configuration)
  2. Whitelist Domain Name
  • Write domain without http or https.
  • For example:, only write

For Sandbox account:

You can use IP address or localhost for sandbox account

For the actual account:

Tips for the production environment:

Server IP also needs to be whitelisted.

The domain name needs to have ICP

Add the .txtfile provided at the location shown above at root level for Tencent to confirm your ownership of the website


Business-server is your backend server

This could be even more complicated if you have to generate the signature and parse the XML response from Wechat server. That’s why we will use a library.

Steps to get it up and running

  1. Clone the code:
  2. Do npm install or yarn install
  3. Create a .env file on the same directory level of app.js
  4. Add your AppID and AppSecret there

5. Do npm start or if you have nondemon run npm run dev for auto-restart

6. If nothing horrible went wrong, you should have a route /get-signature running on your localhost:4000


Below is the code for the original WeChat JSSDK. The parameters in bold are the params that we will get from our backend server /get-signature


debug: true, // turn on debug mode, call all return value of api, which will be in alert in client's end. To view the incoming parameters, this cane be opened on a pc, the parameter information will be displayed through a log, only to be printed on a pc.
appId: '', // Required
timestamp: , // Required
nonceStr: '', // Required, Random String
signature: '',// Required
jsApiList: [] // Required, required JA interface list, all JS interface list, see Appendix 2


The most important points for front-end implementation:

// Make sure it's the url that you have whitelisted in WeChat Official Account Dashboardconst url = window.location.href.split('#')[0];// If you want to test on your device, be sure to use your IP address instead of localhost// Use encodeURIComponent so special characters don't mess up your urlconst YourBackEndUrl = `http://localhost:4000/get-signature?url=${encodeURIComponent(url)}

If you happen to use React, you can clone the demo here:

If you like original flavor, here’s the link to WeChat JSSDK source code:

How to debug?

Download WeChat Web Developer Tool


There are a lot more to WeChat related development. If you would like to learn more about it, I put together a free WeChat glossary just for you.



David Yu
Shanghai Coders

Full-stack developer based in Shanghai. I help people turning their ideas into reality.