[转] 产品知识分享:外部链接分享到微信的逻辑

分享给需要的产品!如果你刚接触微信开发但不懂技术,或从未接触但想了解,那就看看吧!

一、如果做好外部链接分享到微信呢?



你的微信群里是不是到处都是分享的链接? 你是否想过为什么从外部app分享到微信的文章你直接点击就可以看?而在抢外卖红包时总是要弹出登录授权页面,然后还要求你填写手机号? 你是否思考过其中的逻辑?

本篇文章主要就几个示例展开讲述,最后提出优化方案。

1、先举几个示例

1)从美团外卖app处分享一个红包到微信中,用户在第一次领取红包之前,先得拿到微信授权确认登录后,再填写手机号,才能领取成功

2)从钉钉app处分享二维码到微信群里用以邀请成员加入公司团队 ,扫描二维码后无须微信授权直接进入邀请页面,填写个人相关信息后,加入团队

先来一堆微信公众平台开发文档说明

网页授权获取用户基本信息:

如果用户在微信客户端中访问第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

关于网页授权的两种scope(应用授权作用域)的区别说明:

1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)

2、以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。

2、示例分析

第一个示例中,当美团外卖红包被分享到微信时,通过微信授权可以拿到用户的基本信息(一般是:昵称、头像)。这属于网页授权中第二种scope,美团外卖需要获取用户的基本信息来显示红包数额排行榜,所以该种授权需要用户手动同意,页面上的表现就是需要点击“确认登录”,用户授权成功后,美团外卖就可以拿到该用户的基本信息(微信昵称、微信头像)。要求填写手机号是为了将领取到的红包关联到该用户的美团外卖账号(手机号),可方便进入美团外卖app直接使用。

外卖红包分享到微信

第二个示例中,钉钉分享了二维码到微信群里,扫描后无须授权登录直接进入了页面。这属于网页授权中的第一种scope,扫描二维码后,微信静默授权并直接自动跳转到邀请页面,用户在邀请页面填写了手机号、真实姓名和验证码后可加入团队,审核通过之后直接在钉钉app上用该手机号登录就可以看见已加入的该团队。

钉钉二维码分享到微信

微信公众平台开发时有一个openID,openID是普通用户的一个唯一的标识,只针对当前的公众号/H5页面(外部链接)有效。也就是说,同一用户在和不同的公众号/外部链接产生关注/消息交互时,该用户会和不同的公众号/外部链接之间产生联系,且建立每个联系时用户所拥有的openID是不一样的;至于这个openID是用来干什么的,第三点讲的很明白:在用户和公众号产生消息交互或关注后事件推送,才能根据用户的openID来获取用户基本信息的。也就是说只有用户和外部链接/公众号产生消息交互/关注后,建立联系时所产生的各个openID才生效,外部链接/公众号才可以用对应用户其相应的openID来获取用户基本信息。关系如图:

关系图

该图为需要手动授权获取用户信息的情况,如果不需要获取用户信息,直接拿到openID跳转页面即可

3、关于特殊场景下的静默授权

1)如上,网页授权的第一种scope

2)对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。所以,平常你从微信号进入外部链接(H5页面)从没让你授过权!

二、总结+优化



1、分享外部链接到微信,无非就是这么两种情况

1)无须拿到用户信息,静默授权,直接进入页面,比较常见的如公司介绍类H5页面、下载页面等;

2)须拿到用户信息,手动授权,确认授权后进入页面,比较常见的如各种外卖红包;须根据是否需要用户信息从而选择合适的方式。

2、如果有数据交互咋办?

上述情况之后,如果还需要进行数据的交互,如领取红包这种,则产品需要考虑加入登录/注册,将数据绑定到用户的账号,方便用户进入app直接使用,否则这数据就是幽灵数据,一旦离开微信,就不知道是谁的了!

3、可以如何优化?

其实你还可以观察到,领外卖红包时,只有第一次领取红包时才需要进行用户填写手机号(登录/注册),第二次及其之后再领取红包则只要经过授权即领取成功,这是因为第一次填写后,就将相应的用户openID和手机号信息保存在了本地,这样之后用户再进入红包页面就可以识别出来不用再登录了。

将信息保存在本地这种情况其实可以用到外部链接的优化上,比如钉钉,会发生多次邀请的情况(邀请进入多个团队),钉钉保存了第一次加入团队时填写的手机号信息,所以在第二次及其之后再次打开钉钉分享出来的邀请页面时,已默认填写好手机号码,只需要填写真实姓名和验证码然后点击“加入团队”即可。钉钉还可以做的更好,真实姓名也一起保存了呗,以后就只要填写验证码然后加入团队不就好了!

钉钉,第二次进入

当然钉钉不像外卖红包第二次及其之后进入直接领取红包那样可以直接加入团队,因为钉钉需要你确认是不是要加入,这是业务需求。

