必要的前提准备
1.微信认证过的公共号
必须是认证过的,未认证或者认证过期都不行
2.一个域名
需要备案过的
3.一台服务器
前端页面需要的appId、signature是需要后台传递过来的。官方默认后台程序有PHP、Python、Node、Java版本
配置过程
绑定域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”(发布用的那个域名)
获取access_token
这部分工作属于后台开发,主要功能是利用公众号APPID、APPSECRET从微信服务器获取对应的access_token。
前端权限验证配置
步骤一:引入JS文件
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js
步骤二:从后台得到权限验证配置信息
封装权限验证配置信息函数
/**
* 微信授权js-sdk
* @param {*} param0
*/
export const wxConfig = ($appId,$timestamp,$nonceStr,$signature) => {
wx.config({
debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。移动端会通过弹窗来提示相关信息。如果分享信息配置不正确的话,可以开了看对应报错信息
appId: $appId,
timestamp: $timestamp,
nonceStr: $nonceStr,
signature: $signature,
jsApiList: [//需要使用的JS接口列表,分享默认这几个,如果有其他的功能比如图片上传之类的,需要添加对应api进来
'scanQRCode', // 扫一扫
'checkJsApi',
'onMenuShareTimeline', // 分享到微信朋友圈
'onMenuShareAppMessage', // 分享到朋友
'onMenuShareQQ', // 分享到QQ好友
'onMenuShareWeibo' // 分享到微博
]
});
};
封装微信扫一扫的函数
/**
* 调起扫码
*/
export const wxScanQRCode = (successFun) => {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
successFun && successFun(result);
}
});
}
封装微信分享的函数
/**
* 微信分享
*/
export const wxShareConfig = ($imgUrl,$desc,$title,$link,successFun) => {
wx.ready(function () {
wx.onMenuShareAppMessage({
"imgUrl": $imgUrl,//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
"desc" : $desc,//摘要,如果分享到朋友圈的话,不显示摘要。
"title" : $title,//分享卡片标题
"link": $link,//分享出去后的链接,这里可以将链接设置为另一个页面。
"success":function(response){//分享成功后的回调函数
let onMennuShareId = 1;
successFun && successFun(response,onMennuShareId);
},
'cancel': function () {
// 用户取消分享后执行的回调函数
}
});//分享给好友
wx.onMenuShareTimeline({
"imgUrl": $imgUrl,//分享图,默认当相对路径处理,所以使用绝对路径的的话,“http://”协议前缀必须在。
"desc" : $desc,//摘要,如果分享到朋友圈的话,不显示摘要。
"title" : $title,//分享卡片标题
"link": $link,//分享出去后的链接,这里可以将链接设置为另一个页面。
"success":function(response){//分享成功后的回调函数
let onMennuShareId = 3;
successFun && successFun(response,onMennuShareId);
},
'cancel': function () {
// 用户取消分享后执行的回调函数
}
});//分享到朋友圈
});
};
步骤三:获取微信SDK签名,调用微信扫一扫、分享
获取微信SDK签名,开发项目中遇到的问题
需要注意的点: 1.获取签名发送的url一定要是当前页面的url,不然会签名失败; 2.发送的当前url如果没有带参数,然后编码后再发过去,在ios下会出现第一次得到签名时是失败的,刷新后再得到才成功,在安卓下没有问题;解决方法是不带参数的url不用编码 3.发送的当前url如果后面带有参数,不编码发送获取签名是成功的;但是如果是做分享,在分享好的页面如果再要调起微信签名,会签名失败,这种情况就需要编码后才发送url,就可以多次签名都成功
获取微信SDK签名使用方法
/**
*发送当前页面的url,从后台得到相应的appid、timestamp、nonceStr、signature
*/
callAxios({
method: 'get',
url: `${APP_CONFIG.getwechatSign}?url=${window.location.href}`,
})
.then((response) => {
wxConfig(response.data.appId, response.data.timestamp, response.data.nonceStr, response.data.signature);
})
在需要用到分享的页面调用上面封装好的微信分享函数
// 微信自定义分享链接和图文
wxShareConfig($imgUrl,$desc,$title,$link, function(response) {
});
在需要用到扫一扫的地方调用上面封装好微信扫一扫函数
wxScanQRCode (function(response) {
let index = response .lastIndexOf("\,");
response = response .substring(index + 1, response.length);
// response是得到的返回值
});