由于项目中使用了全局微信分享功能，所以写了一个小插件
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 * * @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);