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对象所有属性和方法的函数
Oct 16 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
Mar 12 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
JS关闭窗口时产生的事件及用法示例
Aug 20 Javascript
原生js实现图片放大缩小计时器效果
Jan 20 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
Mar 30 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
vue-cli 3 全局过滤器的实例代码详解
Jun 03 Javascript
vue(2.x,3.0)配置跨域代理
Nov 27 Javascript
vue实现广告栏上下滚动效果
Nov 26 Vue.js
在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 Curl出现403错误的解决办法
2014/05/29 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
php实现的太平洋时间和北京时间互转的自定义函数分享
2014/08/19 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
JQuery学习笔录 简单的JQuery
2012/04/09 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
微信小程序使用swiper组件实现类3D轮播图
2018/08/29 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
2019/11/09 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Python爬虫框架Scrapy安装使用步骤
2014/04/01 Python
python3个性签名设计实现代码
2018/06/19 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python list格式数据excel导出方法
2018/10/31 Python
python实现二维数组的对角线遍历
2019/03/02 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
django和vue实现数据交互的方法
2019/08/21 Python
Python图像处理库PIL的ImageEnhance模块使用介绍
2020/02/26 Python
python如何提取英语pdf内容并翻译
2020/03/03 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
在keras中实现查看其训练loss值
2020/06/16 Python
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
JSP&Servlet技术面试题
2015/05/21 面试题
优秀教师的感人事迹
2014/02/04 职场文书
工作求职信
2014/07/04 职场文书
交通安全横幅标语
2014/10/07 职场文书
兵马俑导游词
2015/02/02 职场文书
宾馆安全管理制度
2015/08/06 职场文书
Elasticsearch6.2服务器升配后的bug(避坑指南)
2022/09/23 Servers