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

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

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

  1. import wx from 'weixin-js-sdk'
  4. export function getShareInfo(fxUrl) {  //如果分享的内容会根据情况变化，那么这里可以传入分享标题及url
  5.      //请求接口获得appId 签名 签名时间戳 还有签名的随机串
  6.     this.$http.request({ 
  7.             url: 'akt-web-auth/share-jssdk/get-share-info',
  8.             data: { 
  9.                 jsurl: fxUrl
  10.             }
  11.         })
  12.         .then(res => { 
  13.             console.log(res.data);
  14.             // localStorage.setItem("jsapi_ticket", res.jsapi_ticket);
  15.             //拿到后端给的这些数据
  16.             let appId = res.data.result.appId;
  17.             let timestamp = res.data.result.timestamps;
  18.             let nonceStr = res.data.result.nonceStr;
  19.             let signature = res.data.result.sign;
  20.             wx.config({ 
  21.                 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  22.                 appId: appId, // 必填，公众号的唯一标识，填自己的！
  23.                 timestamp: timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
  24.                 nonceStr: nonceStr, // 必填，生成签名的随机串
  25.                 signature: signature, // 必填，签名，
  26.                 jsApiList: [
  27.                     'updateAppMessageShareData',
  28.                     'updateTimelineShareData'
  29.                 ]
  30.             })
  31.             wx.ready(function(e) { 
  32.                 //分享给朋友
  33.                 wx.updateAppMessageShareData({ 
  34.                     title: '偷偷告诉你，《安全生产考试真题》练3天就通过，马上开始真题练习', // 分享时的标题
  35.                     desc: '一比一国家题库真题，立刻点击了解……',
  36.                     link: 'http://akt.jianxiangtech.com/anktWeb', // 分享时的链接
  37.                     imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png', // 分享时的图标
  38.                     success: function() { 
  39.                         console.log("分享成功");
  40.                     },
  41.                     cancel: function() { 
  42.                         console.log("取消分享");
  43.                     }
  44.                 });
  45.                 //分享给朋友圈
  46.                 wx.updateTimelineShareData({ 
  47.                     title: '偷偷告诉你，《安全生产考试真题》练3天就通过，马上开始真题练习',
  48.                     desc: '一比一国家题库真题，立刻点击了解……',
  49.                     link: 'http://akt.jianxiangtech.com/anktWeb',
  50.                     imgUrl: 'http://akt.jianxiangtech.com/aktImg/logo.png',
  51.                     success: function() { 
  52.                         console.log("分享成功");
  53.                     },
  54.                     cancel: function() { 
  55.                         console.log("取消分享");
  56.                     }
  57.                 });
  58.             })
  59.         })
  60. }

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

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

使用方法

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

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

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

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

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

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

发表评论

表情：
评论列表 （有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ios与安卓样式兼容问题

    1.margin在IOS中失效  　　在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制

    电玩女神电玩女神/ 0 赞/ 590 阅读