微信浏览器（jssdk）自定义分享按钮，自定义链接，图片，描述等

项目中遇到的需求如下：

页面1：one.html 中通过微信浏览器右上角自带的分享，将页面2:two.html分享出去。微信浏览器以及其他各种浏览器自带的分享默认分享的是本页面地址，第一张图片作为封面，描述可能是一个链接或其他，看浏览器而定。所以，想要指定自己的分享链接封面以及缩略图，需要对分享进行自定义。

微信浏览器自定义分享，通过微信公众平台提供的jssdk，具体如下：

1.配置微信JS接口安全域名（参考微信官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 JSSDK使用步骤），并且把ip地址加入白名单。

2.通过你公司的公众号，获得appid及appsecret。

3.再依次获取 access_token，jsapi_ticket，signature。

注：以上数据是后台来获取，这里不细说，摘自大神的获取说明，自行参考：

/******************作者：大房子里的小乌龟       原文链接：https://www.jianshu.com/p/b949865144a8  *********************/

获取方法如下：

获取这些神奇的东西的步骤实际上是这样的：

appid & appsecret ====> access_token ====> jsapi_ticket ====> signature

①首先用appid和appsecret获取access_token，这里的appid和appsecret是公众号里可以拿到的。

②根据获取的access_token，请求路径 https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取 jsapi_ticket 。返回值为一段JSON，参考官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 附录1-JS-SDK使用权限签名算法

③进行签名算法，signature=sha1(string1)。

签名 signature = sha1(string1)。这里的 string1 是由4部分组成，分别是

• jsapi_ticket：获取到的
• timestamp：随机时间戳
• noncestr：随机字符串
• url：要分享页面的路径，这里需要强调一下，这个url的域名，需要跟公众号JS接口安全域名一致。

string1 = jsapi_ticket=jsapi_ticket的值&noncestr=noncestr的值×tamp=timestamp的值&url=url的值。

后台算法 sha1() 加密字符串 string1 生成签名 signature 。

①②③这些步骤是后台完成，前端只需要接收后台传过来的值即可。

接下来，前端部分：

$.ajax({
    url: 
    data:{
        url: ,
    },
    async: true,
    type: 'POST',
    cache: false,
    dataType: 'json',
    success:function(data){
            var res = data.data;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: res.appid,
                timestamp: res.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.noncestr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList: [ // 必填，需要使用的JS接口列表
                    'onMenuShareTimeline',
                    'onMenuShareAppMessage',
                    'onMenuShareQQ',
                    'onMenuShareWeibo',
                    'onMenuShareQZone'
                ]
            });
            wx.ready(function () {
                wx.onMenuShareAppMessage({
                    title: '测试用 title',
                    desc: '测试用 description',
                    imgUrl: '分享图标的路径', // 分享图标
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    link: urlstr, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    success : function () {
                        //分享成功需要执行的函数
                    },
                    cancel: function (err) {
                        // console.log(err);
                        // 用户取消分享后执行的回调函数
                    }
                });
                wx.onMenuShareTimeline({
                    title: '测试用 title',
                    desc: '测试用 description',
                    imgUrl: '分享图标的路径', // 分享图标
                    type: '', // 分享类型,music、video或link，不填默认为link
                    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                    link: urlstr, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    success : function () {
                        //分享成功需要执行的函数
                    },
                    cancel: function (err) {
                        console.log(err);
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
            wx.error(function(res){
            });
    },
    error:function(request){
        alert("连接失败，请检查网络，稍后再试");
    }
});

根据后台给你提供的接口，获取到需要的数据（以上代码wx.config中的部分），然后在 wx.ready(function () {}）中进行你的链接，图片，描述等配置即可，可以配置分享到朋友圈，微信好友，qq好友，qq空间等，具体配置在微信公众平台都有详细的方法介绍。可以去参考。

好啦，就酱啦！！！！加油！！！！