vue 公众号h5分享功能 监听微信右上角..._vue3 公众号 微信引导用户右上角使用打开浏览器页面

vue 公众号h5分享功能 监听微信右上角…

第一步：vue npm下载 weixin-js-sdk

第二步：utils文件夹新建share.js

import wx from 'weixin-js-sdk'
import { getWxGetShareData } from '@/api/Login'

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
const wexinShare = function (shareData) {
  var url = window.location.href
  let params = {
    url: url
  }
  getWxGetShareData(params).then(res => {
    console.log(res.data)
    if (res.data && res.data.code == 200) {
      //分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去
//引用
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉）
        appId: res.data.data.appid, // 必填，公众号的唯一标识
        timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
        signature: res.data.data.signature, // 必填，签名，见附录1
        jsApiList: ['updateAppMessageShareData',
          'updateTimelineShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      })
      wx.ready(function () {
        // //分享到朋友圈”及“分享到QQ空间”
        wx.updateTimelineShareData({
          title: shareData.title, // 分享标题
          link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: shareData.imgUrl, // 分享图标
          success: function (res) {
            // 设置成功
            // console.log('分享朋友圈成功返回的信息为:', res)
          }
        })

        //“分享给朋友”及“分享到QQ”
        wx.updateAppMessageShareData({
          title: shareData.title, // 分享标题
          desc: shareData.desc, // 分享描述
          link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: shareData.imgUrl, // 分享图标
          success: function (res) {
            // console.log('分享朋友成功返回的信息为:', res)
          }
        })
      })
      wx.error(function (res) {
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        console.log('验证失败返回的信息:', res)
      })
    } else {
      this.Toast.fail(res.msg)
    }
  }).catch(err => {
    console.log(err)
  })

}
export default wexinShare
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

说明：import { getWxGetShareData } from ‘@/api/Login’ 是公司后端的接口主要返回
appId: res.data.data.appid, // 必填，公众号的唯一标识
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.data.noncestr, // 必填，生成签名的随机串
signature: res.data.data.signature, // 必填，签名，见附录1
jsApiList: [‘updateAppMessageShareData’,
‘updateTimelineShareData’] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

开发文档：http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html
获取“分享到朋友圈”按钮点击状态及自定义分享内容接口wx.onMenuShareTimeline
获取“分享给朋友”按钮点击状态及自定义分享内容接口onMenuShareAppMessage
怎么监听微信右上角…中底部弹出的转发朋友圈，转发朋友事件
首先先调用配置：

调用完成这个配置后在调用：

然后不管再页面什么情况下点击微信右上角…中底部弹出的转发朋友圈，转发朋友
都会监听到这样就可以再成功的回调中执行自己的代码