微信公众号网页分享开发（基于1.4.0）

因为业务需求，需要开发公众号网页朋友圈分享，类似以下阅读文章以后进行分享，需要带上小标题，简介，图标，要做成这样的话，就要做微信网页开发，目前有两种解决方案，一种是第三方开放平台

标题

（https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html），一种是公众号网页开发（https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html），为了便携这里选取了公众号网页开发.

1,先进入微信公众平台（https://mp.weixin.qq.com/）——登陆公众号——设置——公众号设置——功能设置，如下这里需要后台进行设置安全域名，服务器设置，设置完成以后就可以进行分享开发了，这个是后台的，前端不需要处理

2，页面要引入微信jssdk在需要调用JS接口的页面引入如下JS文件，支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

这里是前台要做的，我们需要给后台传当前url链接，

//引入微信jssdk,这里引入的是1.4.0版本
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
//前端传后台需要进行encodeURIComponent（）转换，而且需要把#后面的截掉，
    var currentUrl = encodeURIComponent(window.location.href.split('#')[0])
    var linkUrl='https://www.baidu.com/'
    $.ajax({
        url: "后台提供",
        type: "POST",
        contentType: "application/json",
        async: false,
        data: JSON.stringify({
            signUrl: currentUrl
        }),
        success: function(res) {
            var Ret = res.data.data.ret
            wx.config({
                debug: false,//调试模式可以打开，发布上线要改回
                appId: Ret.appid,//注册公众号微信给的id
                timestamp: Ret.timestamp, //时间戳
                nonceStr: Ret.nonceStr, //随机数
                signature: Ret.signature, //签名
               // debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
               // appId: '', // 必填，公众号的唯一标识
               // timestamp: , // 必填，生成签名的时间戳
               // nonceStr: '', // 必填，生成签名的随机串
               // signature: '',// 必填，签名
                jsApiList: [
                     //分享到调用的
                    'updateAppMessageShareData',
                    'updateTimelineShareData'
                ]
            });
            //这里发布的时候可以注释掉
            // wx.checkJsApi({
            //     jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
            //     success: function(res) {
            //         console.log(res)
            //     }
            // });
            wx.ready(function() {
                var shareData = {
                    title: '大部分人的听力都很厉害', //标题
                    desc: '测测你的耳朵有多牛', //描述
                    link: linkUrl, //需要分享的URL该链接域名或路径必须与当前页面对应的公众号JS安全域名一致(必须是安全域名下的链接，可以是二级链接)
                    imgUrl: "" //缩略图地址必须是线上图片
                };
      //这里做了分享给微信朋友和朋友圈，QQ好友和QQ空间，其他接口已经在1.4.0js版本废弃，请注意
                wx.updateAppMessageShareData(shareData);
                wx.updateTimelineShareData(shareData);
            });
            wx.error(function(res) {
                alert(res.errMsg); //错误提示
            });
        },
        error: function() {
            alert('服务器发生错误');
        }
    });
</script>