关灯
开启左侧

vue实现微信分享功能

[复制链接]
小川 发表于 2018-12-20 11:33:06 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
1.引入微信js
  1. <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
复制代码

2.从后台获取签名并分享

  1. fenxiangFun(){//详情分享
  2. var that = this;
  3. this.$http({
  4. url:this.changeData() + '/member/weChatShare',
  5. method: "post",
  6. params: {
  7.   url : window.location.href.split('#')[0]
  8. }
  9. }).then(function(res){
  10. // console.log(res)
  11. wx.config({
  12.   //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  13.   appId: res.data.appId, // 必填,公众号的唯一标识
  14.   timestamp: res.data.timestamp, // 必填,生成签名的时间戳
  15.   nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  16.   signature: res.data.signature,// 必填,签名
  17.   jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填,需要使用的JS接口列表
  18. });
  19.   
  20. wx.ready(function(){
  21.   // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
  22.   //分享给朋友
  23.   wx.onMenuShareAppMessage({
  24.   title: that.projectDetail.project_name, // 分享标题
  25.   desc: '卖铺宝', // 分享描述
  26.   link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  27.   imgUrl: that.projectPic[0], // 分享图标
  28.   type: '', // 分享类型,music、video或link,不填默认为link
  29.   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
  30.   success: function () {
  31.    // 用户点击了分享后执行的回调函数
  32.   }
  33.   });
  34.   
  35.   //分享到朋友圈
  36.   wx.onMenuShareTimeline({
  37.   title: that.projectDetail.project_name, // 分享标题
  38.   link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  39.   imgUrl: that.projectPic[0], // 分享图标
  40.   success: function () {
  41.    // 用户点击了分享后执行的回调函数
  42.   }
  43.   });
  44. });
  45. wx.error(function(res){
  46.   // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  47. });
  48. }.bind(this)).catch(function(err){
  49. console.log("商店详情页面错误:",err)
  50. });
  51. },
复制代码

3.ios兼容性问题

  1. beforeRouteEnter (to, from, next) {
  2. var u = navigator.userAgent;
  3. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  4. // XXX: 修复iOS版微信HTML5 History兼容性问题
  5. if (isiOS && to.path !== location.pathname) {
  6. // 此处不可使用location.replace
  7. location.assign(to.fullPath)
  8. } else {
  9. next()
  10. }
  11. },
复制代码

[color=white !important]
  1. beforeRouteEnter (to, from, next) {
  2. var u = navigator.userAgent;
  3. var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
  4. // XXX: 修复iOS版微信HTML5 History兼容性问题
  5. if (isiOS && to.path !== location.pathname) {
  6. // 此处不可使用location.replace
  7. location.assign(to.fullPath)
  8. } else {
  9. next()
  10. }
  11. },
复制代码





[color=white !important]
  1. fenxiangFun(){//详情分享
  2. var that = this;
  3. this.$http({
  4. url:this.changeData() + '/member/weChatShare',
  5. method: "post",
  6. params: {
  7.   url : window.location.href.split('#')[0]
  8. }
  9. }).then(function(res){
  10. // console.log(res)
  11. wx.config({
  12.   //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  13.   appId: res.data.appId, // 必填,公众号的唯一标识
  14.   timestamp: res.data.timestamp, // 必填,生成签名的时间戳
  15.   nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
  16.   signature: res.data.signature,// 必填,签名
  17.   jsApiList: ["onMenuShareAppMessage","onMenuShareTimeline"] // 必填,需要使用的JS接口列表
  18. });
  19.   
  20. wx.ready(function(){
  21.   // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
  22.   //分享给朋友
  23.   wx.onMenuShareAppMessage({
  24.   title: that.projectDetail.project_name, // 分享标题
  25.   desc: '卖铺宝', // 分享描述
  26.   link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  27.   imgUrl: that.projectPic[0], // 分享图标
  28.   type: '', // 分享类型,music、video或link,不填默认为link
  29.   dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
  30.   success: function () {
  31.    // 用户点击了分享后执行的回调函数
  32.   }
  33.   });
  34.   
  35.   //分享到朋友圈
  36.   wx.onMenuShareTimeline({
  37.   title: that.projectDetail.project_name, // 分享标题
  38.   link: window.location.href.split('#')[0], // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  39.   imgUrl: that.projectPic[0], // 分享图标
  40.   success: function () {
  41.    // 用户点击了分享后执行的回调函数
  42.   }
  43.   });
  44. });
  45. wx.error(function(res){
  46.   // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
  47. });
  48. }.bind(this)).catch(function(err){
  49. console.log("商店详情页面错误:",err)
  50. });
  51. },
复制代码






 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 最佳新人

    注册账号后积极发帖的会员

1关注

1粉丝

114帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-9988-316

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )