vue在微信分享和分享当前页面再次分享显示签名失败的处理

申明：文章属博主原创，如有转载请经过博主同意，否则必将追究责任。准备工作：1.绑定域名先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。备注：登录后可在“开发者中心”查看对应的接口权限。2.引入微信jssdk在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1....

小狼子丶

4360人浏览 · 2018-09-14 14:56:28

小狼子丶 · 2018-09-14 14:56:28 发布

申明：文章属博主原创，如有转载请经过博主同意，否则必将追究责任。

准备工作：

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入微信jssdk

在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

备注：支持使用 AMD/CMD 标准模块加载方法加载

说明：这里版本也可以使用1.2.0，但是我觉得还是按照最新的版本走，基本没错

3.微信的wx_config信息的获取

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用,目前Android微信客户端不支持pushState的H5新特性，所以使用pushState来实现web app的页面会导致签名失败，此问题会在Android6.2中修复）。

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

注意：appId可以自行填写，当然如果方便的话直接让你们后端将appId给你就行了，这里的字段都使用的是驼峰式写法，签名的时间戳、生成签名随机传串、签名前端可以自己获取，但是需要后端将你加入白名单，因为要获取签名必须要获取access_token到前端，这就导致了很不安全因素（很多大佬都说将access_token千万不要给前端），所以强烈建议在后端获取，当然要获取的话微信文档也有说明，不难，但这里就不做说明了，因为基本没人傻到从在前端通过xhr（全文的xhr均为ajax和axios或者基于XMLHttpRequest的技术）获取access_token再去签名

好，将以上工作交给后端之后我们只需要做的是从后端获取到想要的信息就行了

然后执行wx_ready()方法（如果你非要问我什么是wx_ready()，我建议你看看文档）

值得说一下的是，jsApiList这个数组里面需要填写的是微信的分享方式列表'onMenuShareAppMessage', 'onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo', 'onMenuShareQZone'；分别是分享给好友、朋友圈、qq好友、腾讯微博、QQ空间，但是很多朋友可能会在看完文档之后问我说为什么不用新方法，我用了，但是一直在报错我也不知道是什么鬼。另外这里jsApiList里面的所有方法列表必须都要在wx_ready方法里面写出来，不然也会报错这里小狼子给大家封装了一个方法：

	wx_share(share_obj) {
	            wx.config(share_obj.config);
	            let wx_content = share_obj.content;
	            wx.ready(()=> {
	                // 分享给朋友
	                wx.onMenuShareAppMessage({
	                    title: wx_content.title, // 分享标题
	                    desc: wx_content.desc, // 分享描述
	                    link: wx_content.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	                    imgUrl: wx_content.imgUrl, // 分享图标
	                    type: wx_content.type,  // 分享类型,music、video或link，不填默认为link
	                    dataUrl: wx_content.dataUrl,    // 如果type是music或video，则要提供数据链接，默认为空
	                    success: wx_content.success,
			            cancel: wx_content.cancel,
			            fail: wx_content.fail,
			            complete: wx_content.complete,
			            trigger: wx_content.trigger
	                })
	                // 分享到朋友圈
	                wx.onMenuShareTimeline({
	                    title: wx_content.title, // 分享标题
	                    link: wx_content.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	                    imgUrl: wx_content.imgUrl, // 分享图标
	                    success: wx_content.success,    
			            cancel: wx_content.cancel,
			            fail: wx_content.fail,
			            complete: wx_content.complete,
			            trigger: wx_content.trigger
	                })
	                // 分享到QQ
	                wx.onMenuShareQQ({
	                    title: wx_content.title, // 分享标题
	                    desc: wx_content.desc, // 分享描述
	                    link: wx_content.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	                    imgUrl: wx_content.imgUrl, // 分享图标
	                    success: wx_content.success,
			            cancel: wx_content.cancel,
			            fail: wx_content.fail,
			            complete: wx_content.complete,
			            trigger: wx_content.trigger
	                })
	                // 分享到腾讯微博
	                wx.onMenuShareWeibo({
	                    title: wx_content.title, // 分享标题
	                    desc: wx_content.desc, // 分享描述
	                    link: wx_content.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	                    imgUrl: wx_content.imgUrl, // 分享图标
	                    success: wx_content.success,
			            cancel: wx_content.cancel,
			            fail: wx_content.fail,
			            complete: wx_content.complete,
			            trigger: wx_content.trigger
	                })
	                // 分享到QQ空间
	                wx.onMenuShareQZone({
	                    title: wx_content.title, // 分享标题
	                    desc: wx_content.desc, // 分享描述
	                    link: wx_content.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	                    imgUrl: wx_content.imgUrl, // 分享图标
	                    success: wx_content.success,
			            cancel: wx_content.cancel,
			            fail: wx_content.fail,
			            complete: wx_content.complete,
			            trigger: wx_content.trigger
	                })
	            })

具体使用方法如下（直接在xhr获取到数据之后在success函数里面执行就是了）：

	wx_share({
             config: {
                debug: false,
                appId: 获取到的appid,
                timestamp: 获取到的timestamp,
                nonceStr: 获取到的nonceStr,
                signature: 获取到的signature,
                jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline','onMenuShareQQ','onMenuShareWeibo', 'onMenuShareQZone']
              },
            content: {
                 title: '小狼子',
                 desc: '小狼子是个大菜鸡',
                 link: '获取到的url',
                 imgUrl: '分享的图片路径',
                 type: 'link',   // 分享类型,music、video或link，不填默认为link
                 dataUrl: '',    // 如果type是music或video，则要提供数据链接，默认为空
                 success() {
                     //你的成功回调                            
		},
                cancel() {
		     // 取消分享回调
                 },
		fail(){
		   // 接口调用失败时执行的回调函数。
		},
		complete() {
		   // 接口调用完成时执行的回调函数，无论成功或失败都会执行。
		},
		trigger() {
		   // 监听Menu中的按钮点击时触发的方法，该方法仅支持Menu中的相关接口。
		}
            }
        })

好了，现在当config配置没问题的时候打开界面你会看到errMsg 提示OK然后就可以分享了。

大家可能更关注的是微信二次分享之后提示签名错误的这个问题吧，经过小狼子研究发现了一个问题，那就是openid的获取，因为用户每次打开就会获取一个微信的openid 那么当前用户分享之后下次打开更改了一个openid这会让微信认为你其实分享了另外一个链接，所以第二次分享其实提示的是签名错误，所以我们要准备这么几项工作：

1.把需要分享的页面url传给后端，让后端返回给你，然后前端在这里进行截取，去掉所有参数。

2.分享的url不能写死3.写一个脚本，在页面onload的时候判断你的地址栏是否有openid，如果有就让它什么也不做，否则的话利用微信获取openid的那个连接：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=appidappid&uri=url&response_type=code&scope=snsapi_base&connect_redirect=1#wechat_redirect

贴出代码如下：

	if(getQueryString('openId')){
		this.userInfo.openid = this.getQueryString('openId');
	}else{
		const wx_uri = `你后端给你获取openid的链接`;
		window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=${wx_uri}&response_type=code&scope=snsapi_base&connect_redirect=1#wechat_redirect`;
	}
	// 需要注意的是getQueryString(参数名)这个方法是一个获取地址栏参数的方法
	getQueryString(name){
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if(r!=null)return unescape(r[2]); return null;
	}

这样就可以形成一个效果，那就是每次分享出来的链接都没有openid，所以每次都回去获取一次openid的授权，这样就可完成无限分享

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^