Why do we need WeChat JS SDK?

David Yu
Shanghai Coders
Published in
3 min readApr 14, 2018

Well, maybe you don’t need to use it. Here is the list of benefits that WeChat JS SDK provides.

What is WeChat JSSDK?

WeChat JSSDK is a bridge between a website and WeChat native app. It allows a website to do more in WeChat.

Why do we need WeChat JS SDK?

As you might have already known, WeChat has its own special environment for development. Not only it's within the Chinese internet, but it’s also tightly controlled by its company, Tencent. This means we will have to play by its rule when doing development in WeChat.

Reason #1: Sharing customization

While there are some hacks to use meta tags to share from another browser to WeChat to get the customized sharing card. Its limitation is when sharing is happening within WeChat. WeChat JS SDK will let you define how your sharing card would look.

Here is the list of share related JS API:

onMenuShareTimeline — When a user shares to “moment” in their WeChat

onMenuShareAppMessage — When a user shares to a friend or a chat group

onMenuShareQQ — When a user shares to QQ

onMenuShareWeibo — When a user shares to Weibo

onMenuShareQZone — When the user shares to QZone.

As you might notice, all of the share destinations are Tencent companies.

Reason #2 Native WeChat App Access

Because WeChat is a native app, so it has access to the user’s hardware. Microphone, camera, and GPS.

You could ask the user to record a message, or scan a QR code, or using GPS to find the nearest store, etc.

What I think it’s cool is that it provides you a voice translation API, so it’s really helpful for the foreign user, and it can potentially be used to do something cool.

Here is the list:

startRecord

stopRecord

onVoiceRecordEnd

playVoice

pauseVoice

stopVoice

onVoicePlayEnd

uploadVoice

downloadVoice

chooseImage

previewImage

uploadImage

downloadImage

translateVoice

getNetworkType

openLocation

getLocation

scanQRCode

Reason #3: Manage how the menu looks

Here is a list of menu options:

Expose: “menuItem:exposeArticle”

Set font: “menuItem:setFont”

Day Mode: “menuItem:dayMode”

Night Mode: “menuItem:nightMode”

Refresh: “menuItem:refresh”

View Official account (added): “menuItem: profile”

View Official account (not added): “menuItem:addContact”

Send to friends: “menuItem:share:app message”

Share to moments: “menuItem:share: timeline”

Share to QQ “menuItem:share:qq”

Share to Weibo: “menuItem:share:weiboApp”

Favorite: “menuItem:favorite”

Share to FB: “menuItem:share:facebook”

Share to QZone/menuItem:share:QZone

Edit tags: “menuItem:editTag”

Delete: “menuItem:delete”

Copy URL: “menuItem:copyUrl”

Original Page “menuItem:originPage”

Reading Mode: “menuItem:readMode”

Open with QQ Browser: “menuItem:openWithQQBrowser”

Open with Safari: “menuItem:openWithSafari”

Email: “menuItem:share:email”

Some special official account: “menuItem:share: brand”

Reason #4:Access to WeChat Pay and Cards

Although you would have to apply for it. WeChat pay and cards would be really useful for e-commerce. As mobile payment is already ingrained in the user habit in China, WeChat also lets you manage discount cards or loyalty cards. If you want users to sign up for membership and drive more sales online, this will be helpful to look into.

Here is the list:

chooseWXPay

openProductSpecificView

addCard

chooseCard

openCard

If you don’t need any of these functions, you probably don’t need to spend time implementing Wechat JSSDK into your website.

Thanks for reading. Let me know what else you would like to know in the comment below.

WeChat official account platform:

https://mp.weixin.qq.com/?lang=en_US

WeChat JSSDK Document:

https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

For more information, please visit shanghaicoders.com

--

--

David Yu
Shanghai Coders

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