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 => {})
}

H5实现微信的自定义分享功能_第1张图片

报错问题:

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),因为页面一旦分享,微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败。

你可能感兴趣的:(移动端,H5)