移动端H5多平台分享

时间  2019-11-06
标签 移动 h5 多平台 分享 栏目 无线 繁體版
原文   原文链接
连接：https://www.jianshu.com/p/dc96566001da


1 微信的分享

微信下的分享经过调用微信提供的JS-SDK和引导用户点击右上角完成。
使用微信的JS-SDK须要引入以下js文件：javascript

<script src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
复制代码

设置分享内容的代码以下：php

wx.config({
    debug: false,
    appId: '公众号的appid',
    timestamp: '时间戳',
    nonceStr: '随机字符串',
    signature: '签名',
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'showOptionMenu', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem']
});

wx.ready(function() {
    const share = {
        title: '分享标题（朋友圈只显示标题）',
        desc: '分享内容',
        imgUrl: '图片URL',
        link: '分享连接（最好是后台JS安全域名）',
        success: function() {
            hideMaskLayer();  // 分享成功，隐藏引导用户分享的浮层
        },
        cancel: function() {
        }
    };
    wx.onMenuShareAppMessage(share);  // 微信好友
    wx.onMenuShareTimeline(share);  // 朋友圈
    wx.onMenuShareQQ(share);  // QQ
    wx.onMenuShareQZone(share);  // QQ空间
    wx.onMenuShareWeibo(share);  // 腾讯微博
});
复制代码

其中wx.config中的参数由服务端获得，具体可参见微信的开发文档：
mp.weixin.qq.com/wiki?t=reso…
注意在公众号后台设置JS安全域名
效果以下：css

引导用户分享

分享到朋友圈（自定义文案）

2 QQ/TIM的分享

2.1 经过JS API分享

QQ（如下无特殊说明TIM下一样有效）下也有设置分享内容的API，一样须要先引用JSBridge相关的文件：java

<script src="//open.mobile.qq.com/sdk/qqapi.js"></script>
复制代码

设置分享内容的代码以下：web

const share = {
    title: '分享标题，最大45字节',
    desc: '分享内容，最大60字节',
    image_url: '图片URL',
    share_url: '分享连接'
};
mqq.data.setShareInfo(share, callback);
复制代码

须要注意的是：分享连接长度不能超过120字节，而且必须跟页面URL同一个域名，不然设置不生效；分享的图片最小须要200 * 200，不然分享到QQ空间时会被过滤掉。
设置完分享内容后，可经过API调用唤起QQ的分享面板，免去引导的过程。shell

mqq.ui.showShareMenu();
复制代码

还有一种方法，QQ提供了监听点击分享平台的事件，当点击Native分享面板中的分享平台时，会触发此事件，QQ默认的分享行为将再也不执行。代码以下：json

mqq.ui.setOnShareHandler(function (platform) {
    mqq.ui.shareMessage({
        title: '分享标题',
        desc: '分享内容',
        share_type: platform,
        share_url: '分享连接',
        image_url: '图片URL',
        sourceName: '掌上理工大',
        back: true
    }, function() {
    });
});
复制代码

其中platform是分享平台类型，取值以下：api

编号 分享平台
0 QQ好友
1 QQ空间
2 微信好友
3 微信朋友圈

2.2 经过meta标签分享

QQ也支持经过设置meta标签订义分享内容。经过定义itemprop可设置分享内容，同时为了更好的兼容其它平台，咱们也引入了Open Graph标准。代码以下：浏览器

<meta itemprop="name" property="og:title" content="分享标题">
<meta property="og:url" content="分享连接">
<meta itemprop="image" property="og:image" content="图片URL">
<meta name="description" itemprop="description" property="og:description" content="分享描述">
复制代码

须要注意的是，meta标签须要是服务端渲染输出，经过js生成或修改无效。安全

2.3 经过URL Scheme唤起QQ分享

还能够经过URL Scheme唤起QQ进行分享，该方法的好处在于能够在非QQ环境下唤起QQ实现分享，缺点在于不能设置分享图片。代码以下：

