Skip to content

手Q分享接口 - 基础篇 #55

Open
@leeenx

Description

@leeenx
Contributor

最近有个在手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分享的基础篇,对于单例测试来说是没有问题。但是对于实际放到线上测试,就会遇到一些坑。关于坑,会在后续出一片扫坑篇。

Activity

Dream4ever

Dream4ever commented on Mar 26, 2018

@Dream4ever

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

MapleShaw

MapleShaw commented on Jun 6, 2018

@MapleShaw

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

leeenx

leeenx commented on Jun 6, 2018

@leeenx
ContributorAuthor

@MapleShaw 是的。

whapply

whapply commented on Sep 9, 2019

@whapply

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @MapleShaw@Dream4ever@leeenx@whapply

        Issue actions

          手Q分享接口 - 基础篇 · Issue #55 · o2team/H5Skills