由于项目中使用了全局微信分享功能,所以写了一个小插件
1. 文件引入和使用
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript" src="js/common/wechat-share.js"></script>
<script>
//分享
$.wechatShare({
//载入页面的DOM HTMLElement
pageHtmlElement: document.body,
});
</script>
2. 插件源码
/**
* jQuery wechat share v1.0
*
* 描述:如果没有抓取到title,则使用默认title,默认描述,默认图片,默认分享的链接
*
* 入参:
* 0. pageHtmlElement 加载的页面HtmlElement
*
* 调用方法:
* <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" charset="utf-8" type="text/javascript"></script>
* <script type="text/javascript" src="js/common/wechat-share.js"></script>
* <script>$.wechatShare({pageHtmlElement: document.body//载入页面的DOM HTMLElement});</script>
*
* @author likl
*/
(function($) {
//默认参数
$.paramsDefault = {
css_wechat_background: ".wechat_share_img",//待抓取的背景图的class类名,若要取背景图,则需要手动设置
css_wechat_img: "div.page-content>div:not('.navbarpages') img",//待抓取的img标签选择器
css_wechat_title: ".wechat_share_title",//待抓取的标题的class类名
css_wechat_desc: ".wechat_share_desc",//待抓取的标题的class类名
wxShareKeyword: "from=singlemessage",//不能修改,微信分享关键标识,防止微信去掉#后面的链接,导致只会进入首页的问题
splitChar: "#!", //根据项目需要修改,目前我使用framework7,所以这里配置#!(主要是为了防止微信分享时单页面应用链接无法生效的问题)
defaultTitle: "恋爱日记",//默认标题
defaultDesc: "爱的每一天都有美好回忆",//默认描述
defaultWechatImgUrl: "/resource/kechuang/images/index/logo-round-white.png",//默认图片
defaultUrl: "/index.hx",//默认链接
shareTitle: "",//最终分享的标题
shareDesc: "",//最终分享的描述
shareWechatImgUrl: "",//最终分享的图片
shareUrl: "",//最终分享链接
pageHtmlElement: "" //入参:载入页面的DOM HTMLElement
};
/**
* 分享函数
* 入参:pageHtmlElement
*/
$.wechatShare = function(options) {
var opts = $.extend(jQuery.paramsDefault, options);
var wxShareKeyword = opts.wxShareKeyword;
var splitChar = opts.splitChar;
var pageHtmlElement = opts.pageHtmlElement;//载入页面的DOM HTMLElement
var requestUrl = location.href;
console.log("requestUrl:" + requestUrl);
//请求服务器获取配置信息,并调用微信config做注册
$.ajax({
type: "POST",
data: {"requestUrl": requestUrl.split(splitChar)[0]},
async: true,
url: "jssdkconfig.hx", //配置自己服务器的请求连接,获取jssdk配置信息
dataType: "json",
success:function(data) {
if (data.status) {
//注入微信权限验证配置
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.attr.appId, // 必填,公众号的唯一标识
timestamp: data.attr.timestamp, // 必填,生成签名的时间戳
nonceStr: data.attr.nonceStr, // 必填,生成签名的随机串
signature: data.attr.signature,// 必填,签名
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
} else {
console.log(data.info);
}
}
});
//获取标题和内容
var content = $.grabContent({pageHtmlElement: pageHtmlElement});
opts = $.extend(opts, content);//并集整合内容
//分享接口定义
wx.ready(function () {
//分享到朋友圈
wx.onMenuShareTimeline({
title: opts.shareTitle, // 分享标题
link: opts.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: opts.shareWechatImgUrl, // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
//发送给微信朋友
wx.onMenuShareAppMessage({
title: opts.shareTitle, // 分享标题
desc: opts.shareDesc, // 分享描述
link: opts.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: opts.shareWechatImgUrl, // 分享图标
type: 'link', // 分享类型,music、video或link,不填默认为link
dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.error(function(res){
console.log("js-sdk -- res:" + res);
});
});
};
/**
* 抓取标题和描述
*/
$.grabContent = function(options) {
var pageHtmlElement = options.pageHtmlElement;//载入页面的DOM HTMLElement
//标题
var title = $(pageHtmlElement).find($.paramsDefault.css_wechat_title).html();//标题
console.log("title:" + title);
//如果标题为空,则采用默认标题和描述
if(title == null || $.trim(title) == ""){
//采用默认
var defaultWechatImgUrl = location.protocol + "//" + location.host + $.paramsDefault.defaultWechatImgUrl;
var shareUrl = location.protocol + "//" + location.host + $.paramsDefault.defaultUrl;
return {shareTitle: $.paramsDefault.defaultTitle, shareDesc: $.paramsDefault.defaultDesc, shareWechatImgUrl: defaultWechatImgUrl, shareUrl: shareUrl};
}
//描述
var desc = parseHtml($(pageHtmlElement).find($.paramsDefault.css_wechat_desc));
if(title == null || $.trim(title) == ""){
//采用默认
desc = $.paramsDefault.defaultDesc;
}else{
//20个字符
if(desc.length > 20){
desc = desc.substring(0, 20) + "...";
}
}
console.log("分享的desc:" + desc);
//获取分享的图片
var wechatImgUrl = $.grabImageUrl({pageHtmlElement: pageHtmlElement});
console.log("最终wechatImgUrl:" + wechatImgUrl);
//获取动态分享链接
var requestUrl = window.location.href;
var prefix = requestUrl.split($.paramsDefault.splitChar)[0];
if(prefix.indexOf($.paramsDefault.wxShareKeyword) <= 0){
prefix = prefix + "?" + $.paramsDefault.wxShareKeyword;//添加分享关键参数
}
var last = requestUrl.split($.paramsDefault.splitChar)[1];//#或#!后的内容
//最终分享出去的链接 ...
requestUrl = prefix + $.paramsDefault.splitChar + last;
console.log("最终分享出去的链接 :" + requestUrl);
return {shareTitle: title, shareDesc: desc, shareWechatImgUrl: wechatImgUrl, shareUrl: requestUrl};
};
/**
* 抓取需要分享的图片
* 入参:pageHtmlElement,加载的页面HtmlElement
*/
$.grabImageUrl = function(options) {
var opts = $.extend(jQuery.paramsDefault, options);
var pageHtmlElement = opts.pageHtmlElement;//载入页面的DOM HTMLElement
//抓取背景图片
var wechatImgs = $(pageHtmlElement).find(opts.css_wechat_background);
var wechatImgUrl = wechatImgs.length > 0 ? $(wechatImgs[0]).css("backgroundImage") : "";
console.log("wechat_img:" + wechatImgUrl);
if(wechatImgUrl == null || $.trim(wechatImgUrl) == ""){
//若预先设定的背景图,则取img图片
var imgs = $(pageHtmlElement).find(opts.css_wechat_img);
if(imgs.length > 0){
wechatImgUrl = $(imgs[0]).attr("src");
console.log("取到的img图片url:" + wechatImgUrl);
}
}else{
//若获取到的背景图,有两种情况:url(aaa.jpg) 或 url("aaa.jpg")
wechatImgUrl = wechatImgUrl.split("(")[1].split(")")[0];
if(wechatImgUrl.split("\"").length > 1){
wechatImgUrl = wechatImgUrl.split("\"")[1];
}
}
//若未抓取到图片,则取默认图片
if(isEmpty(wechatImgUrl)){
wechatImgUrl = opts.defaultWechatImgUrl;
}
//给背景图添加 域名
if(!/^http:\/\/|https:\/\//.test(wechatImgUrl)){
wechatImgUrl = location.protocol + "//" + location.host + wechatImgUrl;
}
console.log("最终分享的图片url:" + wechatImgUrl);
//返回图片
return wechatImgUrl;
};
})(jQuery);
来源:oschina
链接:https://my.oschina.net/u/4271842/blog/3987979