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给错这种粗枝大叶的事了，最后，有问题留言，共同加油，共同进步。