vue搭建的公众号微信分享功能

微信分享，这里要注意的是，获取签名参数时，前端传的URL是#前面部分，所以要截取一下，否则即使能分享，分享的信息也是默认的，不能修改成传过来的标题和其他想要修改的数据

import request from '../request/http'
import Vue from 'vue'
import {
  Toast
} from 'vant'
Vue.use(Toast)
import api from '../request/api'

export default {
  /* 微信分享 */
  creatWxShare: function (options) {
    request({
      url: api.requestApi.index.share_url,
      data: {
        url: window.location.href.split('#')[0]
      }
    }).then(function (res) {
      var shareMsg = res.jssdkconfig
      wx.config({
        // debug: true, //生产环境需要关闭debug模式
        appId: shareMsg.appId, //appId通过微信服务号后台查看
        timestamp: shareMsg.timestamp, //生成签名的时间戳
        nonceStr: shareMsg.nonceStr, //生成签名的随机字符串
        signature: shareMsg.signature, //签名
        jsApiList: [ //需要调用的JS接口列表
          'updateAppMessageShareData', //分享给好友
          'updateTimelineShareData', //分享到朋友圈
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
          "showMenuItems"
        ]
      })

      wx.ready(function () {
        wx.checkJsApi({
          jsApiList: ["showMenuItems", "updateAppMessageShareData", "updateTimelineShareData"],
          success: function (res) {
            wx.showMenuItems({
              menuList: [
                'menuItem:share:appMessage', //发送给朋友
                'menuItem:share:timeline' //分享到朋友圈
              ]
            })
          }
        })

        //分享到朋友圈
        wx.updateTimelineShareData({
          title: options.title, // 分享标题
          desc: options.desc, //分享描述
          link: options.link, // 分享链接
          imgUrl: options.imgUrl, // 分享图标
          success: function () {
            Toast('分享链接已生成')
          }
        })

        //分享给朋友
        wx.updateAppMessageShareData({
          title: options.title, // 分享标题
          desc: options.desc, // 分享描述
          link: options.link, // 分享链接
          imgUrl: options.imgUrl, // 分享图标
          success: function () {
            Toast('分享链接已生成')
          }
        })
      })

    }).catch(() => {
      Toast('系统异常！')
    })
  }
}

有疑问的可以留言

如果对你有帮助，点个赞再走吧~谢谢
关注我，不定时分享技术干货~