H5页面实现在微信里面转发和分享朋友圈
最近接到一个部门的需求，用H5开发一些公司宣传的资料，然后在微信里面方便分享。经历过了很多次的踏坑，最后终于实现了，特总结一下：
1.首先申请公众号，并且是认证过了的.
2.在公众号里面进行开发设置。这个很重要，刚开始我没设置对，一堆问题。
注意：1、服务器地址(URL) https://域名/WeChartApp/TokenValid
参考我的笔记：https://www.cnblogs.com/huaan011/p/18008186
/// <summary> /// 微信公众号开发配置基本配置时候填的token校验 /// </summary> /// <returns></returns> public IActionResult TokenValid() { ///这里做的假，正常的是需要一堆审核的 ///https://codeleading.com/article/81633002885/ string echostr = GDCUtility.GetParamNoSpace("echostr"); return Content(echostr); }
2、 令牌(Token) 随便写一串字符，按照要求就可以了。
3、在微信公众号里面设置 JS接口安全域名，不设置也会报错。
4、检查分享接口权限是否已经获得，在微信公众号的【设置与开发】->【接口权限】，如图：
5、代码开发：
1、要引用腾讯的微信 JS-SDK https://res.wx.qq.com/open/js/jweixin-1.6.0.js
2、JS-SDK的官方文档 ：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#112
3、 我已经封装好了的代码，直接调用就可以了（踏坑无数次）。
(function (win) { /* * 微信分享 * 获取微信加签信息 * @param{data}:获取的微信加签 * @param{shareData}:分享配置参数 */ let wexinShare = (data, shareData) => { // var wx = require('weixin-js-sdk') || window['wx']; // console.log(data, shareData); let appId = data.appId; let timestamp = data.timestamp; let nonceStr = data.nonceStr; let signature = data.signature; wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。（测试记得关掉） appId: appId, // 必填，公众号的唯一标识 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#112 timestamp: timestamp, // 必填，生成签名的时间戳 nonceStr: nonceStr, // 必填，生成签名的随机串 signature: signature, // 必填，签名，见附录1 jsApiList: [ //'updateAppMessageShareData', //'updateTimelineShareData' 'checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareAppMessage', // 旧的接口，即将废弃(网上说是要把旧接口也填上去，不然注册会失败) 'onMenuShareTimeline', // 旧的接口，即将废弃 'onMenuShareQQ', // 旧接口，分享给QQ好友 'onMenuShareQZone' // 旧接口，分享到QQ空间 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2 }); // console.log(1); wx.checkJsApi({ jsApiList: ['checkJsApi', 'updateAppMessageShareData', 'updateTimelineShareData','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2, success: function (res) { // 以键值对的形式返回，可用的api值true，不可用为false // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"} // console.log(res, 'checkJsApi') } }); // console.log(2); wx.ready(function () { //console.log(7); // //分享到朋友圈”及“分享到QQ空间” wx.updateTimelineShareData({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.imgUrl, // 分享图标 success: function (res) { // 设置成功 //console.log("分享朋友圈成功返回的信息为:", res); } }) // console.log(5); //“分享给朋友”及“分享到QQ” wx.updateAppMessageShareData({ title: shareData.title, // 分享标题 desc: shareData.desc, // 分享描述 link: shareData.link, // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.imgUrl, // 分享图标 success: function (res) { //console.log("分享朋友成功返回的信息为:", res);; } }) //console.log(6); }); wx.ready(function () {//文档的即将废弃，其实分享用的就是旧方法，这个上面的新的分享updateTimelineShareData根本没有作用,但是不加分享无法成功 wx.onMenuShareTimeline({ title: shareData.title, // 分享标题 link: shareData.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareData.imgUrl, // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 //console.log("分享成功2"); }, cancel: function () { //console.log("分享取消2"); } }); }); //console.log(3); wx.error(function (res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 //console.log('验证失败返回的信息:', res); }); // console.log(4); } let isWeChatMiniProgram = function () { let ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenger/i) == "micromessenger") { return true; } else { return false; } }; let _wechart = function () { }; //请求微信配置参数接口（获取签名），由后台给接口给 _wechart.prototype.getSignature = function () { let urls = window.location.href.split('#')[0]; let urlPar = "/WeChartApp/GetSignature"; let dataObj = { url: urls }; let dataPar = { type: 'post', url: urlPar, data: dataObj }; GDCRequest.search(dataPar, function (data) { //console.log(data); }); }; //微信分享到朋友圈和转发朋友注册，注册完就可以使用转发朋友和分享朋友圈 //{ // title: "深圳市标题", // desc: "深圳市描述", // imgUrl: "https://域名/images/share03.jpg?rn=4" //} _wechart.prototype.shareFriend = function (_shareData) { if (!isWeChatMiniProgram()) { return; }//只有在微信的浏览器中才有转发和分享朋友圈 let promise = new Promise(function (sucess,falid) { let urls = window.location.href.split('#')[0]; let urlPar = "/WeChartApp/GetSignature"; let dataObj = { url: urls }; let dataPar = { type: 'post', url: urlPar, data: dataObj }; GDCRequest.search(dataPar, function (data) { sucess(data); }); }); promise.then((res) => { //微信加签 let obj = { appId: res.appId, nonceStr: res.nonceStr, signature: res.signature, timestamp: res.timestamp, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] }; //分享数据，这段主要是为了在hash模式下分享出去的链接不被浏览器截取，保证完全把链接分享出去 let url = res.url; let shareData = { title: _shareData.title,// 分享标题 desc: _shareData.desc,// 分享描述 link: url, imgUrl: _shareData.imgUrl // 分享图标 }; //引用 wexinShare(obj, shareData); }); } win.GDCWechart = new _wechart(); })(window);
4、 调用上面的方法，放在你想转发或者分享朋友圈的页面：
GDCWechart.shareFriend({ title: "深圳市-龙年快乐标题", desc: "深圳市-龙年快乐描述", imgUrl: "https://微信公众号里面配置的域名/images/share03.jpg?rn=4" });
6、最坑的一个地方，我按照前面的步骤都开发完毕了，但是还是无法正常的转发或者分享朋友圈（此时我是把想转发或者分享朋友圈的链接直接发在微信聊天里面，直接点的链接进去，然后进行转发或者分享朋友圈的操作，我这么操作很多次都只能转发或者分享朋友圈的是链接，人都被搞疯了）。最后网上搜索，一个大神终于给我了一个方法，就是把链接转化成二维码，然后微信扫码二维码进来，就正常了。
7、注意分享朋友圈和转发只能在微信里面使用，离开了这个就不能使用了，并且只能用户自己手动去点右上角的三个点那里去完成转发或者分享朋友圈。
8、获取签名的方法 /WeChartApp/GetSignature，我在后台已经封装好了的，如果使用者可以根据自己项目中封装好的来进行修改。返回的数据格式
{ appId:"公众号的appid ",
nonceStr:"随机的字符串，相当于私匙，可以随便取，生成 signature使用的那个",
signature:"签名",
timestamp:"时间戳"
}或者你自己按照实际需求修改或者 /WeChartApp/GetSignature 这部分的JS代码。
