Basic instructions
Instructions for use
1.Introduce JS files
Introduce the following JS file on the page that needs to call the JS interface (support https): http://res.wx.qq.com/open/js/jweixin-1.0.0.js
Note: Support loading using AMD/CMD standard module loading method
2. Inject and configure the config interface
All pages that need to use JSSDK must first inject configuration information, otherwise they will not be called (the same url needs to be called only once, and the web app of the SPA that changes the url can be called every time the url changes).
The code copy is as follows:
wx.config({
debug: true, // Turn on debug mode, the return values of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side.
appId: '', // Required, the unique identifier of the official account
timestamp: , // Required to generate a signature time stamp
nonceStr: '', // Required to generate a random string of signatures
signature: '',// Required, signature, see Appendix 1
jsApiList: [] // Required, the list of JS interfaces that need to be used, and the list of all JS interfaces is shown in Appendix 2
});
3. Verify through the ready interface
The code copy is as follows:
wx.ready(function(){
// After config information is verified, the ready method will be executed. All interface calls must be obtained after the config interface obtains the result. config is an asynchronous operation of a client. Therefore, if you need to call the relevant interface when the page is loaded, the relevant interface must be placed in the ready function to be called to ensure correct execution. For interfaces that are called only when the user triggers, they can be called directly without putting them in the ready function.
});
4. Verification failed error interface
The code copy is as follows:
wx.error(function(res){
// If the config information verification fails, an error function will be executed. If the signature expires, the verification will fail. For specific error messages, you can open the debug mode of config to view, or you can view it in the returned res parameter. For SPA, you can update the signature here.
});
Interface call instructions
All interfaces are called through wx objects (can also be used with jWeixin objects). The parameters are an object. In addition to the parameters that each interface itself needs to pass, there are also the following general parameters:
success: A callback function executed when the interface is called successfully.
Fail: A callback function executed when an interface calls fail.
complete: The callback function executed when the interface calls complete, and will be executed regardless of success or failure.
cancel: The callback function when the user clicks to cancel, only some APIs that have users cancel operations will be used.
trigger: A method that listens for triggering when a button is clicked in Menu. This method only supports related interfaces in Menu.
The above functions all have a parameter, type object, in addition to the data returned by each interface itself, there is also a common property errMsg, whose value format is as follows:
When the call is successful: "xxx:ok", where xxx is the interface name of the call
When the user cancels: "xxx:cancel", where xxx is the called interface name
When the call fails: its value is specific error message
Basic interface
Determine whether the current client version supports the specified JS interface
The code copy is as follows:
wx.checkJsApi({
jsApiList: ['chooseImage'] // List of JS interfaces that need to be detected, see Appendix 2 for all JS interfaces lists.
success: function(res) {
// Return as key-value pairs, the available api value is true, and not available to 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
The code copy is as follows:
wx.onMenuShareTimeline({
title: '', // Share title
link: '', // Share link
imgUrl: '', // Share icon
success: function () {
// The callback function executed after the user confirms the sharing
},
cancel: function () {
// The callback function executed after the user cancels the sharing
}
});
Get the click status of the "Share to Friends" button and customize the sharing content interface
The code copy is as follows:
wx.onMenuShareAppMessage({
title: '', // Share title
desc: '', // Share the description
link: '', // Share link
imgUrl: '', // Share icon
type: '', // Sharing type, music, video or link, if not filled in, the default is link
dataUrl: '', // If the type is music or video, the data link is to be provided, the default is empty
success: function () {
// The callback function executed after the user confirms the sharing
},
cancel: function () {
// The callback function executed after the user cancels the sharing
}
});
Get the click status of the "Share to QQ" button and customize the sharing content interface
The code copy is as follows:
wx.onMenuShareQQ({
title: '', // Share title
desc: '', // Share the description
link: '', // Share link
imgUrl: '' // Share icon
success: function () {
// The callback function executed after the user confirms the sharing
},
cancel: function () {
// The callback function executed after the user cancels the sharing
}
});
Get the click status of the "Share to Tencent Weibo" button and customize the sharing content interface
The code copy is as follows:
wx.onMenuShareWeibo({
title: '', // Share title
desc: '', // Share the description
link: '', // Share link
imgUrl: '' // Share icon
success: function () {
// The callback function executed after the user confirms the sharing
},
cancel: function () {
// The callback function executed after the user cancels the sharing
}
});
Image interface
Take a picture or select a picture from the mobile phone album interface
The code copy is as follows:
wx.chooseImage({
success: function (res) {
var localIds = res.localIds; // Returns the local ID list of the selected photo. localId can display pictures as the src attribute of the img tag
}
});
Preview picture interface
The code copy is as follows:
wx.previewImage({
current: '', // link to the currently displayed image
urls: [] // List of image links that need to be previewed
});
Upload image interface
The code copy is as follows:
wx.uploadImage({
localId: '', // The local ID of the image to be uploaded, obtained by the choiceImage interface
isShowProgressTips: 1// Default is 1, displaying progress prompts
success: function (res) {
var serverId = res.serverId; // Return the server-side ID of the image
}
});
Note: You can download the uploaded picture by WeChat using the multimedia file interface. The serverId obtained here is media_id. Reference document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
Download picture interface
The code copy is as follows:
wx.downloadImage({
serverId: '', // The server-side ID of the image to be downloaded, obtained from the uploadImage interface
isShowProgressTips: 1// Default is 1, displaying progress prompts
success: function (res) {
var localId = res.localId; // Return the local ID after the image is downloaded
}
});
Audio interface
Start recording interface
The code copy is as follows:
wx.startRecord();
Stop recording interface
The code copy is as follows:
wx.stopRecord({
success: function (res) {
var localId = res.localId;
}
});
Automatic stop interface for monitoring recording
The code copy is as follows:
wx.onVoiceRecordEnd({
// Complete callback will be executed when the recording time is more than one minute and does not stop.
complete: function (res) {
var localId = res.localId;
}
});
Play voice interface
The code copy is as follows:
wx.playVoice({
localId: '' // The local ID of the audio to be played, obtained by the stopRecord interface
});
Pause playback interface
The code copy is as follows:
wx.pauseVoice({
localId: '' // The local ID of the audio that needs to be paused, obtained by the stopRecord interface
});
Stop playback interface
The code copy is as follows:
wx.stopVoice({
localId: '' // The local ID of the audio that needs to be stopped, obtained by the stopRecord interface
});
Monitoring voice playback interface
The code copy is as follows:
wx.onVoicePlayEnd({
serverId: '', // The server-side ID of the audio that needs to be downloaded, obtained from the uploadVoice interface
success: function (res) {
var localId = res.localId; // Return the local ID of the audio
}
});
Upload voice interface
The code copy is as follows:
wx.uploadVoice({
localId: '', // The local ID of the audio that needs to be uploaded, obtained by the stopRecord interface
isShowProgressTips: 1// Default is 1, displaying progress prompts
success: function (res) {
var serverId = res.serverId; // Returns the server-side ID of the audio
}
});
Note: You can download the uploaded voice by WeChat's multimedia file interface. The serverId obtained here is media_id. Reference document../12/58bfcfabbd501c7cd77c19bd9cfa8354.html
Download voice interface
The code copy is as follows:
wx.downloadVoice({
serverId: '', // The server-side ID of the audio that needs to be downloaded, obtained from the uploadVoice interface
isShowProgressTips: 1// Default is 1, displaying progress prompts
success: function (res) {
var localId = res.localId; // Return the local ID of the audio
}
});
Intelligent interface
Identify audio and return to the recognition result interface
The code copy is as follows:
wx.translateVoice({
localId: '', // The local ID of the audio that needs to be identified, obtained from the recording-related interface
isShowProgressTips: 1, // Default is 1, displaying progress prompts
success: function (res) {
alert(res.translateResult); // The result of speech recognition
}
});
Equipment Information
Obtain the network status interface
The code copy is as follows:
wx.getNetworkType({
success: function (res) {
var networkType = res.networkType; // Return network types 2g, 3g, 4g, wifi
}
});
Geographical location
Use the built-in map of WeChat to view location interface
The code copy is as follows:
wx.openLocation({
latitude: 0, // Latitude, floating point number, range 90 ~ -90
longitude: 0, // Longitude, floating point number, range from 180 to -180.
name: '', // Location name
address: '', // Address details
scale: 1, // Map zoom level, shaping value, range from 1 to 28. Default is maximum
infoUrl: '' // The hyperlink displayed at the bottom of the viewing location interface can be clicked to jump
});
Get the geolocation interface
The code copy is as follows:
wx.getLocation({
timestamp: 0, // Location signature timestamp, only provided before version 6.0.2 is required
nonceStr: '', // Location signature random string, only available before version 6.0.2
addrSign: '', // Location signature, only provided before version 6.0.2, see Appendix 4 for details
success: function (res) {
var longitude = res.longitude; // Latitude, floating point number, range 90 ~ -90
var latitude = res.latitude; // Longitude, floating point number, range from 180 to -180.
var speed = res.speed; // Speed, measured in meters per second
var accuracy = res.accuracy; // Position accuracy
}
});
Interface operation
The code copy is as follows:
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 Hide Function Button Interface
wx.hideMenuItems({
menuList: [] // To hide menu items, see Appendix 3
});
Batch display function button interface
wx.showMenuItems({
menuList: [] // All menu items to be displayed are shown in Appendix 3
});
Hide all non-basic button interfaces
wx.hideAllNonBaseMenuItem();
Show all function button interfaces
wx.showAllNonBaseMenuItem();
Scan the WeChat
Click on the WeChat scan interface
wx.scanQRCode({
desc: 'scanQRCode desc',
needResult: 0, // The default is 0. The scan result is processed by WeChat. 1 will directly return the scan result.
scanType: ["qrCode","barCode"], // You can specify whether to scan the QR code or the 1R code, both are default
success: function () {
var result = res.resultStr; // When needResult is 1, the result returned by scanning the code
}
});
Harvest address
Edit delivery address interface
The code copy is as follows:
wx.editAddress(
timestamp: 0, // Location signature timestamp, only provided before version 6.0.2 is required
nonceStr: '', // Location signature random string, only available before version 6.0.2
addrSign: '', // Location signature, only provided before version 6.0.2, see Appendix 4 for details
success: function (res) {
var userName = res.userName; // Name of the consignee
var telNumber = res.telNumber; // Consignee's phone number
var postalCode = res.postalCode; // Postal Code
var provinceName = res.provinceName; // National standard delivery address first level 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 delivery address information
var nationalCode = res.nationalCode; // delivery address country code
}
});
Get the nearest delivery address interface
The code copy is as follows:
wx.getLatestAddress({
timestamp: 0, // Location signature timestamp, only provided before version 6.0.2 is required
nonceStr: '', // Location signature random string, only available before version 6.0.2
addrSign: '', // Location signature, only provided before version 6.0.2, see Appendix 4 for details
success: function (res) {
var userName = res.userName; // Name of the consignee
var telNumber = res.telNumber; // Consignee's phone number
var postalCode = res.postalCode; // Postal Code
var provinceName = res.provinceName; // National standard delivery address first level 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 delivery address information
var nationalCode = res.nationalCode; // delivery address country code
}
});
WeChat store
Jump to WeChat product page interface
The code copy is as follows:
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 coupon
Release the list of card coupons for stores and get the user selection list
The code copy is as follows:
wx.chooseCard({
shopId: '', // Store Id
cardType: '', // Card type
cardId: '', // Card Id
timeStamp: 0, // Card coupon signature time stamp
nonceStr: '', // Random string of card coupon signature
cardSign: '', // For card coupon signature, please refer to Appendix 6 for details
success: function (res) {
var cardList= res.cardList; // User selected card list information
}
});
Add card coupon interface in batches
The code copy is as follows:
wx.addCard({
cardList: [{
cardId: '',
cardExt: ''
}], // List of card coupons to be added
success: function (res) {
var cardList = res.cardList; // Added card coupon list information
}
});
Check the card coupon interface in the WeChat card package
The code copy is as follows:
wx.openCard({
cardList: [{
cardId: '',
code: ''
}]// List of card coupons to be opened
});
WeChat Payment
Initiate a WeChat payment request
The code copy is as follows:
wx.chooseWXPay({
timestamp: 0, // Pay signature timestamp
noncestr: '', // Payment signature random string
package: '', // For order details, please refer to Appendix 5
paySign: '', // Payment signature, see Appendix 5 for details
});