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读写(删除)Cookie实例详解
Apr 17 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
Jul 21 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
在Node.js中使用Javascript Generators详解
May 05 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
Vue创建头部组件示例代码详解
Oct 23 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
在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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php遍历所有文件及文件夹的方法深入解析
2013/06/08 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php实现用户登陆简单实例
2017/04/04 PHP
php给数组赋值的实例方法
2019/09/26 PHP
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
js继承call()和apply()方法总结
2014/12/08 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Angular2使用Augury来调试Angular2程序
2017/05/21 Javascript
vue+vue-validator 表单验证功能的实现代码
2017/11/13 Javascript
vue-cli配置文件——config篇
2018/01/04 Javascript
Vue2 轮播图slide组件实例代码
2018/05/31 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
Python中的类与对象之描述符详解
2015/03/27 Python
Python中用PIL库批量给图片加上序号的教程
2015/05/06 Python
Python处理Excel文件实例代码
2017/06/20 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
django 多对多表的创建和插入代码实现
2019/09/09 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
外语系大学生自荐信范文
2014/03/01 职场文书
建材投资建议书
2014/05/16 职场文书
管理标语大全
2014/06/24 职场文书
2014党员整改措施思想汇报
2014/10/07 职场文书
大学生个人学年总结
2015/02/15 职场文书
应聘教师求职信范文
2015/03/20 职场文书
开学典礼致辞
2015/07/29 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
SQL Server删除表中的重复数据
2022/05/25 SQL Server