微信网页开发--仿美团、饿了么红包分享

需求

这个月，公司做了一个3.8女王节的活动。当时的需求是一个水果接龙的小游戏。比如，我发起了一条接龙，然后我把这个链接分享出去，A点击这个链接就可以看见我输入的水果，然后A再分享这个链接给B，B就可以看见我输入的水果，如果A输入了，B也可以看见A的信息，我点击分享的链接，我也可以看见A和B的输入内容(前提是A和B都输入了内容)。
这个就有点像我们在使用饿了么或者美团点外面后，我们分享红包，说点了那个分享后的链接，都可以看见大家领取的金额。

这里把好友的昵称马赛克了，头像部分马赛克了。
其实当时接到这个需求，我不知道怎么弄，但是我还是说，既然饿了么可以做，我们就可以做。

前期准备

在我的这两篇博客里面《微信网页开发–获取微信用户信息》和《微信网页开发–分享接口》。详细介绍了怎么获取微信的用户信息和微信JS-SDK的配置和使用。这里我们就需要把二者结合起来了。
在获取微信用户的用户信息的时候，微信会自动在我们的网页授权域名xx.cn/mp后面增加code参数。我们是根据这个code参数值去微信那边获取用户信息的。虽说微信在我们的网页授权域名xx.cn/mp后面增加了参数，但是我们还是可以跳转到我们想要的页面去，其实和参数没关系，这里的参数是页面之间的传值。后来我是看了微信的这一点我才知道，这个3.8女王节的活动到底怎么弄了。既然微信可以加参数我们也可以加参数，我们只需要保证每一条接龙的ID是微信的且可以传递，我们就可获取到这个接龙里面的参与人的信息，这样一条接龙就被串起来了。

美团分享链接分析

这是我今天中午下单后分享的一个美团红包的链接：
http://activity.waimai.meituan.com/coupon/sharechannel/CC25963E21354994A045E7B473A11A4A?utm_medium=iOSweb&utm_source=appshare&urlKey=5AFDE27B00CA4F6C959F08E3DCC0FB63&utm_term=AiphoneBwaimaiC5.4.0DweixinEwm-orderG3D4586323442454ED27B82636877727699EFD9F32EB971ACB44B0742A0FE2B1C20170313102414337&from=groupmessage&isappinstalled=0
链接后面后很多参数，但是只要大家点击的是我分享链接出去的，不管他是分享到微信好后还是朋友圈里面的urlKey都是一样的，这就说明他们分享都是从我这里分析出去的原始链接。这样信息就可串起来，也满足了上面的需求。这个链接的分析，我也是今天在分析的，我们的活动也早就结束了。

具体操作

希望大家已经有了前面 前期准备 里面我的另外两篇文章的基础。我们需要做的是在分析链接里面的link做工作就好了。

// 分享到朋友圈  微信好友类似
wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

比如我们的入口页面是xx.cn/mp.index那么我们的分享链接就是xx.cn/mp.index?urlkey=这个活动的ID。同时我们需要在这个页面获取这里的参数urlkey的参数值(参数名可以随便定义)，并保存起来，因为我们需要在微信授权登录之后的页面使用这个值。

整个流程

1.点击分析链接
进入xx.cn/mp.index?urlkey=这个活动的ID其实就是xx.cn/mp.index页面。保存活动的urlkey的值。
2.微信授权登录
进入xx.cn/mp获取微信用户信息。
根据这两部的得到的数据，再完成业务需求就行了。
3.活动页面分享
分享链接就这么处理就行了xx.cn/mp.index?urlkey=这个活动的ID。

疑问

有人可能就要问了，我是最初是从手机app分享出来的啊。其实要是做过app的分享就不会有这个疑问了。关于app的分享大家可以看看我的这两篇文章《【iOS】原生微信登录和分享》
和《HBuilder webApp开发(七)微信/QQ/新浪/腾讯微博分享》
然后再对比微信JS-SDK里面的分享配置，大家就知道了，其实是一样的。

最后

文章很长很乱，但是希望大家可以看清思路。代码方面，实在没什么好写的。