移动端页面分享到微信的方案

本文作者:@小狐心月

现实背景:
1.微信自身的运营策略不同于微博,整体倾向于控制和封闭,没有给普通网页提供任何分享接口;
2.但在移动端(IOS+android系统均适用)上,微信给原生app提供了分享功能权限;那么,只要原生app把该功能下放到所属的网页,网页就拥有了分享到微信的能力;
3.微信也给其内置浏览器下放了这一权限,但必须通过微信公众号的权限启动;否则,只允许用户点右上角菜单手动分享

思路:
我们依据客户端的能力来不同处理:能够直接分享的浏览器(app),我们放出按钮引导用户点击分享;不能直接一键,但能手动分享的,我们引导用户去手动操作分享。这样可解决相当比例的移动端页面分享微信需求。

以当前的重点项目:头条产品为例,具体解释该方案(已进入执行层面):

1.(前端检测到页面被uc,qq浏览器打开时),分享按钮直接一键分享
就最近3.2-3.8统计的数据来看,两大浏览器合计占到访问手机财经页面总PV比例的35.2%、总UV比例的37.1%,还是非常可观的

该方案的缺点:
a.仅支持IOS、android双平台UC、qq浏览器;
b.该功能为第三方浏览器开放,未对我们的业务负责;一旦UC、qq浏览器自身版本更新有相关改变,我们会比较被动

这里放一个功能性demo二维码(非真实UI),各位可以用uc和qq浏览器扫描体验下:
cid:image003.png@01D17AC4.8143ADD0

  1. (前端检测到页面被IOS下safari浏览器打开时),引导用户使用safari的微信分享功能
    就最近3.2-3.8统计的数据来看,使用IOS safari访问手机财经页面达到IOS PV比例的66.7%、 UV比例的68.9%,有必要重点照顾
    IOS safari浏览器自带分享到微信的功能(下图),但目前隐藏较深,很多用户还不知道;我们可在页面呈现提醒,当用户点击分享按钮时,引导用户去使用它:
    cid:image001.png@01D17AB7.94B9E670

3.(前端检测到页面被微信内置浏览器打开时),根据页面所拥有的权限提供分享功能或引导
a.页面已接入微信公众号,可以获得使用微信的大部分功能权限,包括一键分享功能:
这里放一个微信官方的demo二维码,可用微信扫描,体验微信开放给公众号所属网页的所有权限:

b.页面未接入微信公众号,没有获得微信的大部分功能权限:这种情况我们已经很熟悉,通常的方案是只能放一个提示浮层,引导用户点击右上角手动分享

4.一点想法:
但凡我们自己控制的app,如新浪财经app,也可以将分享到微信的权限下方到自身的webview;如此,若页面经由我们的app打开,前端再予以配合也能实现(类似qq,uc浏览器的)微信一键分享的功能。


@王俊峰 提供了一个 js 包:实现手机网页调起原生微信朋友圈分享的工具nativeShare.js

您的赞助将会支持作者创作及本站运维

评论

共3条
  1. mukti 2017-07-25 20:19

    测试

  2. huixu 2017-10-24 08:45

    关于第三点的b有一点疑问,是所有的只能通过右上角分享,还是说只要获得功能权限 ,就可以自定义按钮触发分享

  3. mukti 2017-11-09 22:26

    第三点的b是说,用户手动去点击微信的右上角菜单,和页面没有关系。

发表评论


TOP