vue实现微信分享朋友圈和朋友功能

vue实现微信分享朋友圈和朋友功能

需要认证的公众号，在其后台添加一个安全域名，安全域名用于微信的验证，登录后可在“开发者中心”查看对应的接口权限。
开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

具体使用步骤

一、引用JSSDK
1.在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
2.通过npm 引用 微信的js-sdk

npm install weixin-js-sdk --save

二、开始使用

1.在Vue目录下，比如：public文件夹，新建一个wxapi.js文件（名字随你喜洗），贴入下面代码(PS: Axios根据实际情况来使用)：

import wx from 'weixin-js-sdk'
import http from '../public/http' // http是自己封装的axios
const wxApi = {
  wxRegister (callback) {
    // http之所以没有传参是后端直接写参数都写死了，一般会有url：window.location.href.split('#')[0]，可以根据自身需要去改变
    http({method: 'POST', url: '/web/hodge/wxConfig/wxShare'}).then(res => {
      // console.log(res)
      let data = res.data
      if (data.result === 1) {
        let config = data.data
        // config.debug = true
        config.jsApiList = ['updateAppMessageShareData', 'updateTimelineShareData'] // 需要使用的JS接口列表
        wx.config(config)
        wx.ready(() => {
          if (callback) callback()
        })
      }
    }).catch((err) => {
      console.log(err)
    })
  },
  shareAppMessage (option) { // 分享朋友
    wx.updateAppMessageShareData({ 
      title: option.title, // 分享标题
      desc: option.desc, // 分享描述
      link: option.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: option.imgUrl || 'https://images.ktpis.com/app_logo_new_new.png', // 分享图标
      success () {
        if (option.success) option.success()
        // 设置成功
      }
    })
  },
  shareTimeline (option) { // 分享朋友圈
    wx.updateTimelineShareData({ 
      title: option.title, // 分享标题
      link: option.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: option.imgUrl || 'https://images.ktpis.com/app_logo_new_new.png', // 分享图标
      success () {
        if (option.success) option.success()
        // 设置成功
      }
    })
  }
}

export default wxApi

2.在需要使用的vue页面引用

import wxapi from '../public/wxapi'

3.在mounted()中加入调用的代码：

wxapi.wxRegister(this.wxRegCallback)

4.然后再methods中加入下面3个方法：

wxRegCallback () {
        // 用于微信JS-SDK回调
        this.wxShareTimeline()
        this.wxShareAppMessage()
    },
    wxShareTimeline () {
    // 微信自定义分享到朋友圈
        let option = {
            title: '', // 分享标题, 请自行替换
            link: window.location.href.split('?')[0], // 分享链接，根据自身项目决定是否需要split
            imgUrl: '', // 分享图标, 请自行替换，需要绝对路径
            success: () => {
                // alert('分享成功')
            }
        }
        // 将配置注入通用方法
        wxapi.shareTimeline(option)
    },
    wxShareAppMessage () {
    // 微信自定义分享给朋友
        let option = {
            title: '', // 分享标题, 请自行替换
            desc: '', // 分享描述, 请自行替换
            link: window.location.href.split('?')[0], // 分享链接，根据自身项目决定是否需要split
            imgUrl: ', // 分享图标, 请自行替换，需要绝对路径
            success: () => {
                // alert('分享成功')
            }
        }
        // 将配置注入通用方法
        wxapi.shareAppMessage(option)
    },

以上几步即实现了微信的分享功能，如果期间遇到问题，请开启debug调试模式，并根据错误提示的内容去解决