微信公众号h5分享踩坑记录

微信公众号h5分享踩坑记录

开发uniapp的H5应用时，有个场景是需要在公众号分享链接，需要用到微信的jssdk
官方的文档一言难尽分享一下踩坑记录和关键点

一、需要后端配合校验

如果他让你自己写，建议你俩直接决斗
js安全域名，ip白名单一定要设置
校验域名和分享返回的地址一定要相同一个符号都不能少

二、前端部分

npm install jweixin-module --save

				const jweixin = require('jweixin-module');
				let urlStr = '需要分享的域名'; //获取当前url为签名认证地址
				let that = this;
				that.$myRequest({
					url:'/api/user/getconfig',
					method:'POST',
					data:{
						url:urlStr
					}
				}).then(res=>{
					jweixin.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
						appId: res.data.appId, // 必填，公众号的唯一标识  
						timestamp: res.data.timestamp, // 必填，生成签名的时间戳  
						nonceStr: res.data.nonceStr, // 必填，生成签名的随机串  
						signature: res.data.signature, // 必填，签名
						jsApiList: [
							"updateAppMessageShareData",
							"updateTimelineShareData",
							"onMenuShareAppMessage"
						]
					});
					that.$myRequest({
						url:'/api/setting/share',
						method:'POST',
						data:{
							
						}
					}).then(data=>{
						// console.log(data);
						jweixin.ready(function() {
							console.log('验证正确显示ready');
							if(jweixin.updateAppMessageShareData){
								console.log('updateAppMessageShareData')
								jweixin.updateAppMessageShareData({
									title: data.data.title, // 分享标题
									desc: data.data.content, // 分享描述
									link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
									imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标                                
									success: function(a) {  
										// 用户确认分享后执行的回调函数
										console.log('确认成功',a);
									},  
									cancel: function() {  
										// 用户取消分享后执行的回调函数  
									}  
								});
								jweixin.updateTimelineShareData({
									title: data.data.title, // 分享标题
									desc: data.data.content, // 分享描述
									link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
									imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标                                
									success: function(a) {  
										// 用户确认分享后执行的回调函数
										console.log('确认成功',a);
									},  
									cancel: function() {  
										// 用户取消分享后执行的回调函数  
									}  
								});
							}else{
								console.log('onMenuShareAppMessage');
								jweixin.onMenuShareAppMessage({
									title: data.data.title, // 分享标题
									desc: data.data.content, // 分享描述
									link: data.data.link, // 分享链接要和分享校验的域名一样**完全一样一个符号都不要少
									imgUrl: urlStr+'/uploads/attachment/' + data.data.pic, // 分享图标                                
									success: function(a) {  
										// 用户确认分享后执行的回调函数
										console.log('确认成功',a);
									},  
									cancel: function() {  
										// 用户取消分享后执行的回调函数  
									}  
								});
							}
						})
						jweixin.error(function(res1){
						  // config信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的debug模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
						  console.error('验证错误显示',res1);
						});
					})
				})