H5页面实现微信分享功能及踩坑历程

看了官网，写的也挺简单的，也在网上搜索了一些demo，然后开始写；

我理解的误区；

我一直以为可以跟app分享一样，有个分享按钮点击触发分享；搜索了很多博客，得到结论，前几年好像是可以通过按钮引导分享，但是微信后来禁用了，只能在网页右上角点击分享；

相信很多人看到这，跟我有一样的想法，那还要分享接口有什么用，微信网页本身自带了微信分享功能；

还是有用的，可以自定义编辑分享内容（例如标题，内容，图片等）

开始回归正题；

第一步JSSDK引入，我用的最新sdk文件

第二步，注册接口

第三步，自定义分享内容；

var url = location.href.split('#')[0];
$.ajax({type: "get",url: "http://XXX.com",  //替换网址，xxx根据自己jssdk文件位置修改dataType: "jsonp",jsonp: "callback",jsonpCallback: "success_jsonpCallback",data: {"url": url},dataType: "json",timeout: 5000,error: function(XMLHttpRequest, textStatus, errorThrown) {if(textStatus == "timeout") { // 请求超时console.log('请求超时！')}},success: function(data, textStatus) {var data = data.result;if(textStatus == "success") { // 请求成功//请求成功，接着注册接口wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: [ // 必填，需要使用的JS接口列表"checkJsApi","updateAppMessageShareData",  //分享到微信及QQ"updateTimelineShareData"    //分享到朋友圈”及“分享到QQ空间]});  wx.ready(function() {console.log('wx.ready')var shareData = {title: '精选商品分类,超低秒杀价,等你来购!',desc: '超实惠,推荐给你们！', link: 'http://zyapptest.chinahoroy.com/horoyapp/hryh5/html/mall/proList/index.html?account='+encodeURI(_this.account),imgUrl: 'http://zyapptest.chinahoroy.com/horoyapp/hryh5/images/qst/default.jpg'};//这一步是验证接口权限wx.checkJsApi({jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'],success:function(res){console.log(res)},error:function(err){console.log(err)}}) ; wx.updateAppMessageShareData(shareData); //分享到微信好友或者qq好友wx.updateTimelineShareData(shareData);          //分享到朋友圈或者qq空间wx.error(function(res) {       //分享失败打印alert(res.errMsg);});})}}
})

心想，这样就完成了一系列的分享代码，然后进入测试阶段！！

在微信开发工具里面，测试接口正常，打印分享成功的内容；

然而，在移动端，微信环境打开，完全无反应，自定义内容不起作用；代码跟没写一样；

我记得还出现一种状况，我们是用的测试号测试，必须先关注，不然会有错误提示，忘记截图了，类似就是无权限；（仅测试号需要关注）

开启debug模式，开启debug模式会把每次调用微信api的结果弹出；再测试，alert（errMsg:updateAppMessageShareData:permissiondenied）

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

网上再次搜索了很多文章，终于找到一篇有用的；JSSDK1.4以后，微信分享功能用新接口，但是在接口注册的时候，必须把新老接口都加上去，不然不起作用，如下；

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timestamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.signature, // 必填，签名jsApiList: [ // 必填，需要使用的JS接口列表"checkJsApi",'onMenuShareTimeline',                       //分享到微信朋友圈'onMenuShareAppMessage',                    //分享给微信朋友'onMenuShareQQ',                         //分享到QQ'onMenuShareQZone',                            //分享到QQ空间"updateAppMessageShareData",  //分享到微信及QQ（新接口）"updateTimelineShareData"    //分享到朋友圈”及“分享到QQ空间（新接口）]
});

然后，再测试，果然起作用了，弹出errMsg:updateAppMessageShareData:ok

分享功能调试好，记得关闭debug模式

参考：

微信JSSDK1.4.0分享功能以及分享接口的坑