H5微信自定义分享链接（设置标题+简介+图片）
起源：最近公司在做招募广告的html5页面，然后做出来后，产品提出一个问题，需要分享出去的链接是卡片形式，内容也要自己定义，这下就难到我了，因为是第一次遇到这种需求，果断百度，然而，我就像大家一样，看都看不懂，一大堆什么微信jssdk官方文档，看得我眼花缭乱，博客上面的也大多都是php形式的解释，也不知道怎么导入进来，然而接着去了解这个卡片分享，发现官方的分享卡片，是众多在微信生态中传播的html5静态页面的一个重点。所以我解决了这个问题之后，就来写这个博客，希望能帮助一些初步了解这个微信自定义分享链接的园友。
产品需要做的：
1.微信认证过的公众号:必须是经过认证的，没有认证的或者认证过期的都不可以；
2.经过备案的域名：必须是备案过的，不然是无法使用的；
3.绑定域名：首先你需要将需要分享的网址的域名绑定到微信公众平台上面，具体操作：先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”；
注：博主这次开发中，就遇到了第三点问题，我代码都写好了，后台也做好了，但是就是分享出去不是卡片形式
遇到 config:invalid url domain
后来发现是产品忘记绑定域名，设置白名单了。。。(域名不要加http://)
好，后来这个问题解决了，但是还是分享不成功，又进行一次排查，因为要在手机端上线才能看到效果，就一直上线一直改，改到下午5点，后来发现是产品appid给错了，我TM……
后台需要做的：
1.后台服务器：前台页面需要后台服务器传过来一些配置参数，比如appId、timestamp、nonceStr、signature这几个参数都是后台从微信公众平台获取到的， 需要后台进行配合；
2.获取access_token：利用公共号APPID、APPSECRET从微信服务器获取对应的access_token，这里是后台开发小伙伴的范围不多做解释；
后台需要传的参数格式：
前端你需要做的：
1.引入js文件 ：在分享的页面需要引入一个微信官方的js文件；
<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
2.通过ajax获取参数 :通过后台给你的接口，取到那些必要的参数，然后你需要把当前分享的页面的url传到后台去，必须动态的获取当前页面，而且一定要对url进行编码，要不然会不起作用；
3.因为重复上线你手机需要清理缓存，这又是一个麻烦事，手机打开：
debugx5.qq.com
然后滑到底部，有四个清理缓存的选择框，选择清理就好，不会影响别的地方的缓存，无需担心；
好，到这里就贴代码了，代码里面都特意详细的进行了注释：
$(function() { //对url进行编码 var localUrl = encodeURIComponent(location.href.split(\'#\')[0]); //url传到后台格式 var Url = "URL=" +localUrl; //这几个参数都是后台从微信公众平台获取到的 var nonceStr, signature, timestamp, appId, shareUrl; $.ajax({ //后台获取参数接口 url: "https://www.xxxxxxx.cn/user/xxxxxxxx/", beforeSend: function(xhr) { xhr.setRequestHeader("Token", getCookie("token")); }, type: \'get\', data: Url, success: function(data) { //得到参数 var appId = JSON.parse(data).appId; var nonceStr = JSON.parse(data).nonceStr; var signature = JSON.parse(data).signature; var timestamp = JSON.parse(data).timestamp; var shareUrl = JSON.parse(data).url; //通过微信config接口注入配置 wx.config({ debug: false, // 默认为false 为true的时候是调试模式，会打印出日志 appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ \'checkJsApi\', \'onMenuShareTimeline\', \'onMenuShareAppMessage\', \'onMenuShareQQ\', \'onMenuShareWeibo\' ] }); //配置自定义分享内容 window.share_config = { \'share\': { \'imgUrl\': \'https://www.xxxxxx.cn/cecerecruit/img/%E6%B5%8B%E6%B5%8B%E6%8B%9B%E5%8B%9F.png\', // 这里是需要展示的图标 \'desc\': \'120秒，48项天赋解析，90分钟专家咨询解读，深度剖析您的天赋人生。成为测测科技合伙人，尊享至多11项专属超值礼遇。\', // 这是分享展示的摘要 \'title\': \'90%的人都认可测测科技天赋智能测评|合伙人现正招募中\', // 这是分享展示卡片的标题 \'link\': shareUrl, // 这里是分享的网址 \'success\': function(rr) { //console.log(\'成功\' + JSON.stringify(rr)) }, \'cancel\': function(tt) { //console.log(\'失败\' + JSON.stringify(tt)); } } }; wx.ready(function() { wx.onMenuShareAppMessage(share_config.share); // 微信好友 wx.onMenuShareTimeline(share_config.share); // 微信朋友圈 wx.onMenuShareQQ(share_config.share); // QQ }); }, error: function(err) { }, }); })
提醒：手机端还在测试阶段，建议把debug改成true;然后博主做到这里，打包发给后台上线，然后惊喜的跳出config:OK;哇，那个惊喜若狂，然后果断分享一下去测试，然后如图：
大功告成。
总结：以后做这种事一定要耐心，发现问题要一步步去测试，只不过希望不要出现appid给错这种粗心大意的事了，最后，有问题留言，共同加油，共同进步。