android 系统分享微信提示获取资源失败分享微信获取资源失败

2024-07-12 23:01| 来源: 网络整理| 查看: 265

最近开发一个Vue开发公众号项目，遇到微信config签名失败的问题，在网上了也搜了很多资料，但没有什么实际的效果。后来自己研究了一下。找到一种解决的办法。

微信sdk Config的接入就不做阐述了。https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html 文档有详细说明

本章主要记录一下微信分享的问题。

首先我碰到的问题是微信授权后跳转到首页后签名失败，导致wx.getLocation获取不到用户的地理位置,无法从后端获取数据

wx.getLocation({ type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02' success: function (res) { that.params.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90 that.params.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。 // 保存获取的经纬度 that.$store.commit('setUserPos', { latitude: res.latitude, longitude: res.longitude }) // console.log(this.$store.state.userPos,'userPos---') that.getGameList(); }, fail: function (res) { Toast.clear(); that.getGameList(); } });

后面我尝试先写一个死的经纬度给后端调取数据，去别的页面看config签名有没有问题。发现一个共同点，就是location.href没带参数的会签名成功，带了的会签名失败，之后与后端探讨了一下，后端发现是因为我们把链接都传过去的时候他们会把参数单独解析，

也就是说他们只签名location.search前面的链接，所以会报错; 因后端的方法都是封装好了的。他们不愿意改，唉，卑微前端。

之后尝试过百度上的各种方法，无实际效果，

后来突发奇想想到一个解决方案好像可行。就实际操作了一下。

首先。准备一个main的空白页首页。专门作为跳转，接受参数的

{ path: '/', name: 'main', meta: {}, component: () => import('./views/main') },

里面内容如下：

mounted() { 　　　　　　let search = decodeURIComponent(location.search); 　　search = search.substring(1); 　　　　　 if (search.indexOf('&') > -1) { search=search.substring(0,search.indexOf('&')); } 　　　　　　//path:这样操作后我们需要发分享的router带出。拼到search里path=router, if (search.indexOf('path')>-1) { let dataList = search.split('?'); let obj = {}; dataList.forEach((item) => { let current = item.split('='); return obj[current[0]] = current[1] }) 　　　　　　　//这里问什么不用query呢，因为你用query，参数会拼接到location.href里。后面页面需要签名又会失败，所以只能用params this.$router.push({ name: obj.path.substring(1), params: obj }) 　　　　　　//obj.path.substring(1) 因为我分享的时候拿的是pathname 会有一个"/" 　　　　　　}else{ 　　　　　　　　this.$router.push({path:'/Home'}) } 　　　　　　},

分享的链接

this.getWXConfig(null, { title: 'xxxxx', text: this.detailInfo.name, img: this.$store.state.ossUrl + this.detailInfo.matchImg, query: location.origin + '/' + '?path=' + location.pathname + '?id=' + this.detailInfo.id + '?latitude=' + this.homeParamsData.latitude + '?longitude=' + this.homeParamsData.longitude }) 　　　　　　　　//至于我为什么用问号拼接呢，就有一个很离谱的问题，我用 & 拼接，微信授权回调回来的时候只有?的参数。就很奇怪，自己也懒得研究这种问题了 - -

个人定义的一个公共config方法

Vue.prototype.getWXConfig = function (callBack,data) { //callback。因为是异步的。需要的时候穿回调进来 let url=location.href 　　　　//把所有的参数都去掉就完事了 if(url.indexOf('code')>-1){ url=url.substring(0,url.indexOf('code')-1) } let shareData if(data){ shareData ={ title: data.title , img:data.img, link:data.query , // 分享链接，该链接域名或路径必须与当前页面对应的 // imgUrl: shareData.img, // 分享图标 desc: data.text, } }else{ shareData={ title: 'miss' , img:'https://eco-culture.oss-cn-shenzhen.aliyuncs.com', link: url, // 分享链接，该链接域名或路径必须与当前页面 // imgUrl: shareData.img, // 分享图标 desc: "shang miss", } } console.log(shareData.link,'分享的链接') this.$axios.get('authorized/getJsSignature', { params: { url:url, } }).then(res => { if (res.code == 200) { let conf = res.data; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 appId: '00000000', // timestamp: Number(conf.timestamp), // 必填，生成签名的时间戳 nonceStr: conf.noncestr, // 必填，生成签名的随机串 signature: conf.signature,// 必填，签名 jsApiList: [ 'updateAppMessageShareData',//分享给朋友 "updateTimelineShareData", "openLocation", "chooseWXPay", "getLocation", "onMenuShareTimeline", "onMenuShareAppMessage", ], // 必填，需要使用的JS接口列表 success:()=>{ } }); wx.ready(() => { callBack && callBack() if(wx.updateAppMessageShareData){ wx.updateAppMessageShareData({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的 imgUrl: shareData.img, // 分享图标 desc: shareData.desc, // 分享描述 success: function () { console.log(shareData,'设置分享成功') }, fail: function (error) { console.log(error, '设置分享失败'); } }); } else{ wx.onMenuShareAppMessage({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的 imgUrl: shareData.img, // 分享图标 desc: shareData.desc, // 分享描述 success:function () { console.log("设置分享内容") }, fail:function (error) { console.log(error,"设置分享失败") } }); } if(wx.updateTimelineShareData){ wx.updateTimelineShareData({ title: shareData.title,// 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的 gUrl: shareData.img, desc: shareData.desc,// 分享描述 success: function () { console.log('设置朋友圈成功') }, fail: function (error) { console.log(error,"设置分享失败") } }); } else{ wx.onMenuShareTimeline({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的 imgUrl: shareData.img, // 分享图标 desc: shareData.desc, // 分享描述 success:function () { console.log("设置分享内容") }, fail:function (error) { console.log(error,"设置分享失败") } }); } }); wx.checkJsApi({ jsApiList: [ 'updateAppMessageShareData',//分享给朋友 "updateTimelineShareData", "openLocation", "chooseWXPay", "getLocation", "onMenuShareTimeline", "onMenuShareAppMessage", ], // 必填，需要使用的JS接口列表// 需要检测的JS接口列表，所有JS接口列表见附录2, success: function(res) { console.log(res,'API') // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} }, fail:function (res) { console.log(res,'申请的wxAPI列表错误') } }); wx.error((res) =>{ }) } }) };

后面用这种方法实现的功能，记录一下。也希望能帮到有用的朋友，并不是所有的问题都可以只有解决，我只是针对我遇到的问题提出了一种解决方案

【本文地址】

公司简介

联系我们

android 系统分享微信提示获取资源失败 分享 微信 获取资源失败

android 系统分享微信提示获取资源失败分享微信获取资源失败