微信开发-缩略图插件

这个主要是实现从手机浏览器打开网页从获取微信好友栏权限到分享的过程,可以分享到微信朋友圈和微信好友列表,是jQuery插件

首先在当前需要分享的页面引入jQuery和一个js(下面会有)文件,点击事件触发从而实现分享功能

当前页面引入部分---------------------------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript" src="assets/app/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/app/js/nativeShare.js"></script>//可以自定义名称

$("#toshare").bind("click", function() {
var config = {
url: "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx12e89e49926d870f&redirect_uri=http%3a%2f%2fx3ivy8.natappfree.cc%2fwxInfo%2fgetUserInfo%3forderId%3d"+orderid+"&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect", //分享url
title: '生命地图游学|一年一度,梅里雪山勇者徒步之旅,再次集结!', //内容标题
desc: 'hhahah', //描述
img: '', //分享的图片
img_title: '', //图片名称
from: '' //来源
};
var share_obj = new nativeShare('nativeShare', config);
$(".am-share").addClass("am-modal-active");
if ($(".sharebg").length > 0) {
$(".sharebg").addClass("sharebg-active");
} else {
$("body").append('<div class="sharebg"></div>');
$(".sharebg").addClass("sharebg-active");
}
$(".sharebg-active,.share_btn").click(function() {
$(".am-share").removeClass("am-modal-active");
setTimeout(function() {
$(".sharebg-active").removeClass("sharebg-active");
$(".sharebg").remove();
}, 300);
})
});

//在config里的url可以联系后端做一个重定向进行微信公众号配置进而获取微信用户信息,获取的是点击缩略图的用户信息

上面引入的JS文件代码部分-------------------------------------------------------------------------------------------------------------------