const share = {
    title: '分享标题',
    desc: '分享内容',
    share_url: '分享连接'
};
const url_scheme = '//share/to_fri?src_type=web&version=1&file_type=news&share_id=1103437993&title=' + Base64.encode(share.title) + '&thirdAppDisplayName=5o6M5LiK55CG5bel5aSn&url=' + Base64.encode(share.share_url) + '&description=' + Base64.encode(share.desc);
location.assign('mqqapi:' + url_scheme);
setTimeout(function() {
  location.assign('timapi:' + url_scheme);
}, 2000);
复制代码

其中分享的参数在拼入URL中时须要Base64编码。为了支持TIM下的分享，咱们引入了延时函数，若是唤起QQ失败该定时器将会执行唤起TIM，唤起成功离开了此页面将不会执行。QQ和TIM均安装时优先唤起QQ。
效果以下：

唤起的Native分享

2.4 经过分享组件的URL实现

QQ空间提供了分享组件（可参见：connect.qq.com/intro/share），经过分析该组件可获得分享URL的参数。代码以下：

const share = {
    title: '分享标题',
    desc: '分享内容',
    image_url: ['图片URL'],
    share_url: '分享连接'
};
let image_urls = share.image_url.map(function(image) {
    return encodeURIComponent(image);
});
location.replace('https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + encodeURIComponent(share.share_url) + '&site=掌上理工大&title=' + share.title + '&pics=' + image_urls.join('|') + '&summary=' + share.desc);
复制代码

其中可支持多图片的分享，图片URL用竖线分隔。
该方法优势在于一样支持非QQ环境下的分享。非QQ下用户登陆后便可分享，QQ下可免登直接分享。
效果以下：

QQ空间分享组件

3 微博的分享

3.1 经过分享组件的URL实现

微博一样提供了分享组件，经过分析URL可获得分享参数。代码以下：

const share = {
    title: '分享标题',
    image_url: '图片URL',
    share_url: '分享连接'
};
location.replace('https://service.weibo.com/share/share.php?url=' + encodeURIComponent(share.share_url) + '&title=' + share.title + '&appkey=277159429&&ralateUid=1855112015&pic=' + share.image_url + '&searchPic=true');
复制代码

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

微博分享组件

3.2 经过微博API自动发送微博

微博提供了API可经过服务端调用接口直接发送一条微博。

POST api.weibo.com/2/statuses/…

参数以下：

必选 类型及范围 说明编号
access_token 是 string 采用OAuth受权方式为必填参数，OAuth受权后得到。
status 是 string 用户分享到微博的文本内容，必须URL Encode，文本中不能包含“#话题词#”，同时文本中必须包含至少一个分享的URL，且该URL的域名须要在后台设置。
pic 否 binary 用户分享到微博的图片，仅支持JPEG、GIF、PNG图片，上传图片大小限制为5M。上传图片时，POST方式提交请求，须要采用multipart/form-data编码方式。
rip 否 string 开发者上报的操做用户真实IP，形如：211.156.0.1。

具体可参见：微博开放平台

3.3 经过JS API分享

微博一样有提供JS-SDK可供调用Native的方法，在使用前须要在微博开放平台申请轻应用，并设置安全域名。
使用微信的JS-SDK须要引入以下js文件：

<script src="//tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js"></script>
复制代码

一样须要先设置初始化参数。

WeiboJS.init({
    appkey: '轻应用key',
    debug: false,
    timestamp: '时间戳',
    noncestr: '随机字符串',
    signature: '签名',
    scope: ['openMenu', 'setMenuItems', 'menuItemSelected', 'setSharingContent']
}, function() {
});
复制代码

有3个关于分享的JS API可供使用。

  1. openMenu

该API可调起Native的分享面板。

WeiboJS.invoke('openMenu');
复制代码
  1. setSharingContent

该API可设置分享的内容。

WeiboJS.invoke('openMenu', {
    icon: share.title,
    desc: share.desc,
    icon: share.image_url
});
复制代码
  1. invokeMenuItem

该API能够直接触发分享面板中点击相应菜单项。

WeiboJS.invoke('invokeMenuItem', { 
    code: platform
});
复制代码

其中platform是分享平台类型，取值以下：

编号 分享平台
1001 微博
1002 微博好友圈
1003 微博私信
1004 微信好友
1005 微信朋友圈
1006 微米好友
1007 微米圈
1008 来往（点点虫）好友
1009 来往（点点虫）动态
1010 QQ好友
1011 QQ空间
1101 短信
2001 系统浏览器
2002 复制连接

经过使用API 1 + API 2（最佳）或API 2 + API 3便可实现分享。具体可参见微博的开发文档：
open.weibo.com/wiki/轻应用H5新…

4 支付宝的分享

支付宝一样提供了JS API，能够很方便的设置分享内容和唤起Native分享面板；不足之处在于不支持分享到QQ、微信等平台。
使用支付宝的JS-SDK须要引入以下js文件：

<script src="//a.alipayobjects.com/g/h5-lib/alipayjsapi/3.0.6/alipayjsapi.inc.min.js"></script>
复制代码

代码以下：

const share = {
    title: '分享标题',
    content: '分享内容',
    image: '图片URL',
    url: '分享连接',
    captureScreen: false,
    showToolBar: false
};
ap.share(share, function() {
});
复制代码

效果以下：

支付宝Native分享

5 UC浏览器的分享

UC浏览器也提供了JS API调用Native的分享，支持唤起分享面板和分享到具体平台。代码以下：

const share = {
    title: '分享标题',
    desc: '分享内容',
    image_url: '图片URL',
    share_url: '分享连接'
};
const isiOS = /(iPhone|iPad|iPod)/.test(navigator.userAgent);  // 判断应用平台
if (isiOS) {
    if (ucbrowser.web_shareEX) {
        ucbrowser.web_shareEX(
            JSON.stringify({
                title: share.title,
                content: share.desc,
                sourceUrl: share.share_url,
                imageUrl: share.image_url,
                source: '掌上理工大',
                target: platform
            });
        )
    } else {
        ucbrowser.web_share(share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url);
    }
}
else ucweb.startRequest('shell.page_share', [share.title, share.desc, share.share_url, platform, '', '掌上理工大', share.image_url]);
复制代码

其中platform是分享平台类型，取值以下：

Android编号 iOS编号 分享平台
'WechatFriends' 'kWeixinFriend' 微信好友
'WechatTimeline' 'kWeixin' 微信朋友圈
'QQ' 'kQQ' QQ好友
'Qzone' 'kQZone' QQ空间
'SinaWeibo' 'kSinaWeibo' 微博
undefined undefined 分享面板

调起分享面板的效果以下：

UC分享面板

调起微博：

UC调起微博

6 QQ浏览器的分享

QQ浏览器也提供了JS API调用Native的分享，一样支持唤起分享面板、生成二维码和分享到具体平台。
首先须要引入以下JS文件：

<script src="//jsapi.qq.com/get?api=app.share"></script>
复制代码

代码以下：

browser.app.share({
    title: share.title,
    description: share.desc,
    url: share.share_url,
    img_url: share.image_url,
    from: '掌上理工大',
    to_app: platform
});
复制代码

其中platform是分享平台类型，取值以下：

编号 分享平台
1 微信好友
8 微信朋友圈
4 QQ好友
3 QQ空间
11 微博
5 更多
7 生成二维码
10 复制连接
undefined 分享面板

调起分享面板的效果以下：

QQ浏览器分享面板

7 掌上理工大的分享

掌上理工大是咱们团队开发的一款App。咱们一样经过JSBridge提供了分享能力。掌上理工大的WebView容器会在页面加载前注入token对象，包含了分享接口，Native端使用了友盟SDK执行具体的分享逻辑。该分享方式优势在于采用了Native的分享方式，经过调用QQ、微信、微博各个平台给App开放的分享能力，分享的体验最佳，而且能够在QQ等平台中准确的显示分享来源（掌上理工大）。
分享接口：

token.invokeShare(share.title, share.share_url, platform);
复制代码

其中platform是分享平台类型，取值以下：

编号 分享平台
0 调用分享面板
1 微信好友
2 微信朋友圈
3 QQ好友
4 QQ空间
5 新浪微博

Native会取当前页面截图做为分享图片。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程