原始效果：

1.png

实现后效果：

2.png

手把手教学开始：

1.找运营人员要公司微信公众平台账号

找到设置与开发-接口权限，查看分享接口是否已开通

3.png

2.设置与开发-基础配置

启用服务与配置
原理：微信会发送一个消息给你填写的待访问地址，我们获取到消息后需要将消息返回。填写的待访问地址必须是一个外网能访问的地址。
具体文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html

（1）获取关键信息

点击菜单 基本配置 菜单，获取 开发者ID 和 开发者密码，后端使用 开发者ID 和 开发者密码 等作为参数，并根据微信提供的算法，生成相应的签名信息；

（2）配置IP白名单

根据项目域名设置 IP白名单（注：需要添加的IP为后端通过开发者ID及密码调用获取access_token接口时的ip）。

（3）JS接口安全域名配置

点击菜单 公众号设置 菜单，切换到 功能设置 模块，打开 JS接口安全域名 窗口；
获取该公众号配置文件，将该文件配置到你填写到url地址对应的服务器路径下。
填写的域名必须时外网能访问的域名地址。

获取签名信息

生成签名的url需动态获取：window.location.href
之后通过调用后端接口获取config信息
//javascript获取版本号
weixin_version()
{
let wechatInfo = navigator.userAgent.match(/MicroMessenger/([\d.]+)/i) ;
return wechatInfo[1] > "5.0";
}

wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx905707fe7244aeaa', // 必填，公众号的唯一标识
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名
jsApiList: [
'updateAppMessageShareData',
'updateTimelineShareData',
'onMenuShareAppMessage',
'onMenuShareTimeline'
] // 必填，需要使用的JS接口列表
})

wx.ready((res)=>{
    if (Fpublic.weixin_version()){
        //分享给朋友
        wx.updateAppMessageShareData({
            title: '“财富管理”微专业注册报名', // 分享标题
            desc: '奋斗没有终点，任何时候都是一个起点。', // 分享描述
            link: src, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://pic.pystandard.cn/202109/share-1630921073478-777282582.png', // 分享图标
            success: function () {
                // 设置成功
            }
        })

        //分享到朋友圈
        wx.updateTimelineShareData({
            title: '财富管理”微专业注册报名', // 分享标题
            desc: '奋斗没有终点，任何时候都是一个起点。', // 分享描述
            link: src, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://pic.pystandard.cn/202109/share-1630921073478-777282582.png', // 分享图标
            success: function () {
                // 设置成功
            }
        })
    }else{
        wx.onMenuShareAppMessage({
            title: '“财富管理”微专业注册报名', // 分享标题
            desc: '奋斗没有终点，任何时候都是一个起点。', // 分享描述
            link: src, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://pic.pystandard.cn/202109/share-1630921073478-777282582.png', // 分享图标
            success: function () {
                // 设置成功
            }
        });

        wx.onMenuShareTimeline({
            title: '财富管理”微专业注册报名', // 分享标题
            desc: '奋斗没有终点，任何时候都是一个起点。', // 分享描述
            link: src, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://pic.pystandard.cn/202109/share-1630921073478-777282582.png', // 分享图标
            success: function () {
                // 设置成功
            }
        });
    }

})