H5实现微信的自定义分享功能

微信开发文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

H5不支持点击页面内按钮直接唤起分享面板，可以显示一个引导图，引导用户使用右上角的分享功能。

实现步骤：

1. 绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”，即后端接口的域名。
2. 引入微信官方的JS-SDK文件：；
3. 请求后端接口：前端需要将encodeURIComponent(location.href.split('#')[0])作为参数传给后端（后端需要用到它来获取签名），获取配置所需要的参数：appid、timestamp、noncestr和signature；
4. 通过config接口注入权限验证配置；
5. 通过ready接口处理成功验证；

handleShare(){
            this.$api.adopt
                .getShareParams({
                    url:encodeURIComponent(location.href.split('#')[0])
                })
                .then(res => {
                    wx.config({
                        debug: false,// 是否开启调试模式
                        appId: res.appId,//appid
                        timestamp: res.timestamp,// 时间戳
                        nonceStr: res.nonceStr,// 随机字符串
                        signature: res.signature,// 签名
                        jsApiList: [
                            'checkJsApi',
                   		    'onMenuShareTimeline',
                   			'onMenuShareAppMessage',
                    		'onMenuShareQQ',
                   			 'onMenuShareQZone',
                        ]// 需要使用的JS接口列表
                    })

					 let shareData = {
                            title: '这是自定义的分享的标题', // 分享标题
                            desc: '这是自定义的分享的描述', // 分享描述
                            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                            imgUrl: ‘这是自定义的分享的图标’, // 分享图标
                            success: function () {},//分享成功的回调函数
                            cancel:function(){}//分享失败的回调函数
                     }

					//所有接口调用都必须在config接口获得结果之后。
					//config信息验证后会执行ready方法。
					//config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    wx.ready(function(){                  
                         wx.onMenuShareAppMessage(shareData); // 微信好友
                		 wx.onMenuShareTimeline(shareData); // 微信朋友圈
               			 wx.onMenuShareQQ(shareData); // QQ
               			 wx.onMenuShareQZone(shareData) // QQ空间
                    });
                })
                .catch(err => {})
}

报错问题：

invalid signature签名错误：

1. 确认签名算法正确，可用http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 页面工具进行校验。
2. 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致。
3. 确认 config 中的 appid 与用来获取 jsapi_ticket 的 appid 一致。
4. 确保一定缓存access_token和jsapi_ticket。
5. 确认url是页面完整的url，包括’http(s)/‘部分，以及’？‘后面的GET参数部分,但不包括’#‘hash后面的部分。可以在当前页面alert(location.href.split(’#’)[0])确认。
6. 确保获取用来签名的url是动态获取的。在前端通过ajax将url传到后台签名，前端需要用js获取当前页面除去’#‘hash部分的链接（可用location.href.split(’#’)[0]获取,而且需要encodeURIComponent），因为页面一旦分享，微信客户端会在你的链接末尾加入其它参数，如果不是动态获取当前链接，将导致分享后的页面签名失败。