微信JS-SDK的使用，及遇到的问题

微信JS-SDK说明文档地址

必要的前提准备

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是得到的返回值
});
复制代码

转载于:https://juejin.im/post/5a2f9f3251882531e944c7e6