APP、网页分享功能的实现

时间：2023-05-14 09:33:02 | 来源：网站运营

时间：2023-05-14 09:33:02 来源：网站运营

APP、网页分享功能的实现：

写作背景：

对于内容的分享是用户的常见操作，也是产品中常用的功能之一。在一次网站设计当中，恰好涉及分享这一功能，于是在网络上各种搜集前人资料，把APP和网页的分享功能一并梳理了一下（所有资料来源基本都通过链接的方式标示出来了）。本文只是简单阐述分享的一般实现原理，不涉及具体的功能流程和实现代码。若其中存在不当之处，还望大家不吝赐教。

一、网页中的分享

1 PC网页分享

1.1 分享到微信

PC网页一般通过生成网页二维码，让用户使用手机微信扫码并在微信的浏览器中打开；打开之后，在微信内置的浏览器中使用微信自己的分享功能进行分享。


-----如何自定义分享样式？

使用微信内置的浏览器进行二次分享时会遇到一个问题，那就是无法展示网页缩略图，只能展示默认占位图。那么如何对分享的样式进行自定义呢？以下是微信官方给出的解决方案：

接入微信的JS-SDK（开发者在网页上通过JavaScript代码使用微信原生功能的工具包），在使用微信内置浏览器进行分享时，可以对网页分享样式（标题和图片的样式）进行自定义。这样可以保证用户在微信生态内进行二次分享时有比较好的分享效果。

可以参考这篇文章

【解决方案】微信网页链接分享自定义 - Kuroko's Development Notes - CSDN博客




1.2 分享到微博、QQ

和微信不同，从网页发展起来的微博和QQ对网页分享都有很好的支持。通过代码将分享按钮嵌入到网站，用户点击按钮即可唤起微博/QQ登录或分享页面（网页而非客户端）

具体方法参照平台官方文档说明 http://open.weibo.com/sharebutton




2 移动端网页分享

移动端可以使用浏览器自带的分享功能；当然为了和PC保持统一，也可以在页面中加入分享功能。

2.1 分享到微信

移动端一般通过生成网页链接，让用户复制链接，然后手动分享（粘贴链接）到微信。效果比较差

2.2 分享到微博、QQ

和PC端并无差异：通过代码将分享按钮嵌入到网站，用户点击按钮即可唤起微博/QQ登录或分享页面（网页而非客户端）

二、APP内的分享

1 使用系统级别的分享插件

iOS提供系统级别的share extension分享插件，帮助系统和应用、应用和应用进行内容的分享。App开发者只需要在开发代码中加入原生分享插件，并向系统注册后，就可以通过Extension来实现与系统和其他App（同样注册并使用了extension）的内容分享（输出、接受）了。
使用原生分享插件的好处在于分享操作不需要进入containing APP（接受内容的APP），不用在应用间来回跳转；容纳更多应用，更具开放性；用户可以根据使用习惯，自定义分享面板中的containing APP。

具体可以参考这篇文章iOS的Share Extension分享机制

2 使用自定义分享插件

国内应用更多结合自己的商业目标和业务需要，使用自定义的分享插件，这时需要遵循containing APP（接受内容的APP）的规范。以分享到微信为例，一般来说通过集成微信的SDK和调用微信的接口，唤起微信的share sheet（分享面板）进行分享，之后再返回自己的应用。




-------微信分享的官方说明------

微信分享及收藏是指第三方App通过接入该功能，让用户可以从App分享文字、图片、音乐、视频、网页、小程序至微信好友会话、朋友圈或添加到微信收藏。

微信分享及收藏功能已向全体开发者开放，开发者在微信开放平台帐号下申请App并通过审核后，即可获得微信分享及收藏权限。

微信分享及收藏目前支持文字、图片、音乐、视频、网页、小程序共六种类型（海外应用支持网页、小程序类型分享）。开发者在App中在集成微信SDK后，可调用接口实现。

-------------------------------------------

具体可以参考微信官方文档

https://open.weixin.qq.com/cgi-bin/showdocument?action=dir_list&t=resource/res_list&verify=1&id=open1419317332&token=&lang=zh_CN




不过目前，微信已经取消了对分享结果的返回，所有我们已经无法知道用户是否真正完成了分享还是半途而废。。。

结语：

分享功能虽然常常使用，却也很容易被用户和产品经理忽略。以上对APP和网页的分享实现进行了简单梳理，其中很多细节还有待进一步学习和补充～