博客

1、首先明确一点，目前为止微信是不支持在h5中自定义按钮直接实现分享功能的，但是可以配置分享内容，可以监听是否分享成功。

2、然后实现分享监听是需要后端接口支持的

3、实现过程：（建议使用老接口时，引用的版本也低一点）

1）进入时判断是否有code，没有要通过微信的api去请求

    this.code = ''
    var appid = 'xxx'
    const code = this.getUrlParam('code'); //是否存在code
    let local = encodeURIComponent(window.location.href);//获取当前url
    if (code == null || code === '') { // 如果没有code，则去请求
        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=wecedirect`
      } else {
        // 你自己的业务逻辑
        this.code = code
        var data = {
          code: this.code
        }
        this.getopenid_data(data)
      }

2）获取accessToken和临时签名ticket，调用config和onMenuShareTimeline

config用来获取权限，

async getopenid_data(data) {
      let code = ""
      if (location.href.indexOf('code') !== -1) {
        code = location.href.split('code=')[1]
      }
      this.getDetail()
      // 获取用户信息 accessToken 我们的后端接口
      const res = await fetchGet('............./wechat/userInfo', data)
      if (res.resp_code === 0)
      this.accessToken = res.datas.access_token
      this.guestName = res.datas.nickname
      this.guestSex = res.datas.sex
      this.guestOpenId = res.datas.openid
      const timeCode = new Date().getTime()
      const nonceStr = Math.random().toString(36).substr(2, 15)
      const wx_localUrl = location.href.split('#')[0]
       // 获取临时签名 我们的后端接口
      const res2 = await fetchGet('....../wechat/getticket', { accessToken: this.accessToken })
      var resobj = JSON.parse(res2.datas)
      var signatureText = 'jsapi_ticket=' + resobj.ticket + '&noncestr=' + nonceStr + '&timestamp=' + timeCode + '&url=' + wx_localUrl;//拼接字符串
      wx.config({
        debug: false,
        appId: 'xxxxx', // 公众号的唯一标识
        timestamp: timeCode, //生成签名的时间戳
        nonceStr: nonceStr, // 生成签名的随机串
        signature: sha1(signatureText),// 签名，sha1加密
        jsApiList: ['onMenuShareTimeline', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
      })
      var that = this
      wx.ready(function () { //和config一起调用时要用ready，否则可以不用
        wx.onMenuShareTimeline({
          title: that.contentTitle, 
          desc: that.contentTitle, 
          link: that.shareUrl,
          imgUrl: '',
          success: function (data) { // 用户点击了分享后执行的回调函数
            console.log('分享埋点触发')
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            console.log(111, 'cancel')
          }
        })
      })
    },

3）导入需要的包

import sha1 from 'js-sha1'
import wx from 'weixin-js-sdk';

4）sdk指令

npm i -S weixin-js-sdk
npm install sha1 --save