Basic instructions
Instructions for use
1. Import JS files
Introduce the following JS file into the page that needs to call the JS interface (supports https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Note: Supports loading using AMD/CMD standard module loading method
2. Inject the configuration config interface
All pages that need to use JSSDK must first inject configuration information, otherwise they will not be called (the same URL only needs to be called once, and the SPA web app that changes the URL can be called every time the URL changes).
wx.config({
debug: true, // Turn on debugging mode. 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 out through the log, only on the PC side. will print.
appId: '', // Required, the unique identifier of the official account
timestamp: , // Required, timestamp to generate signature
nonceStr: '', // Required, generate a random string of signature
signature: '',//Required, signature, see Appendix 1
jsApiList: [] // Required, a list of JS interfaces that need to be used. For a list of all JS interfaces, see Appendix 2
});
3. Verify 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 an asynchronous operation on the client side, so if you need to call the relevant interface when the page is loaded, you must put the relevant The interface is called in the ready function to ensure correct execution. For interfaces that are called only when triggered by the user, they can be called directly and do not need to be placed in the ready function.
});
4. Verification failure 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 the config or in the returned res parameter. For SPA, the signature can be updated here.
});
Interface calling instructions
All interfaces are called through wx objects (jWeixin objects can also be used). The parameter is an object. In addition to the parameters that need to be passed by each interface itself, there are also the following common parameters:
success: The callback function executed when the interface call is successful.
fail: The callback function executed when the interface call fails.
complete: The callback function executed when the interface call is completed, regardless of success or failure.
cancel: The callback function when the user clicks cancel. It is only used by some APIs where the user cancels the operation.
trigger: A method that is triggered when a button in the Menu is clicked. This method only supports related interfaces in the Menu.
The above functions all have a parameter of type object. In addition to the data returned by each interface itself, there is also a general attribute errMsg, whose value format is as follows:
When the call is successful: "xxx:ok", where xxx is the name of the called interface
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, the available API value is true, and the unavailable API value is false
// For example: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});
Sharing interface
Get the click status of the "Share to Moments" button and customize the sharing content interface
wx.onMenuShareTimeline({
Title: '', // Share title
Link: '', // Share link
imgUrl: '', // Share icon
success: function () {
//Callback function executed after the user confirms sharing
},
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 left blank, the default is link
dataUrl: '', // If type is music or video, a data link must be provided, which is empty by default
success: function () {
//Callback function executed after the user confirms sharing
},
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 () {
//Callback function executed after the user confirms sharing
},
cancel: function () {
//Callback function executed after the user cancels sharing
}
});
Get the click status of the "Share to Tencent Weibo" button and customize the sharing content interface
wx.onMenuShareWeibo({
Title: '', // Share title
desc: '', // Share description
Link: '', // Share link
imgUrl: '' // Share icon
success: function () {
//Callback function executed after the user confirms sharing
},
cancel: function () {
//Callback function executed after the user cancels sharing
}
});
Image interface
Interface for taking pictures or selecting pictures from the mobile phone album
wx.chooseImage({
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 picture interface
wx.previewImage({
Current: '', // Currently displayed image link
urls: [] // List of image links that need to be previewed
});
Upload picture interface
wx.uploadImage({
localId: '', // The local ID of the image to be uploaded, obtained through the chooseImage interface
isShowProgressTips: 1// The default is 1, showing progress tips
Success: function (res) {
var serverId = res.serverId; // Return the server ID of the image
}
});
Note: You can use the WeChat download multimedia file interface to download uploaded pictures. The serverId obtained here is media_id. Refer to the document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
Download picture interface
wx.downloadImage({
serverId: '', // The server ID of the image to be downloaded, obtained through the uploadImage interface
isShowProgressTips: 1// The default is 1, showing progress tips
Success: function (res) {
var localId = res.localId; // Return the local ID after downloading the image
}
});
Audio Interface
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, obtained through the stopRecord interface
});
Pause playback interface
wx.pauseVoice({
LocalId: '' // The local ID of the audio that needs to be paused, obtained through the stopRecord interface
});
Stop playback interface
wx.stopVoice({
LocalId: '' // The local ID of the audio that needs to be stopped, obtained through the stopRecord interface
});
Interface for monitoring voice playback completion
wx.onVoicePlayEnd({
ServerId: '', // The server ID of the audio to be downloaded is obtained through the uploadVoice interface
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, obtained through the stopRecord interface
isShowProgressTips: 1// The default is 1, showing progress tips
Success: function (res) {
var serverId = res.serverId; // Return the server ID of the audio
}
});
Note: The uploaded voice can be downloaded through the WeChat multimedia file download interface. The serverId obtained here is media_id, refer to the document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
Download voice interface
wx.downloadVoice({
serverId: '', // The server-side ID of the audio to be downloaded, obtained through the uploadVoice interface
isShowProgressTips: 1// The default is 1, showing progress tips
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, obtained from the recording related interface
isShowProgressTips: 1, //The default is 1, showing progress tips
success: function (res) {
alert(res.translateResult); // Speech recognition results
}
});
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. Default is max
infoUrl: '' // The hyperlink displayed at the bottom of the viewing location interface can be clicked to jump
});
Get geographical location interface
wx.getLocation({
Timestamp: 0, // Location signature timestamp, only provided when compatible with versions before 6.0.2
nonceStr: '', // Position signature random string, only provided when compatible with versions before 6.0.2
addrSign: '', // Location signature, only provided when compatible with versions before 6.0.2, see Appendix 4
for details
Success: function (res) {
var longitude = res.longitude; // Latitude, floating point number, range is 90 ~ -90
var latitude = res.latitude; // Longitude, floating point number, range is 180 ~ -180.
var speed = res.speed; // Speed, in meters/second
var accuracy = res.accuracy; // Position accuracy
}
});
Interface operation
Hide the menu interface in the upper right corner
wx.hideOptionMenu();
Display the menu interface in the upper right corner
wx.showOptionMenu();
Close the current web window interface
wx.closeWindow();
Batch hidden function button interface
wx.hideMenuItems({
menuList: [] // Menu items to be hidden, see Appendix 3 for all menu items
});
Batch display function button interface
wx.showMenuItems({
menuList: [] // Menu items to be displayed, see Appendix 3
for all menu items
});
Hide all non-basic button interfaces
wx.hideAllNonBaseMenuItem();
Show all function button interfaces
wx.showAllNonBaseMenuItem();
Scan on WeChat
Open the WeChat scanning interface
wx.scanQRCode({
desc: 'scanQRCode desc',
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 whether to scan a QR code or a 1D code, both are available by default
success: function () {
var result = res.resultStr; // When needResult is 1, the result returned by scanning the QR code
}
});
Harvest address
Edit shipping address interface
wx.editAddress(
Timestamp: 0, // Location signature timestamp, only provided when compatible with versions before 6.0.2
nonceStr: '', // Position signature random string, only provided when compatible with versions before 6.0.2
addrSign: '', // Location signature, only provided when compatible with versions before 6.0.2, see Appendix 4
for details
Success: function (res) {
var userName = res.userName; // Consignee’s name
var telNumber = res.telNumber; // Consignee’s phone number
var postalCode = res.postalCode; // Postal code
var provinceName = res.provinceName; // First-level address of national standard delivery address
var cityName = res.cityName; // National standard delivery address second-level address
var countryName = res.countryName; // National standard delivery address third-level address
var address = res.address; // Detailed shipping address information
var nationalCode = res.nationalCode; // Country code of shipping address
}
});
Get the nearest shipping address interface
wx.getLatestAddress({
Timestamp: 0, // Location signature timestamp, only provided when compatible with versions before 6.0.2
nonceStr: '', // Position signature random string, only provided when compatible with versions before 6.0.2
addrSign: '', // Location signature, only provided when compatible with versions before 6.0.2, see Appendix 4
for details
Success: function (res) {
var userName = res.userName; // Consignee’s name
var telNumber = res.telNumber; // Consignee’s phone number
var postalCode = res.postalCode; // Postal code
var provinceName = res.provinceName; // First-level address of national standard delivery address
var cityName = res.cityName; // National standard delivery address second-level address
var countryName = res.countryName; // National standard delivery address third-level address
var address = res.address; // Detailed shipping address information
var nationalCode = res.nationalCode; // Country code of shipping address
}
});
WeChat Store
Jump to WeChat product page interface
wx.openProductSpecificView({
productId: '', // product id
viewType: '' // 0. Default value, ordinary product details page 1. Scan product details page 2. Store product details page
});
WeChat Card Coupon
Calling up the list of cards and coupons applicable to the store and getting the user selection list
wx.chooseCard({
shopId: '', // StoreId
CardType: '', // Card type
CardId: '', // Card coupon Id
timeStamp: 0, // Card signature timestamp
nonceStr: '', // Card signature random string
cardSign: '', //Card and coupon signature, see Appendix 6
for details
Success: function (res) {
var cardList= res.cardList; // Card list information selected by the user
}
});
Batch adding interface for cards and coupons
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
}
});
View the card and coupon interface in the WeChat card package
wx.openCard({
cardList: [{
cardId: '',
code: ''
}]// List of cards and coupons that need to be opened
});
WeChat Pay
Initiate a WeChat payment request
wx.chooseWXPay({
timestamp: 0, // Payment signature timestamp
noncestr: '', // Payment signature random string
package: '', // Order details extension string, see Appendix 5
for details
paySign: '', // Payment signature, see Appendix 5 for details
});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
