How to set up Wechat JS SDK?

David Yu
David Yu
Dec 9, 2018 · 4 min read

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.

Prerequisites:

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: http://test.com, only write test.com

For Sandbox account:

You can use IP address or localhost for sandbox account

Image for post
Image for post

For the actual account:

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

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

Backend

Image for post
Image for post
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: https://github.com/davidyu37/WeChat-JSSDK-Backend
  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
APP_ID=somealphabetsandnumbers
APP_SECRET=somealphabetsandnumbers

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

Frontend

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

wx.config({

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: https://github.com/davidyu37/WeChat-JSSDK-Frontend

If you like original flavor, here’s the link to WeChat JSSDK source code: http://res.wx.qq.com/open/js/jweixin-1.2.0.js

How to debug?

Download WeChat Web Developer Tool

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Conclusion

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.

Shanghai Coders

Sharing software development required in China

David Yu

Written by

David Yu

Software Freelancer based in Shanghai. More articles at https://shanghaicoders.com Work with me: https://davidyu37.github.io/

Shanghai Coders

Sharing software development required in China

David Yu

Written by

David Yu

Software Freelancer based in Shanghai. More articles at https://shanghaicoders.com Work with me: https://davidyu37.github.io/

Shanghai Coders

Sharing software development required in China

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store