H5Skills icon indicating copy to clipboard operation
H5Skills copied to clipboard

Published 20 hours ago • verified publisher icon o2team

手Q分享接口 - 基础篇

Open leeenx opened this issue 7 years ago • 4 comments

最近有个在手Q上的活动，需要使用到手Q的分享功能。手Q分享我用过的有两类四种方法可以实现

1. 不使用手Q接口

不使用手Q接口有两种方法可以实现：

  • 在meta标签中添加分享信息
  • 在body内容的最开始处添加分享描述和分享图片

使用meta标签，可以使用下面三个标签来传递“分享title”，“分享描述”，“分享图片”

<meta itemprop="name" content="这是分享的标题" />
<meta itemprop="image" content="http://xxx.com/xxx.jpg" />
<meta itemprop="description" itemprop="description" content="这是分享描述" />

此时的分享地址，将会取当前页面的url

当然也可以直接在body的最开始处，写一个隐藏的div，把“分享描述”和“分享图片”写上去。如下：

<div style="position:absolute; left:-99999px; top:-999999px;">
	<img src="images/share.png" border="0">
	京东六一送大礼！积木、泰迪熊、遥控汽车、早教机，5000元旅游基金免费领哟！动动手指就有机会获得~
</div>

此的分享地址，也将是当前页面的url，页面分享抬头将会是页面的抬头<title>...</title>

很明显，不使用手Q接口的进行分享操作，限制太大了，只能实现最基础的分享。想实现更多的分享操作，就需要调用手Q的api。

ps：除了上面的两类四种方式，还有web页分享接口

2.使用MobileQQ JS API接口实现分享

  • 使用mqq.data.setShareInfo
  • 使用setTitleButtons,setOnShareHandler和shareMessage等多接口联合定制实现

mqq.data.setShare

mqq.data.setShateInfo算是手Q最早的一批api（手Q在v4.6以上都可以使用）了，最早使用的分享接口就是这个setShareInfo，简单易用。 调用的代码如下:

if(mqq&&mqq.data){
    mqq.data.setShareInfo(
        {
            share_url:location.href,//分享url，必须与当前页面同域。如果不传则直接使用当前页url
            title:"shareinfo抬头",//分享抬头
            desc:"shareinfo描述",//分享描述
            image_url:"http://xxx/xxx.jpg"//分享图标
        }
    );
}

mqq.ui.shareMessage

使用mqq.ui.shareMessage接口实现分享

mqq.ui.shareMessage 是v4.7.2版本之后推出来的接口。它的作用是解决setShareInfo只能由用户主动点右上角按钮后发起。直接调用mqq.ui.shareMessage接口，h5页面自己发起分享操作了。

以下是MobileQQ JS API提供shareMessage的api：

mqq.ui.shareMessage(
	{
		title:"分享标题",//必填
		desc:"分享摘要（描述）",//必填
		share_url:"http://xxx",//分享地址 - 必填
		image_url:"http://xxx/xx.jpg",//分享图标 - 必填
		share_type:0||1||2||3,//0:QQ好友，1:QQ空间，2.微信好友，3.微信朋友圈。默认为0
		back:true||false,//发送消息之后是否返回到web页面，默认false，直接到AIO,注：该参数只对share_type=0时起作用
		shareElement:"news"||"audio"||"video",//分享的类型，news:图片文分享类型，audio:音乐分享类型，video：视频分享类型。默认为news
		flash_url:"url",//如果分享类型是音乐或视频类型，则填写流媒体url
		puin:"xxx",//公众帐号uin，用于定义结构化消息尾巴，只在公众帐号分享的时候填写，若不是请不要请，当puin没有索引到本地记录，则显示sourceName字段文本，若没有sourceName字段，则直接显示puin数字。
		sourceName:"京东购物",//公众帐号昵称，仅当有puin字段并且puin没有索引到本地记录时生效
		appid:"appid",//来源appid，在QQ互联申请的appid，如果有，可以填上
		toUin:"xxx",//分享给指定的好友或群，如果存在这个参数，则不拉起好友选择界面
		uinType:0||1,//分享给指定好友或群的uin类型:0：好友，1：群
	},
	function(json){//分享回调
		if(0==json.ret){
			//用户点击发送，完成整个分享流程
		}else if(1==json.ret){
			//用户点击取消，中断分享流程
		}
	}
);

以下是通常使用的调用代码：

