H5前端页面实现分享到微信、qq、新浪功能。微信分享（完整demo）nativeShare.js

最新推荐文章于 2024-09-13 22:10:07 发布

AILIHEIHEI

最新推荐文章于 2024-09-13 22:10:07 发布

阅读量1w

点赞数 4

分类专栏： H5分享功能移动端识别文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_42780323/article/details/106802037

版权

H5分享功能同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

移动端识别

2 篇文章 0 订阅

订阅专栏

1.主要实现通过前端在页面中实现分享功能。依赖了一段nativeShare.js文件。（我放在文章最后面，直接复制就可）

参考了他人写法，我自己修改了页面效果，现在更简洁。大家如果使用直接复制我的nativeShare.js就可以无需修改。

2.使用方法。

html中写一个标签： <div id="nativeShare" data-app="" class=" more">分享按钮</div>；

more是我的按钮样式无所谓。必须要有自定义属性data-app=" ";括号中的nativeShare是id，大家自己命名就可以。

js中写一句话即可： var share_obj = new nativeShare('nativeShare',config);

然后你就可以愉快的使用分享到微信、qq、新浪等功能了。

3.这个nativeShare.js 目前只是支持UC浏览器和QQ浏览器。功能还是不够令人满意，

所以实际网站中如果是其他浏览器建议可以js代码判断浏览器类型；隐藏这个分享按钮。这样用户体验好。

4.截图是我的实际已经上线的测试网站，必须复制链接才能访问。"http://shoujibao.net/news/publish/wap/pzx/wapstation/testwx/index.jsp"

<!DOCTYPE html>

<html>

<title>H5分享功能测试</title>

<style>

.more{

margin:10px auto;

width:100px;

height:30px;

border-radius: 5px;

background: linear-gradient(to right,rgb(240, 185, 185) 0%,rgb(77, 106, 235) 100%);

line-height:30px;

text-align: center;

}

.bg{

position:fixed;

left:0;

right:0;

top:0;

bottom: 0;

background: url('./icon/chigua.jpg');

background-size: cover;

}

.content{

padding:10px;

color:rgb(197, 28, 240);

/* font-style: oblique; */

line-height: 40px;

text-shadow: 3px 3px 2px rgb(240, 242, 243);

font-size:18px;

font-weight:600;

font-family: Arial, Helvetica, sans-serif;

}

</style>

</head>

<body>

<p> 忽然之间，太阳再也藏不住了，它举着自己庞大的脸颊从东边射出千万光芒，一切都染上了红彤彤的颜色，没过多久，火球般的红日，

从东方平线上缓缓的升起了顿时远处的树林，

地上的花草青青的山，绿绿的水，都披上了彩衣。充满了朝气，尤其是枝叶上的露珠，尤如钻石一般，格外的耀眼，格外的纯洁，格外的迷人。</p>

</div>

var config = {

url:window.location.href,

title:document.title,

desc:'你好阳光',

img:'http://shoujibao.net/news/publish/wap/resource/share/v7/img/zd4.png',

img_title:'分享',

from:'来自AILIHEIHEI'

};

var share_obj = new nativeShare('nativeShare',config);

</script>

</body>

</html>

nativeShare.js代码如下：

/**

* Created by Jeffery Wang.

* Create Time: 2015-06-16 19:52

修改：AILIHEIHEI:2020-6-15

* 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;

console.log(UA,'hhhhhhhh',navigator.userAgent);// 区分高低版本QQ浏览器 2:higher 或者 0:forbid

var isqqBrowser = (UA.split("MQQBrowser/").length > 1) ? bLevel.qq.higher : bLevel.qq.forbid;

// 1:allow 或者 0: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;

//如果是UC浏览器

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);

}

//UC自带的api，调用即可

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="label">分享到</div>'+

// '<div class="list clearfix">'+

// '<span data-app="sinaWeibo" class="nativeShare weibo"><i></i>新浪微博</span>'+

// '<span data-app="weixin" class="nativeShare weixin"><i></i>微信好友</span>'+

// '<span data-app="weixinFriend" class="nativeShare weixin_timeline"><i></i>微信朋友圈</span>'+

// '<span data-app="QQ" class="nativeShare qq"><i></i>QQ好友</span>'+

// '<span data-app="QZone" class="nativeShare qzone"><i></i>QQ空间</span>'+

// '<span data-app="" class="nativeShare more"><i></i>更多</span>'+

// '</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('目前该分享插件仅支持手机UC浏览器和QQ浏览器');

// }

};

this.init();

var share = this;

var items = document.getElementById(elementNode);

items.οnclick=function(){

share.share(this.getAttribute('data-app'))

}

// for (var i=0;i<items.length;i++) {

// items[i].onclick = function(){

// share.share(this.getAttribute('data-app'));

// }

return this;

};