/**
* Created by Jeffery Wang.
* Create Time: 2015-06-16 19:52
* Author Link: http://blog.wangjunfeng.com
*/
var nativeShare = function (elementNode, config) {
if (!document.getElementById(elementNode)) {
return false;
}

var qApiSrc = {
lower: "http://3gimg.qq.com/html5/js/qb.js",
higher: "http://jsapi.qq.com/get?api=app.share"
};
var bLevel = {
qq: {forbid: 0, lower: 1, higher: 2},
uc: {forbid: 0, allow: 1}
};
var UA = navigator.appVersion;
var isqqBrowser = (UA.split("MQQBrowser/").length > 1) ? bLevel.qq.higher : bLevel.qq.forbid;
var isucBrowser = (UA.split("UCBrowser/").length > 1) ? bLevel.uc.allow : bLevel.uc.forbid;
var version = {
uc: "",
qq: ""
};
var isWeixin = false;

config = config || {};
this.elementNode = elementNode;
this.url = config.url || document.location.href || '';
this.title = config.title || document.title || '';
this.desc = config.desc || document.title || '';
this.img = config.img || document.getElementsByTagName('img').length > 0 && document.getElementsByTagName('img')[0].src || '';
this.img_title = config.img_title || document.title || '';
this.from = config.from || window.location.host || '';
this.ucAppList = {
sinaWeibo: ['kSinaWeibo', 'SinaWeibo', 11, '新浪微博'],
weixin: ['kWeixin', 'WechatFriends', 1, '微信好友'],
weixinFriend: ['kWeixinFriend', 'WechatTimeline', '8', '微信朋友圈'],
QQ: ['kQQ', 'QQ', '4', 'QQ好友'],
QZone: ['kQZone', 'QZone', '3', 'QQ空间']
};

this.share = function (to_app) {
var title = this.title, url = this.url, desc = this.desc, img = this.img, img_title = this.img_title, from = this.from;
if (isucBrowser) {
to_app = to_app == '' ? '' : (platform_os == 'iPhone' ? this.ucAppList[to_app][0] : this.ucAppList[to_app][1]);
if (to_app == 'QZone') {
B = "mqqapi://share/to_qzone?src_type=web&version=1&file_type=news&req_type=1&image_url="+img+"&title="+title+"&description="+desc+"&url="+url+"&app_name="+from;
k = document.createElement("div"), k.style.visibility = "hidden", k.innerHTML = '<iframe src="' + B + '" scrolling="no" width="1" height="1"></iframe>', document.body.appendChild(k), setTimeout(function () {
k && k.parentNode && k.parentNode.removeChild(k)
}, 5E3);
}
if (typeof(ucweb) != "undefined") {
ucweb.startRequest("shell.page_share", [title, title, url, to_app, "", "@" + from, ""])
} else {
if (typeof(ucbrowser) != "undefined") {
ucbrowser.web_share(title, title, url, to_app, "", "@" + from, '')
} else {
}
}
} else {
if (isqqBrowser && !isWeixin) {
to_app = to_app == '' ? '' : this.ucAppList[to_app][2];
var ah = {
url: url,
title: title,
description: desc,
img_url: img,
img_title: img_title,
to_app: to_app,//微信好友1,腾讯微博2,QQ空间3,QQ好友4,生成二维码7,微信朋友圈8,啾啾分享9,复制网址10,分享到微博11,创意分享13
cus_txt: "请输入此时此刻想要分享的内容"
};
ah = to_app == '' ? '' : ah;
if (typeof(browser) != "undefined") {
if (typeof(browser.app) != "undefined" && isqqBrowser == bLevel.qq.higher) {
browser.app.share(ah)
}
} else {
if (typeof(window.qb) != "undefined" && isqqBrowser == bLevel.qq.lower) {
window.qb.share(ah)
} else {
}
}
} else {
}
}
};

this.html = function() {
var position = document.getElementById(this.elementNode);
var html = '<div class="am-share">'+
'<div class="am-share-sns list clearfix">'+
'<span data-app="weixin" class="nativeShare weixin"><i></i>微信好友</span>'+
'<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>微信朋友圈</span>'+
'<div class="am-share-footer"><button class="share_btn">取消</button></div>'+
'</div>'+
'</div>';
position.innerHTML = html;
};

this.isloadqqApi = function () {
if (isqqBrowser) {
var b = (version.qq < 5.4) ? qApiSrc.lower : qApiSrc.higher;
var d = document.createElement("script");
var a = document.getElementsByTagName("body")[0];
d.setAttribute("src", b);
a.appendChild(d)
}
};

this.getPlantform = function () {
ua = navigator.userAgent;
if ((ua.indexOf("iPhone") > -1 || ua.indexOf("iPod") > -1)) {
return "iPhone"
}
return "Android"
};

this.is_weixin = function () {
var a = UA.toLowerCase();
if (a.match(/MicroMessenger/i) == "micromessenger") {
return true
} else {
return false
}
};

this.getVersion = function (c) {
var a = c.split("."), b = parseFloat(a[0] + "." + a[1]);
return b
};

this.init = function () {
platform_os = this.getPlantform();
version.qq = isqqBrowser ? this.getVersion(UA.split("MQQBrowser/")[1]) : 0;
version.uc = isucBrowser ? this.getVersion(UA.split("UCBrowser/")[1]) : 0;
isWeixin = this.is_weixin();
if ((isqqBrowser && version.qq < 5.4 && platform_os == "iPhone") || (isqqBrowser && version.qq < 5.3 && platform_os == "Android")) {
isqqBrowser = bLevel.qq.forbid
} else {
if (isqqBrowser && version.qq < 5.4 && platform_os == "Android") {
isqqBrowser = bLevel.qq.lower
} else {
if (isucBrowser && ((version.uc < 10.2 && platform_os == "iPhone") || (version.uc < 9.7 && platform_os == "Android"))) {
isucBrowser = bLevel.uc.forbid
}
}
}
this.isloadqqApi();
if (isqqBrowser || isucBrowser) {
this.html();
} else {
document.write('');
}
};

this.init();

var share = this;
var items = document.getElementsByClassName('nativeShare');
for (var i=0;i<items.length;i++) {
items[i].onclick = function(){
share.share(this.getAttribute('data-app'));
}
}

return this;
};

原文地址:https://www.cnblogs.com/hurenjie/p/11471520.html