微信分享功能（weixin-js-sdk）

一、安装微信JS-SDK

//方式1：通过script标签进行引入微信 js-sdk的包
<script src="utils/weixin/weixin-js-sdk.js"></script>

// 方式2：通过npm进行安装，并通过import进行引入（这里我选择的是这种方式，微信的分享功能，我单独写在了 wx.js文件中）
npm install weixin-js-sdk --save
import wx from 'weixin-js-sdk'

二、调用后台请求接口、微信配置参数、微信分享配置等(在 wx.js文件中实现)

import wx from 'weixin-js-sdk' // 步骤1、引入微信js-sdk
import axios from 'axios' // 步骤2、引入axios，请求接口


let appId, timestamp, nonceStr, signature

// 步骤3、请求后台接口，获取微信配置的参数
const getWxConfig = async (pageUrl, token, code) => {
    const params = {
        url : pageUrl, // 需要进行微信分享的所在页面url
        token : token, // 项目中的 token
        code : code // 项目中的 code 
    }

    const {data, code, msg} = await axios.get('/getWxConfig', params)
    if(code != 200) return
    appId = data.appId
    timestamp = data.timestamp
    nonceStr = data.nonceStr
    signature = data.signature
}

// 步骤4、通过config接口注入权限验证配置
const setWxConfig = (appId, timestamp, nonceStr, signature) => {
    wx.config({
        debug: false,
        appId: appId,
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        jsApiList: [
            'onMenuShareTimeline', // 分享到朋友圈
            'onMenuShareAppMessage', // 分享给朋友
            'onMenuShareQQ', // 分享到QQ
            'onMenuShareWeibo', // 分享到腾讯微博
        ]
    })
}

 // 步骤5、通过ready接口处理成功验证
const wxReady = (shareObj) => {
    wx.ready(function (){
        // ① 分享到朋友圈
        wx.onMenuShareTimeline({
            title: shareObj.title, // 分享标题
            link: shareObj.link, // 分享链接
            desc: shareObj.desc, // 分享描述
            imgUrl: shareObj.imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        // ② 分享给朋友
        wx.onMenuShareTimeline({
            title: shareObj.title, // 分享标题
            link: shareObj.link, // 分享链接
            desc: shareObj.desc, // 分享描述
            imgUrl: shareObj.imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        // ③ 分享到QQ
        wx.onMenuShareQQ({
            title: shareObj.title, // 分享标题
            link: shareObj.link, // 分享链接
            desc: shareObj.desc, // 分享描述
            imgUrl: shareObj.imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });
        // ④ 分享到腾讯微博
        wx.onMenuShareWeibo({
            title: shareObj.title, // 分享标题
            link: shareObj.link, // 分享链接
            desc: shareObj.desc, // 分享描述
            imgUrl: shareObj.imgUrl, // 分享图标
            success: function () {
                // 用户确认分享后执行的回调函数
            },
            cancel: function () {
                // 用户取消分享后执行的回调函数
            }
        });

    })
}
// 步骤6、通过error接口处理失败验证
const wxError = () => {
    wx.error(function (err){
        console.log(err)
    })
}

// 分享
const wxShare = (pageUrl, token, code, shareObj) => {
    await getWxConfig(pageUrl, token, code)
    await setWxConfig(appId, timestamp, nonceStr, signature)
    await wxReady(shareObj)
    await wxError()
}

export default wxShare

三、在需要分享功能的页面进行调用（如：在商品页面 commodity.vue 文件中,在其 mounted 方法中调用wx.js文件中的分享方法）

<template>
    <div>商品页面 : commodity.vue </div>
</template>
<script>
   import wxShare from 'wx.js'

    export default{
        data(){
            return {}
        },
        mounted(){
            const pageUrl = location.href.split("#")[0]
            const token = localStorage.getItem('token')
            const code = localStorage.getItem('code')
            const shareObj = {
                title: '这是标题', // 分享标题
                link: location.href,// 分享链接
                desc: '这是一段描述', // 分享描述
                imgUrl: require('@/assects/img/shareIcon.png'), // 分享图标
            }
            wxShare(pageUrl, token, code, shareObj)
        }
    }
</script>