记录vue做微信自定义分享的一些问题


Posted in Javascript onSeptember 12, 2019

前言

众所周知,在使用vue做项目的时候,微信自定义分享一直是一个坑,只是ios上坑明显的多。

然后每次遇到问题都要度娘很久。

奇怪的是貌似和很多人遇到的问题一样,但是他们写的解决方案都没办法直接解决我遇到的问题。

这里就记录一下遇到过的一些坑,和解决方式。

目前项目里面,安卓和ios上面的自定义分享已经没有什么问题了。

问题及解决方式

hash模式

在微信的官方文档中,提到关于jsapi_ticket的签名算法中,生成签名的时候,当前网页的URL,不包含#及其后面的部分;而且自定义分享出去的链接,微信也会主动往链接的后面拼接一些参数,比如from之类的;这也就造成了一些问题,比如要么签名不正确,要么分析那个出去的链接,二次分享又回出问题。

那么我这里的解决方式就是直接不用hash模式了,问题又多,链接也不好看,直接使用mode: 'history'。

切换页面签名失效

这个在网上也有很多解决方案。由于我这里的项目里不需要细致到每个页面都必须做自定义分享,只需要在触发某些条件的时候触发自定义分享,所以是这么做的。

在main.js文件中编写自定义分享的函数逻辑;

// 微信自定义分享
Vue.prototype.wxShare = async function ({title , desc , link = window.location.href,imgUrl ,success}) {
  let that = this;
  // 当前页面地址
  let url = window.location.href;
  // 调用后端服务获取微信签名内容
  let {data: wxCfg} = await that.ajax({api: that.api.wechatGetWxSdk, data: {url: url}})
  if (!wx || !wxCfg) return;
  wx.config({
    debug: false,
    appId: wxCfg.appId,
    timestamp: wxCfg.timestamp,
    nonceStr: wxCfg.nonceStr,
    signature: wxCfg.signature,
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage']
  });
  wx.ready(function () {
    wx.updateAppMessageShareData({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.updateTimelineShareData({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareTimeline({
      title: title, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
    wx.onMenuShareAppMessage({
      title: title, desc: desc, link: link, imgUrl: imgUrl,
      success: function () {
        success ? success() : ''
      }
    })
  })
  wx.error(function (res) {
    that.$toast('请刷新当前页面后重试')
  });
}

在需要调用自定义分享的时候,就这样调用

await this.wxShare({
  title: '分享的标题', 
  desc: '分享的摘要',
  link: '分享出去的链接地址',
  imgUrl: '分享的封面图',
  success: function(){
    // 调用成功的回调
  }
})

IOS路由跳转之后依然签名失效

上面的问题解决之后,项目上线了,很多ios的用户反馈个别页面还是无法成功调用自定义分享,前期的解决方案很暴力...怼用户,让用户刷新一下当前页面,诶不成想,就好了!

后来越来越多的反馈..没办法了,必须得想想辙解决一下...

就开始找原因,发现android一点问题没有。

但是在ios上,无论路由跳转多少次,复制出来的链接都是首次进入的页面的链接,于是改造一下上面的调用函数。
首先记录首次进入页面的url

Vue.prototype.firstUrl = window.location.href;

然后在wxShare函数中加了一个判断。

大致意思就是判断当前设备是不是ios,如果是,签名用的url就使用firstUrl,如果不是,就使用window.location.href

然后上线,发现就没有再出过问题咯。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
Jquery中offset()和position()的区别分析
Feb 05 Javascript
jquery实现简单的遮罩层
Jan 08 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
微信小程序 教程之条件渲染
Oct 18 Javascript
EasyUI 结合JS导出Excel文件的实现方法
Nov 10 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
从零学习node.js之利用express搭建简易论坛(七)
Feb 25 Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 Javascript
js 根据对象数组中的属性进行排序实现代码
Sep 12 #Javascript
JavaScript和TypeScript中的void的具体使用
Sep 12 #Javascript
微信小程序页面调用自定义组件内的事件详解
Sep 12 #Javascript
基于JavaScript 实现拖放功能
Sep 12 #Javascript
Node.JS用纯JavaScript生成图片或滑块式验证码功能
Sep 12 #Javascript
layui 对table中的数据进行转义的实例
Sep 12 #Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
PHP 类商品秒杀计时实现代码
2010/05/05 PHP
修改PHP的memory_limit限制的方法分享
2012/02/21 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
safari下载文件自动加了html后缀问题
2018/11/09 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JQuery扩展插件Validate 5添加自定义验证方法
2011/09/05 Javascript
js window.open弹出新的网页窗口
2014/01/16 Javascript
node.js中的forEach()是同步还是异步呢
2015/01/29 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
JavaScript对Json的增删改属性详解
2016/06/02 Javascript
js实现String.Fomat的实例代码
2016/09/02 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
2018/08/25 Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
2018/09/26 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
详解Django中的form库的使用
2015/07/18 Python
python 遍历字符串(含汉字)实例详解
2017/04/04 Python
Django 实现下载文件功能的示例
2018/03/06 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
python中文分词库jieba使用方法详解
2020/02/11 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
Unix控制后台进程都有哪些进程
2016/09/22 面试题
入党自我评价范文
2014/02/02 职场文书
个人求职信范文
2014/05/24 职场文书
企业安全生产标语
2014/06/06 职场文书
教师工作总结范文2014
2014/11/10 职场文书
3.15消费者权益日活动总结
2015/02/09 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
导游词之清晏园
2019/11/22 职场文书
nginx反向代理配置去除前缀案例教程
2021/07/26 Servers
Java日常练习题,每天进步一点点(38)
2021/07/26 Java/Android
python实现学员管理系统(面向对象版)
2022/06/05 Python