到此结束,欢迎指正!

文/小圣(简书作者)
原文链接:http://www.jianshu.com/p/9710a186ea65
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

时间: 2024-08-26 08:36:54

[转] 产品知识分享:外部链接分享到微信的逻辑的相关文章

微信更改分享图片和分享链接的方法

1.将以下代码加到head头里 <script>        function htmlEncode(e){return e.replace(/&/g,"&").replace(/ /g," ").replace(/</g,"<").replace(/>/g,">").replace(/\n/g,"<br />").replace(/&quo

【链接分享】第一期:科学太疯狂——在另一个星球上打印人类

科学好疯狂 Here's the Plan to Eavesdrop on Aliens' Interplanetary Communications :计划偷听到外星人的星际通信 Our Best Bet for Colonizing Space May Be Printing Humans on Other Planets : 科学家称太空殖民的最好方法是在另一个星球上打印人类,你愿意被打印吗? 趣味设计 倾倒的咖啡灯 Guitar learning gloves让人瞬时变天才 :人人都是钢

微信分享的链接必须是当前链接

1 /** 2 * 微信分享 3 * title 分享标题,默认document.title 4 * desc 分享描述,默认document.title 5 * link 分享链接,默认当前地址 6 * imgUrl 分享缩略图,默认页面logo 7 */ 8 var wxShare = function (shareData){ 9 //动态引入微信js 10 var wx_script = document.createElement("script"); 11 wx_scrip

Vue 项目实现微信分享的自定义分享链接问题解决

前言: 前两天在做微信公众号里的项目的时候有一个需求是在 vue 项目中实现微信分享,然后在自定义分享链接的时候出了一些问题,分享出去的自定义链接(链接中携带参数)总是会直接跳到项目首页,而且是玄学跳转,时而自定义链接正常,时而直接跳到首页,答案在文章最后面. 正文: 1. 这里不说微信分享中的配置微信 js-sdk ,请自行查阅微信公众号开发文档 2. 阐述下 解决此问题的一些思路 解决这个问题需要知道这样的信息,微信公众号中的项目在请求签名和自定义分享链接的时候对于Vue 的#路由不太友好

微信自定义分享卡片链接的解决方案(可自定义标题 描述 缩列图)

微信现在是众多公司营销的重点.遍布朋友圈和消息群组里的html5各位可能也是天天见了,不过自从微信更新了官方api后,对整个微信内的页面管控都严格了不少. 一.微信分享卡片自定义缩略图消失的原因--微信官方策略的调整: 结合以上微信官方声明,对网页的微信分享卡片自义分享,我们能得出以下三个主要结论: 网页必须通过接入微信JSSDK的形式来进行调用分享:网页对应的站点域名必须是"公众号JS安全域名":"公众号JS安全域名"必须是经过认证的公众号中添加管理的域名: 以上

QQ空间、新浪微博、腾讯微博等一键分享API链接代码

1.新浪微博:http://service.weibo.com/share/share.php?url= count=表示是否显示当前页面被分享数量(1显示)(可选,允许为空)&url=将页面地址转成短域名,并显示在内容文字后面.(可选,允许为空)&appkey=用于发布微博的来源显示,为空则分享的内容来源会显示来自互联网.(可选,允许为空)&title=分享时所示的文字内容,为空则自动抓取分享页面的title值(可选,允许为空)&pic=自定义图片地址,作为微博配图(可选

android 集成系统分享和第三方分享案例

现在很多的应用基本都会集成分享这个功能,该功能包括系统分享(比如邮件,短信)和第三方分享(比如QQ和微信).其中有些公司会选择使用第三方的库来简化这些操作,加快开发,用的比较多的比如友盟社会化分享SDK,缺点就是自由度太低,因为可能你仅仅只是需要QQ和微信,其他的公司就会选择自己导入所需要的第三方SDK来自定义分享功能,自由度高,于是这篇博客主要来介绍后一种自定义分享功能的案例demo,下图是demo的运行效果: 具体分析一下源码,由于分享的内容根据需求的不同而不同,为了简单起见,我们就以最常用

iOS 分享至友盟分享

iOS 友盟分享 这个主要是提到如何通过友盟去自定义分享的步骤: 一.肯定要去友盟官网下载最新的SDK包,然后将SDK导入到你的工程文件夹里面去: 二.注册友盟账号,将你的APP添加到你的账号里面然后获取到一个Key; 三.  在AppDelegate内设置友盟AppKey -(BOOL)application:(UIApplication*)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [UM

微信JS-SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置 原文:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html

wx.ready(function () { // 1 判断当前版本是否支持指定 JS 接口,支持批量判断 document.querySelector('#checkJsApi').onclick = function () { wx.checkJsApi({ jsApiList: [ 'getNetworkType', 'previewImage' ], success: function (res) { alert(JSON.stringify(res)); } }); }; // 2.