微信、qq二次分享
前言
我们平时做微信分享的时候,一般分享出来的页面都是一个简单的html页面,不会加入框架之类的东西。所以当我们在分享出来的页面里面再次进行分享的时候,由于我们没有配置分享的标题、描述这些东西,分享出去的卡片会是默认的样式。很显然对于产品和测试来说,如果我们分享出去的卡片不是定制化的,肯定是不行的,这种情况我们就需要在分享出来的这个页面里面单独配置微信和qq分享。
在分享页引入WxjsSDK和QQjsSDK
<script type="text/javascript" src="//open.mobile.qq.com/sdk/qqapi.js?_bid=152"></script> //引入QQjsSDK
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> //引入WxjsSDK
引入这两个jsSDK后会在window上面挂载jWeixin对象和mqq对象,通过这两个对象就可以使用wx和qq提供的配置分享的方法。
在分享页配置手机qq分享
mqq.data.setShareInfo({
share_url: encodeURI(window.location.href),
title: '分享的标题',
desc : '分享的描述',
image_url : '分享的图片'
}, function () {
// 成功回调函数
});
注意share_url的长度不能超过120个字节,不然在安卓手机上qq在分享页二次分享的时候会发送失败(虽然分享后qq提示分享成功),但是在iOS上面就不会出现这个问题。
在分享页配置微信分享
jWeixin.config({
debug: false,
appId: res.data.appId, // 必填,公众号的唯一标识
timestamp: signatureObj.timestamp, // 必填,生成签名的时间戳
nonceStr: signatureObj.nonceStr, // 必填,生成签名的随机串
signature: signatureObj.signature, // 必填,签名
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'openLocation'] // 必填,需要使用的JS接口列表
});
jWeixin.ready(function () {
_setShare(
'分享的标题',
'分享的描述',
encodeURI(location.href),
location.origin + '/static/imgs/logo.jpg',
function () {
});
});
function _setShare(title, desc, url, image, callBack) {
//分享到朋友圈
jWeixin.onMenuShareTimeline({
title: title, // 分享标题
link: url, // 分享链接
imgUrl: image, // 分享图标
success: function () {
callBack(true);
},
cancel: function () {
callBack(false);
}
});
//分享给朋友
jWeixin.onMenuShareAppMessage({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: image, // 分享图标
type: "link", // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
callBack(true);
},
cancel: function () {
callBack(false);
}
});
//分享到qq
jWeixin.onMenuShareQQ({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: image, // 分享图标
success: function () {
callBack(true);
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//分享到腾讯微博
jWeixin.onMenuShareWeibo({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: image, // 分享图标
success: function () {
callBack(true);
},
cancel: function () {
callBack(false);
}
});
//分享到qq空间
jWeixin.onMenuShareQZone({
title: title, // 分享标题
desc: desc, // 分享描述
link: url, // 分享链接
imgUrl: image, // 分享图标
success: function () {
callBack(true);
},
cancel: function () {
callBack(false);
}
});
jWeixin.showOptionMenu();//打开分享功能
}
在我的这个项目中后端只给了我appId和jsapi_ticket,所以需要我们前端自己生成signature签名和随机字符串和时间戳
function createSignature(ticket) { // 传入的参数为后端返回的jsapi_ticket
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var noncestr = '';
var timestamp = Math.ceil(new Date().valueOf() / 1000);
var url = location.href.split('#')[0];
for (var i = 0; i < 32; i++) {
noncestr += $chars.charAt(Math.floor(Math.random() * maxPos));
}
var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp=' + timestamp + '&url=' + url;
return {
nonceStr: noncestr, // 生成签名的的随机字符串
signature: hex_sha1(str), // 签名
url, // 生成签名的的 URL
timestamp // 生成签名的时间戳
};
}
微信、qq二次分享的更多相关文章
- QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式
目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...
- 微信、qq网页二次分享
二次分享是指,在APP或者浏览器分享到微信或者qq,然后从微信或者qq再分享到别的平台.如果不处理,再次分享出去的图片或者标题就不会显示,对用户非常不友好. 一.微信二次分享 官方接入文档:https ...
- 微信二次分享的JSSDK的调用
网页端微信的二次分享如果不调用分享的SDK,分享之后就不会带有标题.描述 .缩略图 微信分享SDK调用 引入 <script src="//res.wx.qq.com/open/js/ ...
- H5页面二次分享
对于H5页面来说二次分享还是蛮重要的,毕竟qq还是微信发出去之后习惯性的使用自带的分享功能.和PC端不同,PC直接复制地址了.前两天在做请柬,踩了不少的雷,个人开发和公司开发还是不一样,各种问题,其他 ...
- ShareSDK集成微信、QQ、微博分享
1.前言 为什么要使用第三方的作为集成分享的工具呢?而不去用官方的呢?有什么区别么? 一个字"快",如果你使用官方的得一个个集成他们的SDK,相信这是一个痛苦的过程. 2.准备需要 ...
- 微信公众号jssdk自定义分享,二次分享自定义失败解决技巧
百度上自定义微信分享标题以及描述的解决方法有很多,基本上都能实现一次分享:流程基本上是这样的 1.首先引入微信jssdk =><script src="http://res.wx ...
- PHP 微信分享(及二次分享)
js部分: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> &l ...
- (转载)Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow
Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow 这是一张QQ空间说说详情的截图. 分析: 1.点击右上角三个点的图标,在界面底部弹出一个区域,这个 ...
- [h5+api]移动app开发用到的微信好友,朋友圈,qq好友,新浪微博分享合集
适用H5+环境,能够使用plus方法的移动app中 /** * Created by HBuilder. * User: tyx * Date: 2018-11-21 * Time: 17:28:51 ...
随机推荐
- 上海嘉韦思杯部分writeup
第二题 打开赛题,看到加密字符串,进行base64解密,发现是JSFUCK,再次解密,控制台得到flag. 第三题 打开频谱图得到flag,flag中有三个_,联想到音频文件详细信息中的三个zero, ...
- 用matlab画两个曲面的图
求助!!用matlab画两个曲面的图 这是我写的程序,但是运行不出来,麻烦帮我修改一下,谢谢!!clearallcloseall[x,y]=meshgrid(0:.1:60);z1=(25*y-25* ...
- JavaScript实现循环链表
单链表地址:点我 一.循环链表 节点的next指向下一个节点,节点的prev指向上一个节点 function loopList() { let length = 0, head = null, tai ...
- Go 初体验 - 错误与异常处理 - recover和panic
先看代码: 输出: 内建函数panic可以让我们人为地产生一个运行时恐慌.不过,这种致命错误是可以被恢复的.在Go语言中,内建函数recover就可以做到这一点. 实际上,内建函数panic和reco ...
- (转)Oracle EBS 有效银行账户取值 银行科目
SELECT ba.bank_account_id, --银行账户key ftv.territory_short_name, --国家 ftv.territory_code, --国家简称 cb.ba ...
- Python之socket_udp
UDP服务端&客户端编程 ''' udp编程 创建socket对象,socket.SOCK_DGRAM 绑定ip和port,bind()方法 传输数据 1.接收数据,socket.recvfr ...
- 解决c# progressBar更新出现界面假死
最近一个项目需求中的一个功能是需要用progressBar反映处理文件的进度. 研究了Invoke和BeginInvoke方法. Control.Invoke 方法 (Delegate) :在拥有此控 ...
- C#-----线程安全的ConcurrentQueue<T>队列
ConcurrentQueue<T>队列是一个高效的线程安全的队列,是.Net Framework 4.0,System.Collections.Concurrent命名空间下的一个数据 ...
- Scala字节数组转换为数字
1. 2个字节数组转换为整数 def bytes2uint8(_bytes: Array[Byte], _offset: Int): Int = { val b0 = _bytes(_offset) ...
- RSA 汇总
最近工作中遇到了RSA,这个,以前只是粗略的看了一下,结果,实际使用的时候,各种眼花缭乱啊.现在整理一下RSA有哪些相关知识. 1. RSA算法本身.算法本身的内容实际上是在pkcs#1的标准里面说明 ...