记录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 相关文章推荐
判断多个input type=file是否有已经选择好文件的代码
May 23 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
Nov 02 Javascript
AngularJS动态菜单操作指令
Apr 25 Javascript
Angularjs修改密码的实例代码
May 26 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
Dec 06 Javascript
发布订阅模式在vue中的实际运用实例详解
Jun 09 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
mayfish 数据入库验证代码
2010/04/30 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
js一组验证函数
2008/12/20 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jquery获取html元素的绝对位置和相对位置的方法
2014/06/20 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
jquery图片滚动放大代码分享(2)
2015/08/28 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
AngularJS 支付倒计时功能实现思路
2017/06/05 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
vue项目使用微信公众号支付总结及遇到的坑
2018/10/23 Javascript
webpack4之如何编写loader的方法步骤
2019/06/06 Javascript
在vue中使用防抖函数组件操作
2020/07/26 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
20招让你的Python飞起来!
2016/09/27 Python
python conda操作方法
2019/09/11 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
在主流系统之上安装Pygame的方法
2020/05/20 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
C#面试题问题集
2016/04/02 面试题
审计工作个人的自我评价
2013/12/25 职场文书
国贸专业的职业规划范文
2014/01/23 职场文书
小学生家长评语大全
2014/02/10 职场文书
植树节标语
2014/06/27 职场文书
体育个人工作总结
2015/02/09 职场文书
标准版个人借条怎么写?以及什么是借条?
2019/08/28 职场文书