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