记录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 相关文章推荐
javascript开发中因空格引发的错误
Nov 08 Javascript
基于jQuery的history历史记录插件
Dec 11 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
javaScript数组迭代方法详解
Apr 14 Javascript
浅析Bootstrip的select控件绑定数据的问题
May 10 Javascript
AngularJs Understanding the Model Component
Sep 02 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
Jul 20 Javascript
js canvas实现简单的图像扩散效果
Jun 28 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
Aug 01 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
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
php权重计算方法代码分享
2014/01/09 PHP
PHP语法自动检查的Vim插件
2014/08/11 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
IOS 开发之NSDictionary转换成JSON字符串
2017/08/14 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
JavaScript中的私有成员
2006/09/18 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
jQuery实现放大镜效果实例代码
2016/03/17 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
python批量导出导入MySQL用户的方法
2013/11/15 Python
python实现sublime3的less编译插件示例
2014/04/27 Python
利用python如何处理nc数据详解
2018/05/23 Python
Django添加feeds功能的示例
2018/08/07 Python
对Pytorch神经网络初始化kaiming分布详解
2019/08/18 Python
python GUI库图形界面开发之PyQt5信号与槽的高级使用技巧(自定义信号与槽)详解与实例
2020/03/06 Python
python爬虫用mongodb的理由
2020/07/28 Python
浅谈HTML5 FileReader分布读取文件以及其方法简介
2017/11/09 HTML / CSS
Bugatchi官方网站:男士服装在线
2019/04/10 全球购物
香港彩色隐形眼镜在线商店:Stunninglens(全球免费送货)
2019/05/10 全球购物
应聘护士自荐信
2013/10/21 职场文书
军人违纪检讨书
2014/02/04 职场文书
2014年文学毕业生自我鉴定
2014/04/23 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
python非标准时间的转换
2021/07/25 Python