简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

WeChat JS interface summary and detailed explanation of usage_javascript skills

WBOY
Release： 2016-05-16 16:21:22
Original
1352 people have browsed it

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).

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

wx.previewImage({
Current: '', // Currently displayed image link
urls: [] // List of image links that need to be previewed
});

Upload picture interface

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

wx.startRecord();

Stop recording interface

Copy code The code is as follows:

wx.stopRecord({
Success: function (res) {
      var localId = res.localId;
}
});

Monitoring recording automatic stop interface

Copy code The code is as follows:

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

Copy code The code is as follows:

wx.playVoice({
LocalId: '' // The local ID of the audio to be played, obtained through the stopRecord interface
});

Pause playback interface

Copy code The code is as follows:

wx.pauseVoice({
LocalId: '' // The local ID of the audio that needs to be paused, obtained through the stopRecord interface
});


Stop playback interface

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code 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 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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

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

Copy code The code is as follows:

wx.openCard({
cardList: [{
cardId: '',
code: ''
}]// List of cards and coupons that need to be opened
});

WeChat Pay

Initiate a WeChat payment request

Copy code The code is as follows:

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
});
Related labels：
WeChat
source：php.cn
Previous article："JavaScript DOM Programming Art" Reading Notes DOM Basics_javascript skills Next article：Example of usage of append() method in jQuery_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
The query and formula form the entire table, with new columns, where the new columns are formulas involving other conditional column values EDIT: The formula should be the "value" column - the "value" column wi...
From 2024-04-06 21:23:40
0
2
530
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Trouble getting specific statistics (Stats) from PokeAPI using Axios and Node.js I have a problem, I'm trying to use the PokemonAPI, but when I try to access the attack, H...
From 2024-04-06 18:46:35
0
1
464
How do I get my image to appear on the page's main display? What I want to do is receive some photos using NASAAPI. These photos are then displayed on...
From 2024-04-06 15:33:12
0
1
433
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！