微信、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 ...
随机推荐
- Spring Boot入门 and Spring Boot与ActiveMQ整合
1.Spring Boot入门 1.1什么是Spring Boot Spring 诞生时是 Java 企业版(Java Enterprise Edition,JEE,也称 J2EE)的轻量级代替品.无 ...
- Spring AOP capabilities and goals
Spring AOP 是用纯JAVA 实现的. 不需借助JAVA代码在编译处理阶段来实现. Spring 是在运行期实现的.AOP的实现可以在编译,加载,运行三个阶段来实现:Spring AOP 也不 ...
- redis----------基本命令使用
1.查看全部缓存数据的key keys * 2.清空当前redis数据库缓存 flushdb (redis默认由16个库(0~15号). 且默认使用的是0号库.库之间的切换使用select命令例如: ...
- python下载及安装
1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档. 2, 首先,学Python需要有一台电脑,这是必须的.老师的系统是windows ...
- IDEA 201809 Jrebel安装破解
jrebel介绍: JRebel是一款JAVA虚拟机插件,它使得JAVA程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响.JRebel使你能即时分别看到代码.类和资源的变化, ...
- Eclipse及Eclipse为基础的App报错“Failed to create the Java Virtual Machine”的解决办法
由于OracleJDK马上就要收费了,公司要求更换OpenJDK,结果安装后Eclipse及Eclipse为基础的App启动报错:“Failed to create the Java Virtual ...
- C# 中List<T>与DataSet之间的转换
p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...
- 常见mysql的慢查询优化方式
一,第一步.开启mysql慢查询 方式一: 修改配置文件 在 my.ini 增加几行: 主要是慢查询的定义时间(超过2秒就是慢查询),以及慢查询log日志记录( slow_query_log) 方 ...
- angular和vue的差别
一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的gett ...
- CCF后感
3.21,昨天天梯训练赛完后查CCF成绩,300!小开心~~~我是合格的程序员啦~~~ 问题:第四题,如果输入数据有对于1本身来说 S 1 ,R 1有这个我就gg了,考完一直在担心这个反复看题也看不出 ...