手机Web APP如何实现分享多平台功能

话说App一般都带有分享到社交平台的入口,web网页的分享也有很不错的框架,但是随着HTML5的不断发展,手机web页面越来越多的进入到我们的生活中,那如何在我们的手机上完成分享呢?话说各大分享平台都有针对Android、Ios的SDK,作为开发者,我们只需要将SDK集成的我们的项目中即可,通过提供的外部接口,我们可以很容易的完成分享的功能;web网页呢,网上也存在很多优秀的分享框架,例如:bShare分享 、JiaThis分享;我们可以很方便的集成到我们的项目中;但是手机web页面实现分享就需要我们下点功夫了,以为这个时候,我们就可以通过调用用户安装的客户端进行分享,这里需要特别提到的就是微信分享了,网页端我们分享时,一般都是弹出一个分享的二维码,我们使用微信App扫描然后进行分享,手机端我们就不能这样操作了,我们需要当用户选中微信分享时,直接打开App进行分享,这里就要吐槽一下微信的分享JS SDK了,初次接触到这个东东时,还以为只要完成操作就可以实现自定义分享了,随着各种坑不断,最后发现,微信JS SDK仅仅只是将我们的自定义内容临时缓存,当我们需要分享时,还是需要通过微信右上角的按钮来完成操作的。好嘞,不多讲废话了,进入今天的主题,接下来我将按照通过超链接完成新浪、QQ、QQ空间、腾讯微博分享,然后为大家奉上基于C#平台的微信JS SDK分享组件的签名逻辑,最后带领大家完成手机web端分享。

  进入第一点:通过超链接完成分享

  对于常用的社交平台我们基本可以通过超链接的方式进行内容分享,当然微信除外,微信不支持这种分享方式,这种分享方式可以便于我们自定义分享,并且使用起来非常的方便。

function shareSina() { //分享到新浪微博 var sharesinastring = 'http://service.weibo.com/share/share.php?title=' + $("#title").val() + '&url=' + $("#url").val(); window.location.href = sharesinastring; } function shareQQzone(){ var p = { url:location.href, showcount:'0',/*是否显示分享总数,显示:'1',不显示:'0' */ desc:'',/*默认分享理由(可选)*/ summary:'',/*分享摘要(可选)*/ title:'',/*分享标题(可选)*/ site:'满艺网',/*分享来源 如:腾讯网(可选)*/ pics:'', /*分享图片的路径(可选)*/ style:'203', width:98, height:22 }; //分享到QQ空间 var sharesinastring = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?title=' + $("#title").val() + '&url=' + $("#url").val() + '&site="满艺网"'; window.location.href = sharesinastring; } function shareQQ() { var p = { url: location.href, /*获取URL,可加上来自分享到QQ标识,方便统计*/ desc: '', /*分享理由(风格应模拟用户对话),支持多分享语随机展现(使用|分隔)*/ title: '', /*分享标题(可选)*/ summary: '', /*分享摘要(可选)*/ pics: '', /*分享图片(可选)*/ flash: '', /*视频地址(可选)*/ site: '满艺网', /*分享来源(可选) 如:QQ分享*/ style: '201', width: 32, height: 32 }; //分享到QQ var sharesinastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $("#title").val() + '&summary=' + $("#url").val() + '&url=' + $("#url").val() + '&site="满艺网"'; window.location.href = sharesinastring; } function shareQQweibo() { var p = { url: location.href, /*获取URL,可加上来自分享到QQ标识,方便统计*/ title: '', /*分享标题(可选)*/ pic: '', /*分享图片(可选)*/ site: '满艺网' /*分享来源(可选) 如:QQ分享*/ }; //分享到腾讯微博 var sharesinastring = 'http://v.t.qq.com/share/share.php?title=' + $("#title").val() + '&url=' + $("#url").val() + '&site="满艺网"'; window.location.href = sharesinastring; }

  以上便是分享都新浪微博、QQ、QQ空间、腾讯微博的JS代码,我们只需要在页面需要分享的位置进行一下调用即可。当然还有很多平台,一样支持这种形式的分享内容,各位小伙伴自己去摸索吧,这里我们不再一一赘述。

  下面介绍一些微信分享:

  一开始我们便说道微信内置的浏览器右上角带有分享功能,这也导致我们在自己的网页上无法直接分享到微信的朋友圈,而微信为我们提供了一个用于微信自定义分享的JS SDK,小伙伴是不是已经按耐不住自己的激情了,下面我们来先简单看一这个JS SDK为何物?微信官方提供的文档到时挺详细,但是想要开发JS SDK我们首先需要一个微信公众号,然后我们点击“接口权限”可以查看到我们所拥有的权限,如下:

手机Web APP如何实现分享多平台功能

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzfpws.html