微信自定义分享 前端填坑

需求都是大同小异的，要做微信分享，当然了，微信内部浏览器右上角 ‘...’ 点击就可以分享，但是往往分享的信息是不尽人意的，因为自动获取title，不能显示description，还很有可能拿不到图片，这样的信息分享给我的话，我就默认是小广告了（手动摊手~~~）。所以自定义分享势在必行。

1.配置微信JS接口安全域名（参考微信官方文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 JSSDK使用步骤）

微信公众号配置JS接口安全域名，并且把ip地址加入白名单。我在测试环境中，如果不添加白名单，获取的appid直接报错为非法appid，导致接下来的步骤根本没法进行。

2.依次获取 access_token，jsapi_ticket，signature。
获取这些神奇的东西的步骤实际上是这样的：

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的值&timestamp=timestamp的值&url=url的值。

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

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

需要注意的是，我的业务需求是前端获取本页面路径，向后台发送页面路径，也就是组成签名算法中的 url 的值，所以看各自需求，写法不固定，但是这个值是必需的。由于后台要求，不可以全局缓存 access_token ，所以这个功能并没有做，也就是说一天请求的 access_token 的次数上限就是2000。（还真是对自己的产品没信心哦~~~）。至于路径的转义字符，路径加多个参数，参数与参数之间需要用 '&' 来连接，但是在我的项目中，直接传递 '&' ,到后台的时候会直接转义为 '&' 导致 url 与当前路径不一致，进而导致 signature 签名错误，所以我直接在前端转义成 '&'， 其他的任务交给后台处理，当然这只是一个现象，这个还是要根据后台的情况而定的，我的后台是 php，不同的后台会遇到的问题也许不大相同，慢慢来喽~~

<!--------微信自定义分享-------->
//先调用微信js
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//微信分享
//只能调用微信内部浏览器右上角'...' 唤起微信分享，无法做到自定义按钮调用分享接口
var urlstr = window.location.href;
var urlPath = urlstr.replace(/&/g,'%26'); 
$.ajax({
    url: k_host + "/WxGetSignature", //k_host 为本地路径，忽略就好，这个实际上就是把需要分享页面的 url 传给后台
    data:{
        url: urlPath,
    },
    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("连接失败，请检查网络，稍后再试");
    }
});
<!--------微信自定义分享-------->

以上是前端代码，遇到的问题基本就是 JS 接口安全域名，添加 IP 到白名单，签名算法，其他很顺利。本来打算一开始去做成点击自定义按钮调起微信分享，结果去官方社区查了以后发现，是不可行的，没有方法和接口提供给开发者， 虽然微信自己的 demo 中有这种点击按钮，调用分享，可是在真机测试中，并没有什么毛用，打debugger发现代码根本没进分享，后来就放弃，如果哪位大神有办法的话，请指点一二。

所有的调试都是在微信开发工具中完成的，不然微信的 debugger 模式是无法开启的（吐槽一下开发者工具，不是那么好用哦~~~）。

希望能帮到在微信分享坑中无法自拔的小伙伴们（哭笑不得.gif）~~~