vue微信分享的实现(在当前页面分享其他页面)


Posted in Javascript onApril 16, 2019

首先以分享给朋友为例

1、先看官方文档

wx.onMenuShareAppMessage({

  title: '', // 分享标题

  desc: '', // 分享描述

  link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

  imgUrl: '', // 分享图标

  type: '', // 分享类型,music、video或link,不填默认为link

  dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空

  success: function () {

    // 用户确认分享后执行的回调函数

  },

  cancel: function () {

    // 用户取消分享后执行的回调函数

  }

});

2、vue分享踩的坑

* 1、微信分享中获取动态的url
* 2、 微信二次分享自动添加的参数     form=singlemessage
* 3、vue中各个页面都可以调用分享

3、直接代码分析

为了保证每个页面都可以调起微信分享,需要在vue根组件中,添加 watch监听

代码

watch: {
    // 监听 $route 变化调用分享链接
    "$route"(to, from) {
      let currentRouter = this.$router.currentRoute.fullPath;  //
      if(currentRouter.indexOf('userShare') == -1){   //如果不是userShare分享页面,则分享另外一个接口
        this.shareOut();
      }else{
        this.shareOutTwo();     //当前页面是userShare页面时分享调用另外一个接口   
      }
    }
  },

4、shareOut()函数

let signStr = '';      //sha1加密字符串
      let timestamp = 1473254558; //时间戳
      let nonceStr = 'shupao';
      var obj = {
        title:"",        //标题
        desc:"文字描述",     //描述
        link:"http://www.XXXXXX.com/wx/pub/sr/simpleRegister.do",
        imgUrl:"http://XXXXXXXXX.com/picactive.jpg"
      };
      this.$ydkAjax({
        SENTYPE: "GET",
        url: this.$domain + '/wx/pub/common/getJsApiTicket.json', //自己服务器获取jsapi_ticket接口
        params: null,
        successFc: (response) => {
          //拼接sha1加密字符串
          signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href;
          var signature = SHA1(signStr);
          wx.config({
            debug: false,
            appId: "wx6957b3a945a05e90",   //appId
            timestamp: timestamp,      //时间戳
            nonceStr: nonceStr,       //加密需要字符串(自己定义的)    
            signature: signature,      //sha1加密后字符串
            jsApiList: [ 'onMenuShareTimeline', 'onMenuShareAppMessage']
          });
          wx.ready(function () {
            //分享到朋友圈"
            wx.onMenuShareTimeline({
              title: obj.title,
              link: obj.link, // 分享链接
              imgUrl: obj.imgUrl, // 分享图标
              success: function () {
                // console.log('分享到朋友圈成功')
              },
              cancel: function () {
                // console.log('分享到朋友圈失败')
              }
            });
            //分享给朋友
            wx.onMenuShareAppMessage({
              title: obj.title, // 分享标题
              desc: obj.desc, // 分享描述
              link: obj.link, // 分享链接
              imgUrl: obj.imgUrl, // 分享图标
              success: function () {
                // console.log('分享到朋友成功')
              },
              cancel: function () {
                // console.log('分享到朋友失败')
              }
            });
          })
        },
        isLayer: false
      })

5、需要注意的事

*1、url是直接通过 window.location.href 获取的,不是使用 window.location.href.split(“#”)[0]来获取, 因为我的vue项目是通过hash模式来进行路由跳转的 , 直接使用 window.location.href.split(“#”)[0]会导致签名失败

//拼接sha1加密字符串
signStr = 'jsapi_ticket=' + response.data.data + '&noncestr=' + nonceStr + '×tamp=' + timestamp + '&url=' + window.location.href

*2、而且我们要在当前页面分享出去之后 , 其他用户打开之后 不是当前分享出去的页面 ,这就需要 调整 shareOut()函数中 obj对象中的 link参数为其他页面链接

6、link参数

上述 5 问题中的加密字符串汇总的 url 和 分享对象中 link中的页面链接可以不用保持一样,因为本来就是要在当前页面分享出去其他页面的链接。网上我看到有人说这两个必须要保持一样,其实没有必要, 除非你只是简单的在vue项目中的其中一个页面做分享 , 然后只分享当前页面才需要让二者保持一致性。

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

Javascript 相关文章推荐
JS弹出对话框返回值代码(asp.net后台)
Dec 28 Javascript
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jQuery之动画效果大全
Nov 09 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
Angular4绑定html内容出现警告的处理方法
Nov 03 Javascript
react build 后打包发布总结
Aug 24 Javascript
vue前端框架—Mint UI详解(更适用于移动端)
Apr 30 Javascript
vue回到顶部监听滚动事件详解
Aug 02 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
在Vue项目中使用snapshot测试的具体使用
Apr 16 #Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 #Javascript
详解vue-cli 脚手架 安装
Apr 16 #Javascript
详解jquery和vue对比
Apr 16 #jQuery
JS使用百度地图API自动获取地址和经纬度操作示例
Apr 16 #Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 #jQuery
vue+element UI实现树形表格带复选框的示例代码
Apr 16 #Javascript
You might like
php下保存远程图片到本地的办法
2010/08/08 PHP
php验证session无效的解决方法
2014/11/04 PHP
php 多个变量指向同一个引用($b = &$a)用法分析
2019/11/13 PHP
js 文本滚动效果的实例代码
2013/08/17 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
EasyUI 中combotree 默认不能选择父节点的实现方法
2016/11/07 Javascript
require、backbone等重构手机图片查看器
2016/11/17 Javascript
微信小程序开发探究
2016/12/27 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
2017/02/21 Javascript
node.js利用redis数据库缓存数据的方法
2017/03/01 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
浅谈mvvm-simple双向绑定简单实现
2018/04/18 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
JavaScript canvas实现跟随鼠标移动小球
2021/02/09 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
python和shell实现的校验IP地址合法性脚本分享
2014/10/23 Python
基python实现多线程网页爬虫
2015/09/06 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
TensorFlow tensor的拼接实例
2020/01/19 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
致800米运动员广播稿
2014/02/16 职场文书
理想演讲稿范文
2014/05/21 职场文书
中层干部培训方案
2014/06/16 职场文书
授权委托书格式
2014/07/31 职场文书
工厂员工辞职信范文
2015/05/12 职场文书
上手简单,功能强大的Python爬虫框架——feapder
2021/04/27 Python
Java内存模型之happens-before概念详解
2021/06/13 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