H5前端页面实现分享到微信、qq、新浪功能。微信分享(完整demo)nativeShare.js |
您所在的位置:网站首页 › 小翼管家视频怎么分享到微信 › H5前端页面实现分享到微信、qq、新浪功能。微信分享(完整demo)nativeShare.js |
1.主要实现通过前端在页面中实现分享功能。依赖了一段nativeShare.js文件。(我放在文章最后面,直接复制就可) 参考了他人写法,我自己修改了页面效果,现在更简洁。大家如果使用直接复制我的nativeShare.js就可以无需修改。 2.使用方法。 html中写一个标签: 分享按钮; 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"
H5分享功能测试
.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;
}
分享
你好阳光
忽然之间,太阳再也藏不住了,它举着自己庞大的脸颊从东边射出千万光芒,一切都染上了红彤彤的颜色,没过多久,火球般的红日, 从东方平线上缓缓的升起了顿时远处的树林, 地上的花草青青的山,绿绿的水,都披上了彩衣。充满了朝气,尤其是枝叶上的露珠,尤如钻石一般,格外的耀眼,格外的纯洁,格外的迷人。
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);
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 = '', 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 = '分享到'+ // ''+ // '新浪微博'+ // '微信好友'+ // '微信朋友圈'+ // 'QQ好友'+ // 'QQ空间'+ // '更多'+ // ''; // position.innerHTML = html; // };
this.isloadqqApi = function () { if (isqqBrowser) { var b = (version.qq 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 if (isqqBrowser && version.qq if (isucBrowser && ((version.uc // 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 // share.share(this.getAttribute('data-app')); // } // }
return this; };
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |