WeChat JS-SDK documentation


WeChat JS-SDK documentation

1474938226449452.jpg

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 use WeChat to efficiently use the capabilities of mobile phone systems such as taking pictures, selecting pictures, voice, and location. At the same time, they can directly use WeChat to share and scan. WeChat’s unique capabilities such as swipe, card coupons, and payment 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 "Public Account Settings" and 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 the JS file

Introduce the following JS file into the page that needs to call the JS interface (https is supported): http://res.wx.qq.com/open/js/jweixin-1.0.0.js

If you need to use the shake peripheral function, please import http://res.wx.qq.com/open/js/jweixin-1.1.0.js

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

Step 3: Inject the permission verification configuration through the config interface

All pages that need to use JS-SDK must first inject configuration information, otherwise they will not be able to Call (the same URL only needs to be called once. The SPA web app that changes the URL can be called every time the URL changes. Currently, the Android WeChat client does not support the new H5 feature of pushState, so pushState is used to implement the web app page. Will cause signature to fail, this problem will be fixed in Android 6.2).

wx.config({

debug: true, // Turn on debugging mode, and the return values ​​of all api calls will be alerted on the client side. If you want to view the incoming parameters, you can open it on the PC side. The parameter information will be printed through the log. It will only be printed on the PC side.

appId: '', // Required Fill in, the unique identification of the public account

timestamp: , // Required, the timestamp for generating the signature

nonceStr: '', / / Required, generate a random string of signature

## signature: '',// Required, signature, see Appendix 1

## jsApiList: [] // Required, the list of JS interfaces that need to be used, see Appendix 2 for the list of all JS interfaces

});

Step 4: Process successful verification through the ready interface

wx. ready(function(){

// The ready method will be executed after the config information is verified. All interface calls must be made after the config interface obtains the result. config is a client-side asynchronous operation, so If you need to call relevant interfaces when the page is loaded, you must call the relevant interfaces in the ready function to ensure correct execution. For interfaces that are called only when triggered by the user, you can call them directly and do not need to be placed 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. If the signature expires and the verification fails, the specific error information can be viewed by opening the debug mode of config, or you can Check the returned res parameter. For SPA, you can update the signature here.

});

Interface calling instructions

All interfaces pass wx objects (jWeixin objects can also be used ) to call, the parameter is an object. In addition to the parameters that need to be passed by each interface itself, there are also the following general parameters:

1.success: the callback executed when the interface call is successful. function.

2.fail: The callback function executed when the interface call fails.

3.complete: The callback function executed when the interface call is completed, regardless of success or failure.

4.cancel: The callback function when the user clicks cancel. It is only used by some APIs where the user cancels the operation.

5.trigger: A method that is triggered when a button in the Menu is clicked. This method only supports related interfaces in the Menu.

Note: Do not try to use ajax asynchronous request in trigger to modify the content of this share, because the client sharing operation is a synchronous operation, use ajax return packet at this time Will have not returned yet.

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

When the call is successful: "xxx:ok", where xxx is the name of the interface called

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

Basic interface

## Determine whether the current client version supports the specified JS interface

wx.checkJsApi({

jsApiList: ['chooseImage'], // List of JS interfaces that need to be detected, see Appendix 2 for the list of all JS interfaces,

success: function(res) {

// Return in the form of key-value pairs, available api value is true, unavailable api value is false

## // For example: {"checkResult":{"chooseImage": true},"errMsg":"checkJsApi:ok"}

}

});

Note: The checkJsApi interface is a reserved interface newly introduced in client 6.0.2. The interfaces opened in the first phase can be detected without using checkJsApi.

##Sharing interface

Please be careful not to induce sharing For other violations, public account interface permissions will be permanently revoked for induced sharing behaviors. For detailed rules, please see: Frequently Asked Questions on Moments Management.

Get the "Share to Moments" button click status and customize the sharing content interface

wx.onMenuShareTimeline({

title: '', // Share title

link : '', // Share link

imgUrl: '', // Share icon

success: function () {

## // User confirms sharing The callback function executed later

},

cancel: function () {

/ / Callback function executed after the user cancels sharing

}

});

Get the "Share to Friends" button click status and customize the sharing content interface

wx.onMenuShareAppMessage({

title: '', // Share title

desc: '', // Share description

link: '', // Share link

imgUrl: '', // Share icon

type: '', // Sharing type, music, video or link, if not filled in, the default is link

dataUrl: '', // If type If it is music or video, a data link must be provided, which is empty by default

success: function () {

// After the user confirms sharing Executed callback function

},

## cancel: function () {

// Callback function executed after the user cancels sharing

}

##});

Get the "Share to QQ" button click status and customize the sharing content interface

##wx.onMenuShareQQ({

title: '', // Share title

desc: '', // Share Description

## link: '', // Share link

## imgUrl: '', // Share icon

success: function () {

// The callback function executed after the user confirms sharing

},

cancel: function () {

// Callback function executed after the user cancels sharing

}

});

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '', // 分享图标

    success: function () { 

       // 用户确认分享后执行的回调函数

    },

    cancel: function () { 

// Callback function executed after the user cancels sharing

}

##});

获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({

    title: '', // 分享标题

    desc: '', // 分享描述

    link: '', // 分享链接

    imgUrl: '', // 分享图标

    success: function () { 

       // 用户确认分享后执行的回调函数

    },

    cancel: function () { 

// Callback function executed after the user cancels sharing

}

##});

Image interface

## Interface for taking photos or selecting images from the mobile phone album

wx.chooseImage({

count: 1, //Default 9

## sizeType: ['original', 'compressed'], // You can specify whether it is the original image or the compressed image, the default is both

sourceType: ['album', 'camera'], // You can specify whether the source is an album or a camera, both are included by default

## success: function (res ) {

## var localIds = res.localIds; // Return the local ID list of the selected photo, localId can be used as the src attribute of the img tag to display the image

}

});

Preview image interface

##wx.previewImage({

current: '', // The http link of the currently displayed image

## urls: [] // List of image http links that need to be previewed

});

Upload image interface

##wx.uploadImage({

localId: '', // The local ID of the image to be uploaded is obtained through the chooseImage interface

isShowProgressTips: 1, // The default is 1, Display progress prompt

success: function (res) {

## var serverId = res.serverId; // Return the server ID of the image

}

});

Note: The uploaded image is valid for 3 days. You can use the WeChat multimedia interface to download the image to your own server. The serverId obtained here is media_id.

Download picture interface

wx. downloadImage({

serverId: '', // The server ID of the image to be downloaded is obtained through the uploadImage interface

isShowProgressTips: 1 , // The default is 1, display the progress prompt

success: function (res) {

var localId = res.localId; // Return the local ID after downloading the image

}

});

audio port

Start recording interface

wx.startRecord();

Stop recording interface

##wx.stopRecord({

success: function (res) {

var localId = res.localId;

## }

});

Monitoring recording automatic stop interface

wx.onVoiceRecordEnd({

// The complete callback will be executed when the recording time exceeds one minute without stopping.

complete: function (res) {

var localId = res.localId;

}

});

Play voice interface

##wx.playVoice({

localId: '' // The local ID of the audio to be played is obtained through the stopRecord interface

});

Pause playback interface

##wx.pauseVoice({

localId: '' // The local ID of the audio that needs to be paused is obtained by the stopRecord interface

});

Stop playback interface

##wx.stopVoice({

localId: '' // The local ID of the audio that needs to be stopped is obtained from the stopRecord interface

});

Interface for monitoring the completion of voice playback

##wx.onVoicePlayEnd({

success: function (res) {

var localId = res.localId; // Return the local ID of the audio

}

});

Upload voice interface

##wx.uploadVoice({

localId: '', // The local ID of the audio to be uploaded is obtained through the stopRecord interface

isShowProgressTips: 1, // The default is 1, Display progress prompt

Success: function (res) {

var serverId = res.serverId; // Return the server ID of the audio

}

});

Note: The uploaded voice is valid for 3 days. You can use the WeChat multimedia interface to download the voice to your own server. The serverId obtained here is media_id, refer to the document. The current frequency limit of the multimedia file download interface is 10,000 times/day. If you need to increase the frequency, please log in to the WeChat public platform and apply to increase the temporary upper limit in the list of development-interface permissions.

Download voice interface

wx. downloadVoice({

serverId: '', // The server ID of the audio to be downloaded is obtained through the uploadVoice interface

isShowProgressTips: 1 , // The default is 1, display the progress prompt

success: function (res) {

var localId = res.localId; // Return the local ID of the audio

}

});

Smart interface

## Recognize audio and return the recognition result interface

##wx.translateVoice({

localId: '', // The local ID of the audio that needs to be recognized is obtained from the recording related interface

isShowProgressTips: 1, // The default is 1, and the progress prompt is displayed

success: function (res) {

##   alert(res.translateResult); // The result of speech recognition

}

});

Device Information

Get network status interface

##wx.getNetworkType({

## success: function (res ) {

## var networkType = res.networkType; // Return network type 2g, 3g, 4g, wifi

## }

});

Geographical location

## Use WeChat’s built-in map to view the location interface

wx.openLocation({

latitude: 0, / / Latitude, floating point number, range is 90 ~ -90

longitude: 0, // Longitude, floating point number, range is 180 ~ -180.

name: '', // Location name

address: '', // Address details

scale: 1 , // Map zoom level, shaping value, ranging from 1 to 28. The default is the maximum

infoUrl: '' // The hyperlink displayed at the bottom of the viewing location interface can be clicked to jump change

});

Get geographical location interface

##wx.getLocation({

type: 'wgs84', // The default is the gps coordinates of wgs84. If you want to return the Mars coordinates directly for openLocation, you can pass in 'gcj02'

success: function (res) {

var latitude = res.latitude; // Latitude, floating point number, range is 90 ~ -90

var longitude = res.longitude; // Longitude, floating point number, range is 180 ~ -180.

var speed = res.speed; // Speed, in Meters per second

var accuracy = res.accuracy; // Position accuracy

}

});

Shake around the surroundings

Open the interface for searching for surrounding ibeacon devices

##wx.startSearchBeacons({

ticket:"", //Shake the surrounding business tickets, and the system will automatically add them after the shaken page link

complete:function(argv){

//Open the callback function after the search is completed

}

});

Note: If you need to access the shake peripheral function, please refer to: Apply to activate the shake peripheral

# #Close the interface for searching for surrounding ibeacon devices

#wx.stopSearchBeacons({

complete:function(res){

//Close the callback function after the search is completed

}

});

Listen to the peripheral ibeacon device interface

##wx.onSearchBeacons({

complete:function(argv){

//Callback function, can be in array form Obtain the list of related peripheral devices registered by the merchant

}

});

Note: For the above mentioned Shake Shake peripheral interface usage precautions and more return result instructions, please refer to: Shake Shake Peripheral Obtaining Device Information

Interface operation

##Hide the upper right corner menu interface

wx.hideOptionMenu();

##Display Menu interface in the upper right corner

wx.showOptionMenu();

Close the current web page window interface

##wx.closeWindow();

Batch hidden function button interface

wx.hideMenuItems({

menuList: [] // The menu items to be hidden can only hide the "Propagation Class" and "Protection Class" buttons, all See Appendix 3 for menu items

});

Batch display function button interface

##wx.showMenuItems({

menuList: [] // The menu items to be displayed, see Appendix 3 for all menu items

});

Hide all non-base button interfaces

wx. hideAllNonBaseMenuItem();

// For details on the "Basic Class" button, see Appendix 3

Show all function button interface

##wx.showAllNonBaseMenuItem();

Scan on WeChat

## Call up the WeChat scan interface

##wx.scanQRCode({

needResult: 0 , // The default is 0, the scan result is processed by WeChat, 1 returns the scan result directly,

scanType: ["qrCode","barCode"], // You can specify the second scan QR code or one-dimensional code, both are available by default

success: function (res) {

var result = res.resultStr; // When needResult is 1, the result returned by scanning the code

}

});

WeChat store

# #Jump to WeChat product page interface

##wx.openProductSpecificView({

## productId: '', // Product id

## ViewType: '' // 0. Default value, ordinary product details page 1. Scan the product details page 2. Store product details page

});

WeChat Card and Ticket

The signature certificate api_ticket used in the WeChat Card and Ticket interface, Different from the signature certificate jsapi_ticket used in config in step 3, developers need to complete two different signatures in sequence when calling the WeChat coupon JS-SDK, and ensure that the certificate is cached.

Get api_ticket

api_ticket is used to call WeChat The temporary ticket of the card and coupon JS API is valid for 7200 seconds and is obtained through access_token.

Developer Notes:

1.This api_ticket used for card and coupon interface signature is different from the jsapi_ticket used in step 3 to inject permission verification configuration through the config interface.

2. Since the number of api calls to obtain api_ticket is very limited, frequent refresh of api_ticket will result in limited api calls and affect their own business. Developers need to store and update api_ticket in their own services.

Interface call request description

http request method: GET

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card

Parameter Description

Return data

##Data example:

{

"errcode":0,

"errmsg":"ok" ,

##"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKdvsdshFKA",

"expires_in":7200

}

##Parameter
Is it necessaryExplanation
access_token is the interface call credential
##errmsgError message##ticket
Parameter nameDescription
##errcodeError code
api_ticket, the credentials required for signing in the card and coupon interface
expires_in Effective time

Pull the list of applicable cards and coupons and obtain user selection information

wx.chooseCard({

shopId: '', // StoreId

cardType: '', // Card type

cardId: '', // Card and coupon Id

## timestamp: 0, // Card and coupon signature timestamp

nonceStr: '', // Random string of card signature

signType: '', // Signature method, default 'SHA1'

cardSign: '', // Card signature

success: function (res) {

var cardList= res .cardList; // Card list information selected by the user

}

});

Store ID. shopID is used to filter out and pull up the coupon list with the specified location_list (shopID), which is optional.##string(64)sign.

Special attention for developers: Signature errors will cause the pulled card and coupon list to be abnormally empty. Please carefully check the validity of the parameters involved in the signature.

Special reminder

The pull list is only related to the user’s local coupons Relatedly, there are usually three situations when the pull-up list is abnormally empty: signature error, invalid timestamp, and incorrect filtering mechanism. Developers are asked to investigate the positioning reasons in sequence.

Batch add card and coupon interface

wx.addCard({

cardList: [{

] cardId: '',

## cardExt: ''

}], // List of cards and coupons to be added

success: function (res) {

var cardList = res.cardList; //Added card and coupon list information

}

});

It is worth noting that the card_ext parameter here must be consistent with the parameters participating in the signature, and the format is a string instead of Object, otherwise a signature error will be reported.

It is recommended that developers add no more than 5 cards and coupons at one time, otherwise they will encounter a timeout error.

View the card and coupon interface in the WeChat card package

wx.openCard({

cardList: [{

cardId: '',

code: ''

}]//The list of cards and coupons that need to be opened

});

WeChat Pay

## Initiate a WeChat payment request