mqq.ui.shareMessage(
	{
		title:"分享标题",//必填
		desc:"分享摘要（描述）",//必填
		share_url:"http://xxx",//分享地址 - 必填
		image_url:"http://xxx/xx.jpg",//分享图标 - 必填
		share_type:0||1||2||3,//0:QQ好友，1:QQ空间，2.微信好友，3.微信朋友圈。默认为0
		puin:"12345",//puin可以乱传数字，或直接不要puin这个字段。
		sourceName:"京东购物" //小尾巴文字
	},
	function(json){
		//分享成功回调
	}
);

puin传与不传的区别在于有个小icon和没有小icon的区别。如下图： 分享截图

以下是测试DEMO：

<a href="javascript:share(0)">分享给好友</a><br />
<a href="javascript:share(1)">分享到空间</a><br />
<a href="javascript:share(2)">分享给微信好友</a><br />
<a href="javascript:share(3)">分享到微信朋友圈</a><br />
<script type="text/javascript">
var share=function(type){
	type=type||0;
	mqq.ui.shareMessage(
		{
			title:"分享标题",//必填
			desc:"分享摘要（描述）",//必填
			share_url:"http://wqs.jd.com/promote/2015/childrensday/index.html",
			image_url:"http://wqs.jd.com/promote/2015/childrensday/images/share.png",
			share_type:type,
			puin:"12345",
			sourceName:"京东购物"
		},
		function(json){
			//分享成功回调
			alert(json.ret==0?"分享成功":"您取消了分享");
		}
	);
}
</script>

以下是DEMO地址（请用手Q扫描）: 分享截图

MobileQQ JS中还有几个接口常被应用于自定分享:

  • setOnShareHandler
  • setTitleButtons
  • showShareMenu

setOnShareHandler

setOnshareHandler是手Q v4.72后推出的接口，其实作用是监听分享菜单的前四个按钮：好友、空间、微信好友、微信朋友圈。如下：

mqq.ui.setOnShareHandler(function(type){
	//0：好友，1：空间，2：微信好友,3:微信朋友圈
	alert(type);
});

分享按钮对应的type

可以通过setOnShareHandler与shareMessage组合来实现原生操作上的分享，即可以取代setShareInfo。如下：

var shareType=["QQ好友","空间","微信好友","微信朋友圈"];
mqq.ui.setOnShareHandler(function(type){
	//0：好友，1：空间，2：微信好友,3:微信朋友圈
	mqq.ui.shareMessage(
		{
			title:shareType[type]+"分享标题",
			desc:"分享摘要（描述）",
			share_url:"http://xxx",
			image_url:"http://xxx/xx.jpg",
			share_type:type,
			puin:"12345",
			sourceName:"京东购物"
		},
		function(json){
			//分享成功回调
		}
	);
});

个人觉得如果是有差异化分享用这两个接口组合是必要的，如果是无差异化分享的话，直接使用setShareInfo来得直接方便一点

###setTitleButtons

setTitleButtons的作用是用来配置手Q webview顶部按钮（左上角与右上角两个按钮）的标题，点击回调等功能。

分享按钮对应的type

setTitleButtons虽然是一个很早期的接口，但是，由于功能的迭代问题，目前来说v5.3以上的版本功能才是全的。不过，v4.7.2以上版本也能使用大多数据功能了。考虑到现在最新版本已经到v5.6以上，所以setTitleButtons的功能还是可以随便使用的。

mqq.ui.setTitleButtons({
	left:{//左上角按钮
		title:"返回",//标题
		callback:function(){
			//点击回调
		}
	},
	right:{//右上角按钮
		title:"我的..."，//右上角按钮标题
		hidden:false/true,//是否隐藏右上角按钮
		iconID:0~6,
		/*
			@右上角按钮图片，目前有6个。其中0和6是对5的扩展。
			@1：编辑图标；2.删除图标；3.浏览器默认图标；4分享图标；5上传图标（有动画效果）
			@开发一般只需要用到3或4
		*/
		callback:function(){
			//点击后回调
		}
	}
});

扫一扫二维码看一下，各个图标的具体样子

分享按钮对应的type

安卓和ios显示略有不同

showShareMenu

showShareMenu 唤醒分享面板，就是默认情况下点webview右上角按钮时弹出的面板。v 5.2以上支持

手Q的购物主页就是通过setTitleButtons,setOnShareHandler和shareMessage这几个接口定制了分享操作。

除了以上接口，还有一个叫setShareUrl，其用法是setShareUrl(url,callback);可以单独配置分享的地址。手Qv4.6以上可以调用。这个方法一般是meta配置分享文案

*setActionButton

setActionButton是手Q v4.6推出来的很早期的接口了，用它来配置右上角按钮的标题、点击回调等。说白了就是setTitleButtons的 right对象，在MobileQQ API接口文档里已经明确指出setActionButton已经不维护了。所以，如果还在用的同学请自觉改用setTitleButtons

