H5多平台分享

原创 笑靥 随笔 应用类 482阅读 2018-06-20 17:22:12 举报

1. 微信分享

微信下的分享分为外部应用分享到微信,和微信内部的分享。两种分享的过程都可以通过调用微信提供的JS-SDK设置。

微信JS-SDK的使用步骤详见https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
使用微信的JS-SDK首先要引入JS文件
<script src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
然后通过config接口注入权限验证配置,参数由服务端得到

然后通过ready接口处理成功验证,这里要注意imgUrl和link不能直接使用拼接字符串,可以在之前拼接好,然后由赋值给某个对象,使用对象。

2. QQ分享

QQ也有设置内容的API,需要先引用JSBridge相关的文件
<script src="//open.mobile.qq.com/sdk/qqapi.js"></script>
设置分享内容的代码如下http://open.mobile.qq.com/api/mqq/index#api:setShareInfo

需要注意的是:页面的域名要和分享链接的域名一致,否则不生效。最好不要在image_url和share_url的设置中直接拼接字符串;分享链接的长度不要超过120字节,分享的图片最小需要200*200,否则会在分享到QQ空间时被过滤掉。
以前QQ可以支持通过meta标签定义分享内容,但是目前好像已经失效,所以最好通过api设置

QQ分享还可以通过监听点击分享平台的事件,当点击Native分享面板的分享平台时,触发事件,QQ默认的分享行为不会执行;http://open.mobile.qq.com/api/common/index#api:shareMessage

3. QQ空间分享

QQ空间设置分享内容,可以使用http://open.mobile.qq.com/api/qzone/index#api:Share


腾讯移动WEB开发平台也设计了对外分享组件接口,支持微信QQ、QQ空间的分享设置,只需要在你的页面引入,具体的逻辑见http://open.mobile.qq.com/api/component/share
<script src="//qzonestyle.gtimg.cn/qzone/qzact/common/share/share.js"></script>

QQ和QQ空间提供了分享组件,可以通过设置分享URL链接的参数,来设置分享的样式。这个方法支持非QQ环境下的分享,但是非QQ用户需要进行登录。详情可见https://connect.qq.com/intro/sharetoqq

4. 微博分享

4.1 微博分享也提供了分享组件,代码如下

其中appKey参数可选,如果设置微博将会显示分享来源为key对应的应用名称(应用可在 https://open.weibo.com/ 注册);ralateUid参数可选,指定微博用户id,会在微博尾部at此用户;searchPic用于控制是否自动爬取页面的图片,和pic不共存。

4.2 通过JS API分享,同样需要先在微博开发平台申请轻应用,设置安全域名,http://open.weibo.com/wiki/%E8%BD%BB%E5%BA%94%E7%94%A8H5%E6%96%B0%E7%89%88JS
首先引入js文件:
<script src="//tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js"></script>
然后设置初始化参数

然后在invoke方法中调用bridge的action,比如setSharingContent,设置分享内容

5. 支付宝分享

支付宝也提供了JS API,可以设置分享内容,唤醒Native分享面板,但是不支持分享到QQ 微信平台。https://myjsapi.alipay.com/alipayjsapi/ui/share/share.html
首先引入JS文件
<script src="//gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>

6. 浏览器分享

QQ浏览器和UC浏览器都内置了JS API,可以打开原生的分享。这里也有一些浏览器分享的实现代码:https://www.jianshu.com/p/3d6503c68474。如果有需要可以自行查看

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复