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 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jQuery each()小议
Mar 18 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
微信小程序实现图片轮播及文件上传
Apr 07 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
jQuery实现table表格checkbox全选的方法分析
Jul 04 jQuery
BootStrap table实现表格行拖拽效果
Dec 01 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
微信小程序向Java后台传输参数的方法实现
Dec 10 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
在php中使用sockets:从新闻组中获取文章
2006/10/09 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
菜鸟javascript基础资料整理3 正则
2010/12/06 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
document.addEventListener使用介绍
2014/03/07 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
js操作数组函数实例小结
2015/12/10 Javascript
BootStrap 超链接变按钮的实现方法
2016/09/25 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
NodeJS加密解密及node-rsa加密解密用法详解
2018/10/12 NodeJs
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
vue 在单页面应用里使用二级套嵌路由
2020/12/19 Vue.js
Handtrack.js库实现实时监测手部运动(推荐)
2021/02/08 Javascript
python发腾讯微博代码分享
2014/01/10 Python
Python模拟登录的多种方法(四种)
2018/06/01 Python
python学生管理系统学习笔记
2019/03/19 Python
Python object类中的特殊方法代码讲解
2020/03/06 Python
python自动生成证件号的方法示例
2021/01/14 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
美国牛仔品牌:True Religion
2018/11/16 全球购物
个性化皮包、小袋、生活配件:Mon Purse
2019/03/26 全球购物
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
历史学专业大学生找工作的自我评价
2013/10/16 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
企业消防安全责任书
2014/07/23 职场文书
病危通知书样本
2015/04/17 职场文书
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
html中两种获取标签内的值的方法
2022/06/16 jQuery