前言

我们平时做微信分享的时候,一般分享出来的页面都是一个简单的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 + '&timestamp=' + timestamp + '&url=' + url;
return {
nonceStr: noncestr, // 生成签名的的随机字符串
signature: hex_sha1(str), // 签名
url, // 生成签名的的 URL
timestamp // 生成签名的时间戳
};
}

微信、qq二次分享的更多相关文章

  1. QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式

    目录 功能介绍 常见问题 效果图与示例 apk Gradle 依赖 布局文件 自定义属性说明 接口说明 关于我 功能介绍 根据之前公司的产品需求,参考 barcodescanner 改的,希望能帮助到 ...

  2. 微信、qq网页二次分享

    二次分享是指,在APP或者浏览器分享到微信或者qq,然后从微信或者qq再分享到别的平台.如果不处理,再次分享出去的图片或者标题就不会显示,对用户非常不友好. 一.微信二次分享 官方接入文档:https ...

  3. 微信二次分享的JSSDK的调用

    网页端微信的二次分享如果不调用分享的SDK,分享之后就不会带有标题.描述 .缩略图 微信分享SDK调用 引入 <script src="//res.wx.qq.com/open/js/ ...

  4. H5页面二次分享

    对于H5页面来说二次分享还是蛮重要的,毕竟qq还是微信发出去之后习惯性的使用自带的分享功能.和PC端不同,PC直接复制地址了.前两天在做请柬,踩了不少的雷,个人开发和公司开发还是不一样,各种问题,其他 ...

  5. ShareSDK集成微信、QQ、微博分享

    1.前言 为什么要使用第三方的作为集成分享的工具呢?而不去用官方的呢?有什么区别么? 一个字"快",如果你使用官方的得一个个集成他们的SDK,相信这是一个痛苦的过程. 2.准备需要 ...

  6. 微信公众号jssdk自定义分享,二次分享自定义失败解决技巧

    百度上自定义微信分享标题以及描述的解决方法有很多,基本上都能实现一次分享:流程基本上是这样的 1.首先引入微信jssdk =><script src="http://res.wx ...

  7. PHP 微信分享(及二次分享)

    js部分: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> &l ...

  8. (转载)Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow

    Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow   这是一张QQ空间说说详情的截图. 分析: 1.点击右上角三个点的图标,在界面底部弹出一个区域,这个 ...

  9. [h5+api]移动app开发用到的微信好友,朋友圈,qq好友,新浪微博分享合集

    适用H5+环境,能够使用plus方法的移动app中 /** * Created by HBuilder. * User: tyx * Date: 2018-11-21 * Time: 17:28:51 ...

随机推荐

  1. Spring Boot入门 and Spring Boot与ActiveMQ整合

    1.Spring Boot入门 1.1什么是Spring Boot Spring 诞生时是 Java 企业版(Java Enterprise Edition,JEE,也称 J2EE)的轻量级代替品.无 ...

  2. Spring AOP capabilities and goals

    Spring AOP 是用纯JAVA 实现的. 不需借助JAVA代码在编译处理阶段来实现. Spring 是在运行期实现的.AOP的实现可以在编译,加载,运行三个阶段来实现:Spring AOP 也不 ...

  3. redis----------基本命令使用

    1.查看全部缓存数据的key keys * 2.清空当前redis数据库缓存 flushdb  (redis默认由16个库(0~15号). 且默认使用的是0号库.库之间的切换使用select命令例如: ...

  4. python下载及安装

    1, 许多新学员不知道开始学Python需要安装什么,需要准备什么,特地写下这篇文档给一脸懵逼的新同学们作为指导文档. 2, 首先,学Python需要有一台电脑,这是必须的.老师的系统是windows ...

  5. IDEA 201809 Jrebel安装破解

    jrebel介绍: JRebel是一款JAVA虚拟机插件,它使得JAVA程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响.JRebel使你能即时分别看到代码.类和资源的变化, ...

  6. Eclipse及Eclipse为基础的App报错“Failed to create the Java Virtual Machine”的解决办法

    由于OracleJDK马上就要收费了,公司要求更换OpenJDK,结果安装后Eclipse及Eclipse为基础的App启动报错:“Failed to create the Java Virtual ...

  7. C# 中List<T>与DataSet之间的转换

    p{ text-align:center; } blockquote > p > span{ text-align:center; font-size: 18px; color: #ff0 ...

  8. 常见mysql的慢查询优化方式

    一,第一步.开启mysql慢查询 方式一: 修改配置文件  在 my.ini 增加几行:  主要是慢查询的定义时间(超过2秒就是慢查询),以及慢查询log日志记录( slow_query_log) 方 ...

  9. angular和vue的差别

    一angular是mvvm框架, 而vue是一个渐进式的框架, 相当于view层, 都有双向数据绑定, 但是angular中的双向数据绑定是基于脏检查机制, vue的双向数据绑定是基于ES5的gett ...

  10. CCF后感

    3.21,昨天天梯训练赛完后查CCF成绩,300!小开心~~~我是合格的程序员啦~~~ 问题:第四题,如果输入数据有对于1本身来说 S 1 ,R 1有这个我就gg了,考完一直在担心这个反复看题也看不出 ...