微信网页开发--仿美团、饿了么红包分享
需求
这个月,公司做了一个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里面的分享配置,大家就知道了,其实是一样的。
最后
文章很长很乱,但是希望大家可以看清思路。代码方面,实在没什么好写的。
微信网页开发--仿美团、饿了么红包分享相关推荐
- 视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例 互联网编程行业10年开发和授课经验 曾任太极集团,外资企业等一线互联网python高级开发工程师 现任聚焦计算机技术有限公司项目组担任架构 ...
- 微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
- 微信网页开发wx.chooseImage多图上传、预览(已解决)
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
- 微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决 参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...
- H5微信网页开发总结(授权,分享,地图)
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权 分享 地图 参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
- html微信开发样式,微信网页开发样式库
概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 1.同微信客户端一致的 ...
- 微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
- 微信网页开发 分享功能剖析
微信网页开发 分享功能剖析 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
- 微信昵称乱码 mysql_微信网页开发获取用户昵称乱码 微信昵称包含emoji表情乱码的解决方案...
微信网页开发获取用户昵称乱码 微信昵称包含emoji表情乱码的解决方案如下: 问题产生原因:由于数据库及属性一致设为utf8,而utf8只支持1-3个字节.当用户昵称为emoji表情时,获取用户基本信 ...
最新文章
- Stanford机器学习笔记-4. 神经网络Neural Networks (part one)
- 配置MySQL5.7基于keepalived的GTID的双主复制
- 机器翻译中丢掉词向量层会怎样?
- 三线调速风扇原理_学修电风扇~风机转速慢、调速失灵故障维修。
- [Objective-c 基础 - 1.3] OC带返回值的类方法
- 017——数组(十七) asort ksort rsort arsort krsort
- Linq的优点以及注意事项
- 【git 基础】detached HEAD意义详解 (非顶端分支的理解)
- [JavaScript] 怎么使用JS禁止复制粘贴
- java 进度条时间设置_java进度条时间显示怎么实现?
- MCAFEE卸载软件测试初学者,迈克菲卸载软件怎么用(手把手教你彻底卸载干净)...
- Hi3559AV100移植友方4G模块N720V5(二)
- mysql批量导出导入数据
- data.unity3d 文件过大解决方法
- 《仿美团SSM版》项目研发总结
- the disk drive for uuid=XXXX ( /media/sda1) is not reday yet or not present
- 稳定、易用、不掉线,家用NAS终极体验,铁威马F4-421上手
- Pycharm 系统找不到指定的路径 报错!!
- 数据集:银行客户信息
- 发布java包运行提示找不到配置文件
热门文章
- 技术平台应用开发专题月 | 国产化替代的本质是价值替代
- [职场人生]我的华为3Com两年(原创)
- Android开发工具-多国语言翻译对照表
- 浅谈亚马逊测评,及四大测评干货!
- 推荐你10本机器学习和数据科学书籍,确定不看一下么?(附资料)
- 别怕变老吉他谱(完美还原艾热个人直播版本)
- flyme7的Android版本,Flyme开始适配Android 7.0,首批就支持这么多机型
- 【5G核心网】 5G System Connection Management 5GS连接管理
- SYD8821 WDT模块使用说明【WDT中断的使用】【WDT复位类型】
- sql server 数据库同步时如果出现 进程未能读取文件 因为发生操作系统错误 5。解决方法: