This article summarizes the usage of WeChat jssdk and shares it with you for your reference. The specific content is as follows
1. Bind the domain name
2.Introduce js file
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
Please note that if your page has https enabled, be sure to introduce https://res.wx.qq.com/open/js/jweixin-1.0.0.js, otherwise you will not be able to successfully use JSSDK in iOS9.0 or above systems.
3. Verify configuration through the config interface
This step is to get a series of parameters by sending a request to the background using the current url. That is, the background will use my url to verify it on WeChat. Things to note here are used to verify the current url writing method.
let url = location.href.split('#')[0];
Be sure to write the above situation. Otherwise, the config time invalid signature will be performed.
Confirm that the url is the complete url of the page (please confirm in the current page alert(location.href.split('#')[0])), including the 'http(s): //' part, and '? 'The GET parameter part after it, but does not include the part after '#'hash.
Make sure that the URL you get used to sign is dynamically obtained. You can refer to the implementation method of php in the example code for the dynamic page. If the static page of html is passed to the backend to the signature of the URL through ajax on the front end, the front end needs to use js to get the current page and remove the link to the '#'hash part (you can get the 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 dynamically obtained, the page signature after sharing will fail.
Pay attention to the dynamics here, do not splice it by yourself, and encode URIComponent at the same time.
$.ajax({ type:'GET', url: url, dataType: 'jsonp'}).then((data)=> { 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, the timestamp generated by the signature nonceStr: '', // Required, the random string generated by the signature signature: '', // Required, the signature, see Appendix 1 jsApiList: [] // Required, list of JS interfaces that need to be used, see Appendix 2});})4. Successfully verified through the ready interface processing
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, you must place the relevant interface 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.
wx.ready (()=> { // alert('ready'); //$('#onMenuShareAppMessage').on('click', ()=> { // Share with friends wx.onMenuShareAppMessage({ title: '', desc: '', link: shareUrl, imgUrl: '', trigger: function (res) { // alert('User clicks to send to friends'); }, success: function (res) { alert('Shared'); }, cancel: function (res) { alert('Canceled'); }, fail: function (res) { alert(JSON.stringify(res)); } }); //}); //}); // Share to Moments wx.onMenuShareTimeline({ title: '', // Share title link: shareUrl, // Share link imgUrl: '', // Share icon success: function () { alert('Shared'); // alert($('.no-num').html()); }, cancel: function () { alert('Canceled'); // Callback function executed after user cancels sharing// alert('Canceled'); } }); });5. Failed verification through the error interface
The error function will be executed if the config information fails. If the signature expires, the verification will fail. For specific error messages, you can open the debug mode of config, or you can view it in the returned res parameter.
wx.error((res)=> { alert(res.errMsg);})6. Basic interface
•Share to Moments Interface
wx.onMenuShareTimeline({ title: '', // Share title link: '', // Share link imgUrl: '', // Share icon success: function () { // Callback function executed after the user confirms the sharing}, cancel: function () { // Callback function executed after the user cancels the sharing}});•Interfaces to share with friends
wx.onMenuShareAppMessage({ title: '', // Share title desc: '', // Share description link: '', // Share link imgUrl: '', // Share icon type: '', // Share type, music, video or link, do not fill in the default link dataUrl: '', // If the type is music or video, you need to provide a data link, the default is empty success: function () { // Callback function executed after the user confirms the sharing}, cancel: function () { // Callback function executed after the user cancels the sharing}});If you need to add content obtained with ajax asynchronous request to the shared content here, the sharing interface must be called again in the successful function after the ajax request is returned, but the sharing interface must be placed in the wx.ready function and cannot be called separately. Because the client sharing operation is a synchronous operation, the data using ajax has not been returned yet.
7. These steps seem simple, but there are inevitably many problems during debugging , because the jssdk interface still has many restrictions. I accidentally stepped on the pit.
8. Finally, I encapsulated this interface .
'use strict';let wxDefaultOptions = { debug: true, appId: '', timestamp: 0, nonceStr: '', signature: '', jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'showAllNonBaseMenuItems', 'translateVoice', 'startRecord', 'stopRecord', 'onRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'uploadVoice', 'downloadVoice', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'openLocation', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard' ]};//let shareUrl = 'http://xxx' + location.pathname;let getWxParam = (url, wxOptions) => { let url = location.href.split('#')[0]; url = encodeURIComponent(url); let promise = new Promise((resolve, reject)=> { $.ajax({ type:'GET', url: 'http://xxx/xxx?param='+url, dataType: 'jsonp' }) .then((data)=> { let wxParam = data; console.log(wxParam); wxOptions.appId = 'wxeb5c3f4a03b880f0'; wxOptions.timestamp = wxParam.timestamp; wxOptions.nonceStr = wxParam.nonceStr; wxOptions.signature = wxParam.signature; wx.config(wxOptions); wx.error((res)=> { alert(res.errMsg); }) resolve(); }, (error)=> { console.log(error); }) }); return promise;}//Share to Moments let shareSocial = (param)=> { wx.onMenuShareTimeline({ title: param.title, // Share title link: param.link, // Share link imgUrl: param.imgUrl, // Share icon success: function () { // Callback function param.suCallback() executed after the user confirms the sharing; }, cancel: function () { // Callback function param.failCalback() executed after the user cancels the sharing; } });}//Share to friends let shareToFriends = (param) => { wx.onMenuShareAppMessage({ title: param.title, desc: param.desc, link: param.link, imgUrl: param.imgUrl, trigger: function (res) { }, success: function (res) { param.suCallback(); }, cancel: function (res) { }, fail: function (res) { param.failCalback(); console.alert(JSON.stringify(res)); } });}//title,desc,link,imgUrl,suCallback, failCalbacklet jssdk = (param) => { wx.ready(()=> { //Share to Moments ShareSocial(param); shareToFriends(param); })}function callWx(param, wxoptions) { getWxParam(param.url, wxOptions).then(()=> { jssdk(param); })}//param = {url: '', title:'',desc:'',link:'',imgUrl:'',suCallback:func, failCalback: func}module.exports = { wxDefaultOptions, //Change the configuration callWx, //Default configuration, customize WeChat sharing content after config configuration and ready,}This article has been compiled into "Summary of JavaScript WeChat Development Skills", and everyone is welcome to learn and read.
I would like to recommend a tutorial on WeChat mini program that is highly concerned: "WeChat Mini Program Development Tutorial" has been carefully compiled by the editor of everyone, I hope you like it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.