uniapp关于分享签名授权问题（已解决IOS和安卓兼容问题）

我会带着你远行 2023-07-25 14:06 6阅读 0赞

[微信分享官方API][API]  
**我是自己分开写的js文件 share.js**

import wx from 'weixin-js-sdk'
    
    
    export function getShareInfo(fxUrl) {  //如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
         //请求接口获得appId 签名 签名时间戳 还有签名的随机串
    	this.$http.request({ 
    			url: 'akt-web-auth/share-jssdk/get-share-info',
    			data: { 
    				jsurl: fxUrl
    			}
    		})
    		.then(res => { 
    			console.log(res.data);
    			// localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
    			//拿到后端给的这些数据
    			let appId = res.data.result.appId;
    			let timestamp = res.data.result.timestamps;
    			let nonceStr = res.data.result.nonceStr;
    			let signature = res.data.result.sign;
    			wx.config({ 
    				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    				appId: appId, // 必填，公众号的唯一标识，填自己的！
    				timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
    				nonceStr: nonceStr, // 必填，生成签名的随机串
    				signature: signature, // 必填，签名，
    				jsApiList: [
    					'updateAppMessageShareData',
    					'updateTimelineShareData'
    				]
    			})
    			wx.ready(function(e) { 
    				//分享给朋友
    				wx.updateAppMessageShareData({ 
    					title: '偷偷告诉你，《安全生产考试真题》练3天就通过，马上开始真题练习', // 分享时的标题
    					desc: '一比一国家题库真题，立刻点击了解……',
    					link: 'http://akt.jianxiangtech.com/anktWeb', // 分享时的链接
    					imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png', // 分享时的图标
    					success: function() { 
    						console.log("分享成功");
    					},
    					cancel: function() { 
    						console.log("取消分享");
    					}
    				});
    				//分享给朋友圈
    				wx.updateTimelineShareData({ 
    					title: '偷偷告诉你，《安全生产考试真题》练3天就通过，马上开始真题练习',
    					desc: '一比一国家题库真题，立刻点击了解……',
    					link: 'http://akt.jianxiangtech.com/anktWeb',
    					imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png',
    					success: function() { 
    						console.log("分享成功");
    					},
    					cancel: function() { 
    						console.log("取消分享");
    					}
    				});
    			})
    		})
    }

**我全局挂载了一下方法 在main.js里**

import { getShareInfo} from '' //引用上面的share.js文件
    Vue.prototype.$share = getShareInfo;

使用方法

//this.$share(获取当前页面的url地址传给后台,share.js文件中的fxUrl就是接收的这个参数)
    this.$share(location.href.split('#')[0])

示例是这样的：  
![在这里插入图片描述][20200415142903314.png]  
ps：如果你遇到安卓或者IOS签名不对

1、首先与后台确定签名是否是对的

2、确定授权方式进入首页有没有进行多次重定向（我就是遇到多次重定向导致IOS分享签名报错） 因为IOS的SPA是不会自动刷新的 安卓的SPA是会自动刷新的 而且就算你打印出来或者alert出来都是对的 但是签名就是无效或者错误

3、如果还是不对 检查自己传给后台的url是不是对的

我目前就遇到了这几个问题 如果想多传几个参数那就自己在fxUrl后面加参数传递就好

[API]: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#10
[20200415142903314.png]: /images/20230528/2fa364074ac64c76a877c705d08a8916.png