前段时间因业务需要将app的内容以h5的形式分享到微信、朋友圈、QQ、QQ空间，所以再次记录下接入微信JS-SDK的全部流程：
后端：需要写一个获取公众号access_token得接口，将微信JS-SDK需要的参数返回给前端就可以了，参考：官方地址
前端：参考：微信JS-SDK官方地址
1、绑定域名
需要在微信工作号后台进行配置，如果没有公众号需要先在微信公众平台申请公众号；如已有微信公众号需登录公众号进行以下设置：
1>左侧开发-->基本配置-->IP白名单中，将服务器的测试地址IP及正式地址IP配置，顺便将开发者ID和开发者密码保存下来，后面要用；
2>左侧设置-->公众号设置-->功能设置-->JS接口安全域名，中将你服务器的测试和正式地址填入，必须都是带证书的域名即https开头的域名；
2、在需要分享的页面引入JS文件
在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）。
备注：支持使用 AMD/CMD 标准模块加载方法加载
<script src="./js/jquery-3.4.1.min.js"></script> <script src="./js/rem.js"></script> <script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
3、通过config接口注入权限验证配置，见代码
4、在ready接口中处理成功验证，见代码
5、在error接口处理失败验证，见代码
说明：我是将分享的逻辑及配置写到了一个share.js中，这样做的好处就是其他需要分享的页面可以直接引入使用，不需要重复配置；
分享逻辑share.js如下：
我这里使用了jQuery，操作DOM元素方便，所以还需要在页面引入jQuery.js，分享share.js我是在页面拿到数据后利用jQuery动态引入的，之所以这样引入，是为了避免用户偶尔分享失败的问题，因为获取页面数据的http请求和share.js中的http请求是异步的，会出现share.js还没有请求成功，用户就点击了分享导致分享失败，自己多试几遍就知道了。
1 $(function () { 2 3 let _type = Number($("#type").text()), //用于区分是学生还是企业 1-学生 2-企业 4 localUrl = encodeURIComponent(window.location.href.split(‘#‘)[0]), //对url进行编码 5 // _url = "https://iservice.xxxxxx.com.cn"; //测试地址 6 _url = "https://www.xxxx.com.cn"; //正式地址 7 8 // 接入微信SDK 9 $.ajax({ 10 //后台获取参数接口 11 url: _url + "/weChatOfficialAccounts/getJSSign", 12 type: ‘get‘, 13 data: { 14 url: decodeURIComponent(localUrl) //将传给后台的url解码，避免生成的签名错误 15 }, 16 success: function (res) { 17 // console.log(res) 18 //得到参数 19 let appId = "wxxxxad6axxxxx49", //微信公众号后台获取 20 nonceStr = res.data.nonceStr, //随机字符串，接口返回的 21 signature = res.data.signature, //生成的签名，接口返回的 22 timestamp = res.data.timestamp, //时间戳，必须秒为单位，接口返回的 23 shareUrl = res.data.url, //确保分享的地址和签名的地址一致，所以分享的地址让后台直接返回来 24 shareTitle = ‘‘, //分享标题 25 shareDesc = ‘‘, //分享内容 26 shareImg = ‘‘, //分享图片 27 metaStr = ‘‘; //QQ分享 28 29 if (_type === 1) { //学生宣传页 30 shareTitle = "招幼教，急！急！急！" 31 shareDesc = "全国上千家幼儿园等你来应聘..." 32 shareImg = _url + ‘/yi/upload/share_h5_student.png‘ 33 /*QQ分享*/ 34 metaStr = `<meta itemprop="name" content="${shareTitle}"/> 35 <meta itemprop="image" content="${shareImg}"/> 36 <meta itemprop="description" name="description" content="${shareDesc}"/>` 37 $("head").append(metaStr) 38 } else if (_type === 2) { //企业宣传页 39 shareTitle = "您招老师吗？" 40 shareDesc = "本人已考取教师资格证书，普通话证书等，擅长钢琴，舞蹈，创意美术，喜欢..." 41 shareImg = _url + ‘/yi/upload/share_h5_garden.png‘ 42 /*QQ分享*/ 43 metaStr = `<meta itemprop="name" content="${shareTitle}"/> 44 <meta itemprop="image" content="${shareImg}"/> 45 <meta itemprop="description" name="description" content="${shareDesc}"/>` 46 $("head").append(metaStr) 47 } else if (_type === 3 || _type === 4 || _type === 5 || _type === 6 || _type === 7 || _type === 8 || _type === 9) { //首页home.html 48 shareTitle = "一站式服务" 49 shareDesc = "线上招聘双选，APP实习管理及在线实习报告生成，就业质量跟踪及再就业推荐" 50 shareImg = _url + ‘/yi/upload/share_h5_home.png‘ 51 /*QQ分享*/ 52 metaStr = `<meta itemprop="name" content="${shareTitle}"/> 53 <meta itemprop="image" content="${shareImg}"/> 54 <meta itemprop="description" name="description" content="${shareDesc}"/>` 55 $("head").append(metaStr) 56 } else if (_type === 10) { //h5新闻详情 57 shareTitle = $(".h1").text() 58 shareDesc = $("p:first").text() 59 shareImg = $("img:first").attr("src") 60 /*QQ分享*/ 61 metaStr = `<meta itemprop="name" content="${shareTitle}"/> 62 <meta itemprop="image" content="${shareImg}"/> 63 <meta itemprop="description" name="description" content="${shareDesc}"/>` 64 $("head").append(metaStr) 65 } else if (_type === 11) { //学生简历 66 console.log(‘页面标题‘, document.title) 67 shareTitle = $(".stuName").text() + ‘的简历‘ 68 shareDesc = $(".selfEvaluateAduit").text() 69 shareImg = $(".scroll_box img:first").attr("src") 70 /*QQ分享*/ 71 metaStr = `<meta itemprop="name" content="${shareTitle}"/> 72 <meta itemprop="image" content="${shareImg}"/> 73 <meta itemprop="description" name="description" content="${shareDesc}"/>` 74 $("head").append(metaStr) 75 } else { 76 shareTitle = $(document).attr("title") 77 shareDesc = $("#desc").text() 78 } 79 80 //通过微信config接口注入配置 81 wx.config({ 82 debug: false, // 默认为false 为true的时候是调试模式，会打印出日志（PC-控制台、手机-alert弹出） 83 appId: appId, 84 timestamp: timestamp, 85 nonceStr: nonceStr, 86 signature: signature, 87 jsApiList: [ 88 "updateAppMessageShareData", //“分享给朋友”及“分享到QQ” 89 "updateTimelineShareData", //“分享到朋友圈”及“分享到QQ空间” 90 ‘onMenuShareWeibo‘ //分享到腾讯微博 91 ] 92 }); 93 94 //配置自定义分享内容 95 window.share_config = { 96 ‘share‘: { 97 ‘title‘: shareTitle, // 分享标题 98 ‘desc‘: shareDesc, // 分享描述 99 ‘link‘: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致(就是在公众号后台配置的那个) 100 ‘imgUrl‘: shareImg, // 分享图标 101 ‘success‘: function (res) { 102 // 设置成功 103 console.log("分享成功", res) 104 }, 105 ‘cancel‘: function (err) { 106 console.log("取消分享", err) 107 } 108 } 109 }; 110 111 // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。 112 wx.ready(function () { 113 wx.updateAppMessageShareData(share_config.share); // 微信好友、qq 114 wx.updateTimelineShareData(share_config.share); // 微信朋友圈、qq空间 115 wx.onMenuShareWeibo(share_config.share); // 腾讯微博 116 }); 117 118 // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。 119 wx.error(function(err){ 120 console.log(‘错误信息‘, err) 121 }); 122 }, 123 fail: function (err) { 124 console.log("ajax请求失败", err) 125 }, 126 }); 127 128 })
以上步骤全部完成，就可以分享了！