vue微信分享 微信 js-SDK

1. vue 前期配置 ( 此操作一般由后台童鞋配置 )

1.0.1 配置 js安全域名

配置js 安全域名 ,配置 
对于 vue框架 只需要配置到 页面的 #(哈希前) index 就可以了.

点击设置—公众号设置—功能设置进入设置界面

1.0.2 配置 ip白名单

配置IP白名单,微信公众平台出于安全考虑，
根据appId和appSecret去获取access_token的时候，
只允许白名单的ip去请求获取access_token的接口。
需要将测试、线上的接口部署的服务器的ip都配置进去。

设置—公众号设置—IP白名单里设置，多个ip用回车间隔。

1.0.3 公众号认证

需要公众平台配置认证,否则无法进行 微信自定义分享

1.0.4 基本操作

一：先在后台通过appId和secret去获取access_token（数据需要缓存）。

二：拿到access_token之后，去获取JsApiTicket（数据需要缓存）。

三：拿到JsApiTicket之后根据JsApiTicket、分享的url、
随机字符串noncestr、时间戳timestamp去生成签名signature、
并将signature及noncestr、timestamp、appid返回给
前端去初始化wx.config作权限验证。

2. 引入文件

2.0.1 CDN引入

建议CDN引入官方 SDK 文件,放入index.html
<script src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

2.0.2 npm安装引入

npm install weixin-js-sdk
在你需要的页面 引入
import wx from "weixin-js-sdk";

3. vue 前端接口调入

3.0.1 点击事件代码

点击事件代码
share() {
            let data = {
                url: window.location.href.split('#')[0]
            }
            this.$axios.post("接口地址", data).then(res => {
                //分享初始化接口
                let dataObj = res.data.data;
                if (res.data.status == 1) {
                    console.log(res);
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: dataObj.appid, // 必填，公众号的唯一标识		【公众号平台查看】
                        timestamp: dataObj.timestamp, // 必填，生成签名的时间戳    【后台返回】
                        nonceStr: dataObj.nonceStr, // 必填，生成签名的随机串	【后台返回】
                        signature: dataObj.signature, // 必填，签名				【后台返回】
                        jsApiList: ['onMenuShareAppMessage',
                            'onMenuShareTimeline',
                            'chooseWXPay',
                            'showOptionMenu',
                            "updateAppMessageShareData",
                            "updateTimelineShareData",
                            "hideMenuItems",
                            "showMenuItems",
                            "onMenuShareTimeline",
                            'onMenuShareAppMessage'
                        ] // 必填，需要使用的JS接口列表【例如分享的几个Api：'onMenuShareAppMessage', 'onMenuShareQQ'】
                    });
                    wx.ready(function() {
                        wx.checkJsApi({ // 1 判断当前版本是否支持指定 JS 接口，支持批量判断
                            jsApiList: ['onMenuShareAppMessage',
                                'onMenuShareTimeline',
                                'chooseWXPay',
                                'showOptionMenu',
                                "updateAppMessageShareData",
                                "updateTimelineShareData",
                                "hideMenuItems",
                                "showMenuItems",
                                "onMenuShareTimeline",
                                'onMenuShareAppMessage'
                            ], // 必填，需要使用的JS接口列表【例如分享的几个Api：'onMenuShareAppMessage', 'onMenuShareQQ'】,
                            success: res => {
                                // alert(JSON.stringify(res));
                            }
                        });
                        wx.updateAppMessageShareData({
                            title: dataObj.title, // 分享标题
                            desc: dataObj.desc, // 分享描述
                            link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: dataObj.imgUrl, // 分享图标
                            success: res => {
                                // 用户点击了分享后执行的回调函数
                                // alert(JSON.stringify(res));
                            },
                            cancel: function() {
                                // 用户取消分享后执行的回调函数
                                // _this.$vux.toast.text('取消分享！！！')
                                Toast.fail('取消分享')
                            }
                        });

                        wx.updateTimelineShareData({
                            title: dataObj.title, // 分享标题
                            link: window.location.href.split('#')[0] + '#' + window.location.href.split('#')[1], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: dataObj.imgUrl, // 分享图标
                            success: res => {
                                // alert(JSON.stringify(res));
                                // Toast.success('分享成功2')
                            }
                        })
                    });
                }
            });
        }

3.0.2 事件需要在钩子函数 mounted (){ this.share()} 调入

4. 问题说明

4.0.1 在后台生成签名的时候,生成的 url 传入的地址不包含特殊字符 # ,但是由于 vue框架的特殊性,所以在传入后台的 url 的地址中需要不包含 # 只需传到 index , window.location.href.split(’#’)[0]

4.0.2 在后面调分享到朋友或朋友圈时需要传入页面的全部地址,
link: window.location.href.split(’#’)[0] + ‘#’ + window.location.href.split(’#’)[1], // 分享链接，
该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

5. 相关链接

5.0.1 签名校验工具：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

5.0.2 微信公众平台 https://mp.weixin.qq.com/