Vue使用微信JS-SDK实现分享功能

1、通过npm安装微信的js-sdk，或者在index.html页面中直接加script标签来引用，这里采用npm安装，

npm install weixin-js-sdk

在需要分享的页面中引入

import wx from 'weixin-js-sdk'

2、调后端接口获取需要传的参数数据

3、通过config接口注入权限验证配置

完整代码如下：

http.fetchPost('/ncov2019/wxForward', params).then((res) => {      
  console.log('data', res.data)
  const { WXparams, imgUrl, link, title, desc } = res.data 
  wx.config({         
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。 
    appId: WXparams.appId, // 必填，公众号的唯一标识     
    timestamp: WXparams.timestamp, // 必填，生成签名的时间戳         
    nonceStr: WXparams.noncestr, // 必填，生成签名的随机串
    signature: WXparams.signature,// 必填，签名 
    jsApiList: [           
      "updateAppMessageShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
      "updateTimelineShareData", // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容 
      "onMenuShareWeibo" // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    ] // 必填，需要使用的JS接口列表         ]
  })       
  wx.ready(function(){         
    wx.checkJsApi({           
      jsApiList: [             
        "updateAppMessageShareData", // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容           
        "updateTimelineShareData", // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容         
        "onMenuShareWeibo" // 获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口] 必填，需要使用的JS接口列表  
      ]        
    })  
    wx.updateAppMessageShareData({           
      title: title, // 分享标题           
      desc: desc, // 分享描述           
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致          
      imgUrl: imgUrl, // 分享图标           
      success: () => {           },          
      cancel: () => {             
        alert('您已取消分享！')           
      }         
    })         
  // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
    wx.updateTimelineShareData({          
      title: title, // 分享标题           
      desc: desc, // 分享描述           
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致           
      imgUrl: imgUrl, // 分享图标           
      success: () => {           },           
      cancel: () => {             
        alert('您已取消分享！')           
      }         
    })   
  })    
})

最后编辑于：2020.02.10 15:07:14