虽然说是不建议使用了，但是还是说一下它的用法吧：

mqq.ui.setActionButton(
	{
		title:"我的..."，//右上角按钮标题
		hidden:false/true,//是否隐藏右上角按钮
		iconID:0~6,
		/*
			@右上角按钮图片，目前有6个。其中0和6是对5的扩展。
			@1：编辑图标；2.删除图标；3.浏览器默认图标；4分享图标；5上传图标（有动画效果）
			@开发一般只需要用到3或4
		*/
	},
	function(){
		//点击后回调
	}
);

从上面代码可以看出来，setActionButton的调用与setTitleButtons的right对象几乎一样。

手Q web页面分享接口

使用web页面分享接口的好处是非手Q环境下也可以调用。坏处是

  1. 如果在手Q环境下，分享页面时页面会发生跳转，所以一般的手Q活动页面不会用到。
  2. 非手Q环境，需要QQ登录并且还需要传appid才可以调用。
    不过也介绍一下，说不定以后会有用

以下是定向分享QQ好友

//以下是炫斗密令的实例调用
var sid = zURL.get('sid');
if (!sid) {
    sid = milo.request('vkey');
}
if(!sid){
    sid = milo.cookie.get("vkey");
}
if(!sid || sid == "undefined"){
    sid = "";
}
var url, config;
url = 'http://openmobile.qq.com/api/check?page=shareindex.html&style=9&status_os=0&sdkp=0&nobar=1';
config = {
    title: '炫斗密令',  //标题
    pagetitle: '炫斗密令',  //页面标题
    summary: "炫斗密令-天天炫斗首部动作微网剧开播",  //简介
    imageUrl: 'http://ossweb-img.qq.com/images/ttxd/act/a20140909movie/m/share_img.png',  //分享图片
    appid: 'xxxxxxxxx',  //应用ID
    nobar: 1,
    targetUrl: 'http://ttxd.qq.com/act/a20140909movie/index.html',  //分享链接
    page_url: 'http://ttxd.qq.com/act/a20140909movie/index.html',  //点击返回跳转的链接
    appCallback: 'http://mapps.game.qq.com/lian/a20140909movie/Rec.php?openid='+openid,  //分享完成后请求的URL
    sid: sid
};
url = url + '&' + $.param(config);

location.href=url;

以下是分享到Q空间的代码

var sid = zURL.get('sid');
if (!sid) {
    sid = milo.request('vkey');
}
if(!sid){
    sid = milo.cookie.get("vkey");
}
if(!sid || sid == "undefined"){
    sid = "";
}
var url, config;
url = 'http://openmobile.qq.com/api/check2?page=qzshare.html&loginpage=loginindex.html&logintype=qzone';
config = {
    title: '炫斗密令',  //标题
    summary: "炫斗密令-天天炫斗首部动作微网剧开播",  //描述
    url: 'http://ttxd.qq.com/act/a20140909movie/index.html',  //分享地址
    desc: '炫斗密令-天天炫斗首部动作微网剧开播',  //默认分享语
    appid: '101019894',  //应用ID
    site: '天天炫斗',
    imageUrl: 'http://ossweb-img.qq.com/images/ttxd/act/a20140909movie/m/share_img.png',
    successUrl: 'http://ttxd.qq.com/act/a20140909movie/index.html',  //成功后跳转的链接
    failUrl: 'http://ttxd.qq.com/act/a20140909movie/index.html',  //用户取消后跳转的链接
    callbackUrl: 'http://mapps.game.qq.com/lian/a20140909movie/Rec.php?openid='+openid,  //分享结果后回调
    sid: sid
};
url = url + '&' + $.param(config);

location.href=url;

以上是手Q分享的基础篇，对于单例测试来说是没有问题。但是对于实际放到线上测试，就会遇到一些坑。关于坑，会在后续出一片扫坑篇。

leeenx avatar Jul 12 '17 09:07 leeenx

多谢分享！根据 腾讯官方文档 的内容来看，setShareInfo 的相关字段名称已经变更了。

Dream4ever avatar Mar 26 '18 06:03 Dream4ever

想问下，mqq.ui.shareMessage这个接口，是不是对当前页的域名有要求，我把demo里面的代码放到自己的域名下去测试，就是调不起分享的界面

MapleShaw avatar Jun 06 '18 07:06 MapleShaw

@MapleShaw 是的。

leeenx avatar Jun 06 '18 08:06 leeenx

这个 mqq是哪来的呀 ？ 我看 官方文档 不是这样用的呀

whapply avatar Sep 09 '19 08:09 whapply