微信公众号自定义分享开发

微信公众号自定义分享跟我们自己打开一些对应页面的分享还是有区别的。
首先，自定义链接分享可以我们去主动去分享这个页面，同时我们可以有针对性的加上标题、图片、信息描述等。我们在生活中常常能够看到分享的好多链接，尤其类似于电商活动这类的链接，会有很吸人眼球的描述和图片。这就设计到了自定义分享链接。
现在的开发趋势现在也会来越偏轻量化，所以很多开发人员也需要有一定微信公众号开发经验。我把我在项目中遇到的问题和踩过的坑给大家展示一下，希望能够给大家有所帮助
在开发之前，强烈建议大家首先需要去详细阅读微信企业号开发文档
根据开发文档，我们可以按照其对应的步骤一部一部去操作
1.首先，在页面引入对应js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

2.利用config接口注入权限验证配置

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

我们在做接口配置时可以在后台中配置好相对应的配置信息

3.定义ready接口

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

4.设置自定义分享

我们分享的所有操作时间都是定义在ready接口下的，其中我们首先需要把要分享的事件配置到config接口中的jsApiList中。
PS:在这里我只做关于朋友圈和微信的分享，其他的分享操作请参考微信JSSDK开发文档

// 朋友圈
wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名必须与当前企业的可信域名一致
    imgUrl: '', // 分享图标
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});
//微信好友
wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名必须与当前企业的可信域名一致
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

注意：
这里我们需要注意的是，分享的链接必须是与当前页面对应的公众号JS安全域名一致，否则将调用失败。
这个JS安全域名是在公众号配置里去定义。若域名不在这个目录下，我们的自定义分享就会失效，分享的内容链接都是网页默认提供的。
5.设置重定向跳转页面
很多人会有疑问为什么要这样做。这是因为我分享的页面是位于公众号下的活动页面，需要被分享的用户在点击打开的时候微信公众号获取自己的相应信息并执行相对应的操作。那么之前我们分享的本页面不可以么？
我们在获取到权限进入到活动页面的时候，实际上本页面是自己系统设定好的路径。而别的用户直接通过这个路径当然是微信是获取不到相应的信息。

// 当前页面
var redirect_uri = ####;    // 这是我们真正的网页链接
// 我们真正需要用户授权获取用户信息的下面的链接
var link = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=######&redirect_uri="+ redirect_uri +"&response_type=code&scope=snsapi_baseinfo&state=1#wechat_redirect";

那么我们不可以在分享链接的时候就直接定义为第二个链接么？
当然不可以！请参考第4条，链接必须是在JS安全域名下的，否则自定义链接分享失效。
我的想法就是，我自定义的链接是在当前页面下的一个页面，但这个页面是空白页面，它的作用就是重定向到我需要给用户呈现的链接和对应功能。

if($("#id").val() != null){
        	var redirect_uri = window.location.protocol + "//" + window.location.host + "/wechat/hs/activityInfo/toDetail?id=" + $("#id").val();
        	window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=#########&redirect_uri="+ redirect_uri +"&response_type=code&scope=snsapi_baseinfo&state=1#wechat_redirect";
        }

当然，应该还有更好的方法去解决这个问题，如果大家会更好的思路或见解，欢迎大家留言讨论。