wx.chooseWXPay({

timestamp: 0, // Payment Signature timestamp, please note that all timestamp fields used in WeChat jssdk are lowercase. However, the timeStamp field name used by the latest version of the payment background to generate signatures must capitalize the S character

nonceStr: '', // Random string of payment signature, no longer than 32 digits

package: '', // The prepay_id parameter value returned by the unified payment interface, the submission format is: prepay_id=** *)

## signType: '', // Signature method, the default is 'SHA1', if you use the new version of payment, you need to pass in 'MD5'

paySign: '', // Payment signature

success: function (res) {

// Callback function after successful payment

}

##});

Note: prepay_id is obtained through the WeChat payment unified ordering interface. paySign adopts the unified WeChat payment Sign signature generation method. Note that the appId here must also participate in the signature. The appId is consistent with the appId passed in the config, that is, the last The parameters involved in signing include appId, timeStamp, nonceStr, package, and signType.

WeChat payment development documentation: https://pay.weixin.qq.com/wiki/doc/api/index.html

Appendix 1-JS-SDK usage permission signature algorithm

jsapi_ticket

Before generating a signature, you must first understand jsapi_ticket. jsapi_ticket is a temporary ticket used by public accounts to call the WeChat JS interface. Under normal circumstances, the validity period of jsapi_ticket is 7200 seconds, which is obtained through access_token. Since the number of api calls to obtain jsapi_ticket is very limited, frequent refresh of jsapi_ticket will result in limited api calls and affect your own business. Developers must cache jsapi_ticket globally in their own services.

1. Refer to the following document to obtain access_token (Validity period is 7200 seconds, developers must globally cache access_token in their own services): ../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2. Use the access_token obtained in the first step to request jsapi_ticket using http GET method (Validity period is 7200 seconds, developers must globally cache jsapi_ticket in their own services): https:// api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

## Successfully returns the following JSON:

{

"errcode":0,

"errmsg":"ok",

"ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",

"expires_in":7200

}

After obtaining jsapi_ticket, you can generate a signature for JS-SDK permission verification.

Signature algorithm

The signature generation rules are as follows: The fields participating in the signature include noncestr ( Random string), valid jsapi_ticket, timestamp (timestamp), url (URL of the current web page, does not contain # and its following parts ). After sorting all the parameters to be signed according to the ASCII code of the field name from small to large (lexicographic order), use the URL key-value pair format (i.e. key1=value1&key2=value2...) to splice them into a string string1. It should be noted here that all parameter names are lowercase characters. Perform sha1 encryption on string1, use original values ​​for field names and field values, and do not perform URL escaping.

That is signature=sha1(string1). Example:

##noncestr=Wm3WZYTPz0wzccnW

##jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHK P7qg

timestamp=1414587457

url=http://mp.weixin.qq.com?params=value

Step 1. For all parameters to be signed according to the field name After sorting the ASCII codes from small to large (lexicographic order), use the URL key-value pair format (i.e. key1=value1&key2=value2...) to concatenate it into a string string1:

jsapi_ticket =sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com? params=value

#Step 2. Sign string1 with sha1, Get signature:

0f9de62fce790f9a083d5c99e95740ceb90c27ed

Notes

1. The noncestr and timestamp used for signature must be the same as the nonceStr and timestamp in wx.config.

2. The URL used for signature must be the complete URL of the page that calls the JS interface.

3.For security reasons, developers must implement signature logic on the server side.

If errors such as invalid signature occur, please refer to Appendix 5 for common errors and solutions.

##Appendix 2 - List of all JS interfaces

Version 1.0.0 interface

onMenuShareTimeline

onMenuShareAppMessage

onMenuShareQQ

onMenuShareWeibo

onMenuShareQZone

startRecord

stopRecord

## onVoiceRecordEnd

playVoice

pauseVoice

stopVoice

onVoicePlayEnd

uploadVoice

downloadVoice

chooseImage

previewImage

uploadImage

downloadImage

translateVoice

getNetworkType

openLocation

getLocation

hideOptionMenu

showOptionMenu

hideMenuItems

showMenuItems

hideAllNonBaseMenuItem

showAllNonBaseMenuItem

closeWindow

scanQRCode

chooseWXPay

openProductSpecificView

addCard

chooseCard

openCard

Appendix 3 - List of all menu items

Basic Class

Report: "menuItem:exposeArticle"

Adjust font: "menuItem:setFont"

Day mode: "menuItem:dayMode"

Night mode: "menuItem:nightMode"

Refresh : "menuItem:refresh"

View public account (added): "menuItem:profile"

View public account (not added): "menuItem:addContact"

Communication Category

Send to a friend: "menuItem:share:appMessage"

Share to Moments: "menuItem:share:timeline"

Share to QQ: "menuItem:share:qq"

Share to Weibo: "menuItem:share:weiboApp"

Collect: "menuItem:favorite"

Share to FB: "menuItem:share:facebook"

Share to QQ Space/menuItem:share:QZone

Protected Class

##Edit tag: " menuItem:editTag"

Delete: "menuItem:delete"

Copy link: "menuItem:copyUrl"

Original webpage: "menuItem:originPage"

Reading mode: "menuItem:readMode"

Open in QQ browser: "menuItem:openWithQQBrowser"

Open in Safari: "menuItem:openWithSafari"

Email: "menuItem:share:email"

Some special public accounts: "menuItem :share:brand"

##Appendix 4-Card and Coupon Extension Fields and Signature Generation Algorithm

JSSDK users please read here, JSAPI users can skip

Card coupon signature and JSSDK signature are completely independent. Their algorithms and meanings are completely different. Please do not confuse them. The signature of JSSDK is a layer of authentication required to use all JS interfaces. It is used to identify the identity of the caller and has nothing to do with the coupon itself. Secondly, the card and coupon signature takes into account the scalability of the protocol and simple prevention of data tampering, and an independent signature protocol is designed. In addition, due to historical reasons, the JS interface of the card and coupon appeared before the JSSDK. The JSAPI at that time did not have an authentication system, so the identity information of appsecret/api_ticket was also added to the signature of the card and coupon. I hope developers will understand.

Card ticket api_ticket

Card ticket api_ticket is used to call the card The temporary ticket of the coupon-related interface is valid for 7200 seconds and is obtained through access_token. Pay attention here to distinguish it from jsapi_ticket. Since the number of api calls to obtain the card and ticket api_ticket is very limited, frequent refresh of the card and ticket api_ticket will result in limited api calls and affect their own business. Developers must cache the card and ticket api_ticket globally in their own services.

1. Refer to the following document to obtain access_token (Validity period is 7200 seconds, developers must globally cache access_token in their own services): ../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2. Use the access_token obtained in the first step to request the card and coupon api_ticket using http GET method (The validity period is 7200 seconds, and developers must cache the card and coupon api_ticket globally in their own services): https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=wx_card


##Card and coupon extension field cardExt description

cardExt itself is a JSON string, which is the unique information allocated by the merchant for this card and coupon, and contains the following fields :

Parameter name##RequiredtypeExample valueDescription
##shopId Nostring(24)##1234
cardTypeNostring(24)GROUPONCard and coupon type, used to pull up the card and coupon list of the specified card and coupon type. When cardType is empty, a list of all cards and coupons will be pulled up by default, which is not required.
cardIdNostring(32 )p1Pj9jr90_SQRaVqYI239Ka1erkCard ID, used to pull up the card list of the specified cardId, When cardId is empty, a list of all cards and coupons will be pulled up by default, which is not required.
timestamp is string(32)14300000000Time stamp.
nonceStr is string(32)sduhi123Random string.
signType is string(32)SHA1Signature method, currently only supports SHA1
##cardSign is ##abcsdijcous123
Field##Is it required?Whether to participate in signingDescription
codeNoYesThe designated coupon code can only be claimed once. Cards and coupons in custom code mode must be filled in, while cards and coupons in non-custom code and pre-stored code modes do not need to be filled in. For details, see: Whether to customize the code
##openidNo is the openid of the designated recipient of . Only this user can receive it. Cards and coupons whose bind_openid field is true must be filled in; bind_openid fields are false and do not need to be filled in.
timestampisis Timestamp, the merchant generates the number of seconds from 00:00:00 on January 1, 1970 to the present, which is the current time, and ultimately needs to be converted into a string form; it is generated by the merchant and passed in. The timestamps of different add requests must be generated dynamically. If repeated, the collection will fail! .
nonce_strNoYesRandom string, set and passed in by the developer, Enhance security (if not filled in, the request may be replayed). Random string, no longer than 32 characters. It is recommended to use uppercase and lowercase letters and numbers. Nonces for different addition requests must be dynamically generated. If repeated, the collection will fail.
fixed_begintimestampNoNoThe time when the card is received is a 10-digit timestamp. It is only used when the validity period type of the card and coupon is DATE_TYPE_FIX_TERM. It identifies the actual validity time of the card and coupon, and is used to solve the problem of out-of-synchronization between the start time and the collection time in the merchant system.
##outer_idNo NoThe collection channel parameter is used to identify the channel value for this collection.
signature is - Signature, the merchant signs the parameters in the interface list according to the specified method. The signature method uses SHA1. See the specific signature scheme below; the merchant signs it according to the specifications and then passes it in.

Signature instructions

1. Change api_ticket (Special note: api_ticket is more secure than appsecret, and at the same time Compatible with the appsecret used in older versions of the document as a signature certificate.), timestamp, card_id, code, openid, nonce_str value values ​​are sorted in lexicographic order of strings.

2. Concatenate all parameter strings into one string and perform sha1 encryption to obtain signature.

3. The timestamp and nonce fields in signature must be consistent with the timestamp and nonce_str fields in card_ext.

4.code=jonyqin_1434008071, timestamp=1404896688, card_id=pjZ8Yt1XGILfi-FUsewpnnolGgZk, api_ticket=ojZ8YtyVyr30HheH3CM73y7h4jJE, nonce_str=jonyqin then signature=sha1(1 404896688jonyqinjonyqin_1434008071ojZ8YtyVyr30HheH3CM73y7h4jJE pjZ8Yt1XGILfi-FUsewpnnolGgZk)=6b81fbf6af16e856334153b39737556063c82689.

It is strongly recommended that developers use the signature tool SDK in the card and coupon information package to sign or use the debug tool for verification: http://mp .weixin.qq.com/debug/cgi-bin/sandbox?t=cardsign


##cardSign instructions

1. Change api_ticket (Special note: api_ticket is more secure than appsecret, and is compatible with old versions of documents Use the appsecret as the signature certificate.), app_id, location_id, times_tamp, nonce_str, card_id, card_type value values ​​to sort the strings in lexicographic order.

2. Concatenate all parameter strings into one string and perform sha1 encryption to obtain cardSign.


Appendix 5-Common Errors and Solutions

Pass when calling the config interface Enter the parameter debug: true to enable debug mode, and the page will alert an error message. The following are common errors and solutions:

1.invalid url domain The domain name of the current page is not bound to the appid used. Please confirm that the bound domain name is filled in correctly. Only 80 is supported ( http) and 443 (https), so there is no need to fill in the port number (one appid can be bound to three valid domain names).

2. invalid signature signature error. It is recommended to check in the following order:

1. Confirm that the signature algorithm is correct, available http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign page tool for verification.

2. Confirm that the nonceStr (standard capital S in camel case in js) and timestamp in the config are consistent with the corresponding noncestr and timestamp used in the signature.

3. Confirm that the url is the complete url of the page (please confirm on the current page alert(location.href.split('#')[0])), including the 'http(s)://' part ,as well as'? 'The GET parameter part after ', but does not include the part after '#'hash.

4. Confirm that the appid in config is consistent with the appid used to obtain jsapi_ticket.

5. Make sure to cache access_token and jsapi_ticket.

6.Make sure that the URL you obtain for signing is obtained dynamically. For dynamic pages, please refer to the PHP implementation in the example code. If it is a static page of html, the url is passed to the backend for signature through ajax on the front end. The front end needs to use js to get the link of the current page except the '#' hash part (can be obtained by location.href.split('#')[0], and encodeURIComponent is required), because once the page is shared, the WeChat client will add other parameters at the end of your link. If the current link is not obtained dynamically, the signature of the shared page will fail.

3.the permission value is offline verifyingThis error is because the config is not executed correctly, or the JSAPI being called is not passed into the jsApiList parameter of the config. It is recommended to check in the following order:

1. Confirm that the config is passed correctly.

2. If JSAPI is called when the page is loaded, it must be written in the callback of wx.ready.

3. Confirm that the jsApiList parameter of config contains this JSAPI.

4.permission denied The official account does not have permission to use this JSAPI, or the JSAPI being called is not passed into the jsApiList parameter of config (some interfaces require authentication before they can be used).

5.function not existThe current client version does not support this interface, please upgrade to the new version to experience it.

6. Why is config: ok in version 6.0.1, but not ok after version 6.0.2 (because there is no permission verification before version 6.0.2, so the config is ok, but This does not mean that the signature in your config is OK. Please check whether the correct signature is generated in 6.0.2 to ensure that the config is also OK in higher versions.)

7. Sharing is not possible on iOS and Android (please confirm that the official account has been authenticated. Only certified official accounts have the permission to share related interfaces. If it is indeed authenticated, check whether the listening interface is in wx.ready Triggered in the callback function)

8. After the service is online, the jsapi_ticket cannot be obtained. There is no problem when testing by yourself. (Because access_token and jsapi_ticket must be cached on your own server, otherwise the frequency limit will be triggered after going online. Please make sure to cache the token and ticket to reduce 2 server requests. This will not only avoid triggering the frequency limit, but also speed up your own services. Speed. Currently, 10,000 acquisitions are provided for the convenience of testing. After exceeding the threshold, the service will no longer be available. Please ensure that access_token and jsapi_ticket are globally cached before the service goes online. Both are valid for 7200 seconds, otherwise once Going online triggers frequency limits and the service will no longer be available).

9. How to upload multiple images with uploadImage (currently only supports uploading one image at a time. For multiple images, you need to wait for the previous image to be uploaded before calling this interface)

10. Unable to preview locally selected images (the chooseImage interface itself supports preview and does not require additional support)

11. Jump to link b through link a (for example, first authorize login through WeChat), invalid signature fails (the link to generate the signature in the background is the current link using jssdk, which is the link b after the jump) , please do not use the authorized link for WeChat login for signature calculation. The background signature URL must be the complete URL of the current page of jssdk minus the '#' part)

12. config appears: fail error (this is caused by incomplete config parameters passed in, please make sure to pass in the correct appId, timestamp, nonceStr, signature and jsApiList to be used)

13. How to put jsapi Multimedia resources uploaded to WeChat are downloaded to your own server (please refer to the notes on the uploadVoice and uploadImage interfaces in the document)

14. Android uploads to the WeChat server through jssdk, and the third party then downloads it from When WeChat is downloaded to its own server, there will be noise (the WeChat team has fixed this problem, and the backend has been optimized and online now)

15. Bind the parent domain name and check whether its subdomain names are also available. (Yes, legal subdomain names are fully supported after binding the parent domain name)

16. In the iOS WeChat version 6.1, the external links of shared pictures are not displayed. Only pictures linked within the official account page or pictures from the WeChat server can be displayed. This has been fixed in 6.2

17. Do you need to make compatibility with lower versions yourself? (jssdk is compatible with lower versions, and there is no need for third parties to do more work. However, some interfaces are newly introduced in 6.0.2, and only new versions are available. Only then can it be called)

18. The payment signature of the official account is invalid and the transaction cannot be initiated (please make sure that the jweixin.js you are using is the official online version, which can not only reduce user traffic , it is also possible to fix some bugs and copy them to third-party servers for use. The official will not provide guarantee for any problems that arise)

19. Currently the Android WeChat client does not Supports the new H5 features of pushState, so using pushState to implement web app pages will cause the signature to fail. This problem has been fixed in Android 6.2

20.uploadImage is in the callback of chooseImage Sometimes Android will not execute. Android6.2 will solve this problem. If you need to support lower versions, you can put the call uploadImage in setTimeout and delay it by 100ms.

21.require subscribe error description: The test account is not subscribed, and this error will only appear for the test account

22. The coordinates returned by getLocation are biased in openLocation, because getLocation returns gps coordinates, and the Tencent map opened by openLocation is Mars coordinates, which requires a third party to perform the conversion. Since version 6.2, direct acquisition of Mars coordinates has been supported.

23. View the official account (not added): "menuItem:addContact" is not displayed. Currently, only links spread from the official account can be displayed. The source must be the official account

24. ICP filing data synchronization is delayed for one day, so please bind on the second day

Appendix 6-DEMO page and sample code

##DEMO page:

http://demo.open.weixin.qq.com/jssdk

1475985030261979.jpg

Sample code:

##http://demo.open.weixin.qq .com/jssdk/sample.zip

Note: The link contains sample codes for php, java, nodejs and python for third-party reference. Third-party must remember to Cache the obtained accesstoken and jsapi_ticket to ensure that the frequency limit is not triggered.

Appendix 7-Problem Feedback

Email address: weixin-open@qq.com

Email subject: [WeChat JS-SDK feedback]

Email content description:

Describe the problem in concise language Please provide a clear explanation of the situation in which you encountered the problem. You can attach a screenshot. The WeChat team will handle your feedback as soon as possible.