vue微信分享 vue实现当前页面分享其他页面


Posted in Javascript onDecember 02, 2017

本文实例为大家分享了vue微信分享展示的具体代码,供大家参考,具体内容如下

首先以分享给朋友为例

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 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JQuery实现的图文自动轮播效果插件
Jun 19 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
将 vue 生成的 js 上传到七牛的实例
Jul 28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
微信小程序可滑动月日历组件使用详解
Oct 21 Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
JS笛卡尔积算法与多重数组笛卡尔积实现方法示例
Dec 01 #Javascript
利用JS测试目标网站的打开响应速度
Dec 01 #Javascript
You might like
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
php版本的cron定时任务执行器使用实例
2014/08/19 PHP
php提高网站效率的技巧
2015/09/29 PHP
WordPress中查询文章的循环Loop结构及用法分析
2015/12/17 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Javascript基础教程之break和continue语句
2015/01/18 Javascript
jQuery中extend函数详解
2015/07/13 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
react高阶组件经典应用之权限控制详解
2017/09/07 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
Spring Boot/VUE中路由传递参数的实现代码
2018/03/02 Javascript
Vue项目中使用Vux的安装过程
2018/05/01 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python开发之函数定义实例分析
2015/11/12 Python
python实现人民币大写转换
2018/06/20 Python
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
Python多图片合并PDF的方法
2019/01/03 Python
Python实现语音识别和语音合成功能
2019/09/20 Python
Python random模块制作简易的四位数验证码
2020/02/01 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
马德里著名的运动鞋商店:NOIRFONCE
2019/04/12 全球购物
介绍一下Linux文件的记录形式
2013/09/29 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
2015年工程师工作总结
2015/04/30 职场文书
CSS中理解层叠性及权重如何分配
2022/12/24 HTML / CSS