微信jssdk用法汇总

本文针对微信jssdk用法进行了详细汇总，分享给大家，供大家参考，具体内容如下
1.绑定域名
2.引入js文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
请注意，如果你的页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK
3.通过config接口注入权限验证配置
这一步是通过用当前的url向后台发请求拿到一系列参数。即后台会拿我的url去向微信进行认证。这里需要注意的事用于验证的当前的url写法，
let url = location.href.split（‘#"）[0];
务必写成以上形势。否则会在进行config时报invalid signature，
确认url是页面完整的url（请在当前页面alert（location.href.split（"#"）[0]）确认），包括"http（s）://"部分，以及"？"后面的GET参数部分,但不包括"#"hash后面的部分。
确保你获取用来签名的url是动态获取的，动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去"#"hash部分的链接（可用location.href.split（"#"）[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。
注意这里的动态，不要随便自己拼接，同时encodeURIComponent。

$.ajax（{type:"GET", url: url,dataType: "jsonp"}）.then（（data）=> { wx.config（{ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: "", // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: "", // 必填，生成签名的随机串 signature: "",// 必填，签名，见附录1 jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2}）;}）

4.通过ready接口处理成功验证
config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

wx.ready （（）=> { // alert（"ready"）; //$（"#onMenuShareAppMessage"）.on（"click", （）=> {// 分享给朋友wx.onMenuShareAppMessage（{ title: "", desc: "", link: shareUrl, imgUrl: "", trigger: function （res） { // alert（"用户点击发送给朋友"）; }, success: function （res） { alert（"已分享"）; }, cancel: function （res） { alert（"已取消"）; }, fail: function （res） { alert（JSON.stringify（res））; }}）; //}）; //分享到朋友圈 wx.onMenuShareTimeline（{title: "", // 分享标题link: shareUrl, // 分享链接imgUrl: "", // 分享图标success: function （） {alert（"已分享"）; // alert（$（".no-num"）.html（））;},cancel: function （） {alert（"已取消"）; // 用户取消分享后执行的回调函数 // alert（"取消"）;} }）;}）;

5.通过error接口处理失败验证
config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看

wx.error（（res）=> {alert（res.errMsg）;}）

6.基础接口
•分享到朋友圈接口

 wx.onMenuShareTimeline（{ title: "", // 分享标题 link: "", // 分享链接 imgUrl: "", // 分享图标 success: function （） { // 用户确认分享后执行的回调函数 }, cancel: function （） { // 用户取消分享后执行的回调函数 }}）;

•分享给好友的接口

 wx.onMenuShareAppMessage（{ title: "", // 分享标题 desc: "", // 分享描述 link: "", // 分享链接 imgUrl: "", // 分享图标 type: "", // 分享类型,music、video或link，不填默认为link dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空 success: function （） { // 用户确认分享后执行的回调函数 }, cancel: function （） { // 用户取消分享后执行的回调函数 }}）;

如果这里需要在分享的内容中加入用ajax异步请求拿到的内容，必须在ajax请求返回后的成功函数中再调用一次该分享接口，但是必须将分享接口放在wx.ready函数中，不能单独调用。因为客户端分享操作是一个同步操作，这时候使用 ajax的数据还没有返回。
7. 这些步骤看起来似乎比较简单，但是调试的过程中难免会遇到很多问题，因为jssdk接口还是有很多的限制的。一不小心就踩到了坑。

8. 最后，我将这个接口进行了一下封装。

"use strict";let wxDefaultOptions = { debug: true, appId: "", timestamp: 0, nonceStr: "", signature: "", jsApiList: [ "checkJsApi", "onMenuShareTimeline", "onMenuShareAppMessage", "onMenuShareQQ", "onMenuShareWeibo", "hideMenuItems", "showMenuItems", "hideAllNonBaseMenuItem", "showAllNonBaseMenuItem", "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;}//分享到朋友圈let shareSocial = （param）=> { wx.onMenuShareTimeline（{ title: param.title, // 分享标题 link: param.link, // 分享链接 imgUrl: param.imgUrl, // 分享图标 success: function （） { // 用户确认分享后执行的回调函数param.suCallback（）; }, cancel: function （） { // 用户取消分享后执行的回调函数param.failCalback（）; }}）;}//分享给好友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（（）=> {//分享到朋友圈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,//更改配置 callWx, //默认配置，进行config配置 和ready后定制微信分享内容,}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。