微信网页的二次分享【亲测有效】

最重要的是！！！！

【1.微信公众号设置js安全域名:前端必须部署在js安全域名下才能测试】和

【2.ip白名单：后端部署在ip白名单下的域名下才能测试】

1.下载依赖

npm install weixin-js-sdk --save-dev

2.在src目录下，新建一个common文件夹，在文件夹下新建一个wxapi.js文件【调试时:debug设置为true】

【前端向后台请求获取签名和时间戳和随机串】

/**
 * 微信js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
import wx from 'weixin-js-sdk'
import Axios from 'axios'
const wxApi = {
    /**
    * [wxRegister 微信Api初始化]
    * @param  {Function} callback [ready回调函数]
    */
    wxRegister(callback) {
        // 这边的接口请换成你们自己的
        Axios.post('/CallMethod', {
            functionName: "newWeiXinShareService",
            methodName: "weiXinShare",
            data: {
                url: window.location.href
            }
        }).then((res) => {
            console.log('weixinshare',res);
            let data = res.data.data // PS: 这里根据你接口的返回值来使用
            wx.config({
                debug: true, // 开启调试模式
                appId: "wx130b58be46a7d4f0", // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名，见附录1
                jsApiList: [
                    
                    // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    // 微信新版1.4.0暂不支持安卓，故这里要两个接口一起调用下
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ] 
            })
        }).catch((error) => {
            console.log(error)
            // alert(error)
        })
        wx.ready((res) => {
            // 如果需要定制ready回调方法
            if (callback) {
                callback()
            }
        })
    },
    /**
    * [ShareTimeline 微信分享到朋友圈]
    * @param {[type]} option [分享信息]
    * @param {[type]} success [成功回调]
    * @param {[type]} error   [失败回调]
    */
    ShareTimeline(option) {
        wx.onMenuShareTimeline({
            title: option.title, // 分享标题
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        });
        wx.updateTimelineShareData({
            title: option.title, // 分享标题
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        });
    },
    /**
    * [ShareAppMessage 微信分享给朋友]
    * @param {[type]} option [分享信息]
    * @param {[type]} success [成功回调]
    * @param {[type]} error   [失败回调]
    */
    ShareAppMessage(option) {
        wx.onMenuShareAppMessage({
            title: option.title, // 分享标题
            desc: option.desc, // 分享描述
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        });
        wx.updateAppMessageShareData({
            title: option.title, // 分享标题
            desc: option.desc, // 分享描述
            link: option.link, // 分享链接
            imgUrl: option.imgUrl, // 分享图标
            success() {
                // 用户成功分享后执行的回调函数
                option.success()
            },
            cancel() {
                // 用户取消分享后执行的回调函数
                option.error()
            }
        });

    }
}
export default wxApi

3.在Vue页面使用，比如首页，先引入刚刚的js文件：

import wxapi from '@/common/wxapi.js'
methods{
    wxRegCallback () {
        // 用于微信JS-SDK回调
        this.wxShareTimeline();
        this.wxShareAppMessage();
    },
    wxShareTimeline () {
        // 微信自定义分享到朋友圈
        let option = {
            title: this.shareArticleTitle, // 分享标题, 请自行替换
            link: window.location.href, // 分享链接，根据自身项目决定是否需要split
            imgUrl: this.headPortrait, // 分享图标, 请自行替换，需要绝对路径
            success: () => {
            console.log('分享成功')
            },
            error: () => {
            console.log('已取消分享')
            }
        }
        // 将配置注入通用方法
        wxapi.ShareTimeline(option)
    },
    wxShareAppMessage () {
        // 微信自定义分享给朋友
        let option = {
            title: this.shareArticleTitle, // 分享标题, 请自行替换
            desc: this.shareAbs, // 分享描述, 请自行替换
            link: window.location.href, // 分享链接，根据自身项目决定是否需要split
            imgUrl: this.headPortrait, // 分享图标, 请自行替换，需要绝对路径
            success: () => {
            console.log('分享成功')
            },
            error: () => {
            console.log('已取消分享')
            }
        }
        // 将配置注入通用方法
        wxapi.ShareAppMessage(option)
    },
}
mounted(){
    wxapi.wxRegister(this.wxRegCallback)
}

后端设置：https://blog.csdn.net/shrmuscles/article/details/77987185