原生javascript实现分享到朋友圈功能 支持ios和android


Posted in Javascript onMay 11, 2016

现在主流的分享工具也有很多,例如JiaThis、bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好。

大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器、QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊。

高手在民间啊,下面三水点靠木的小编就带你来看看这位兄弟的编写的JS库。

一、工具介绍 nativeShare.js

一个可以通过javascript直接调用原生分享的工具,该工具具有以下特点:

1.支持原生微博、微信好友、微信朋友圈、QQ好友、QQ空间分享
2.支持调用浏览器更多分享功能
3.不依赖任何jquery以及其他插件
注意:目前仅支持手机UC浏览器和QQ浏览器

github项目地址:https://github.com/JefferyWang/nativeShare.js
Git@OSC项目地址:http://git.oschina.net/wangjunfeng/nativeShare.js

二、使用方法

1.引入CSS文件

<link rel="stylesheet" href="nativeShare.css"/>

2.在需要添加分享的地方插入以下代码:

<div id="nativeShare"></div>

3.添加配置信息,并实例化

<script>

    var config = {

        url:'http://blog.wangjunfeng.com',// 分享的网页链接

        title:'王俊锋的个人博客',// 标题

        desc:'王俊锋的个人博客',// 描述

        img:'http://www.wangjunfeng.com/img/face.jpg',// 图片

        img_title:'王俊锋的个人博客',// 图片标题

        from:'王俊锋的博客' // 来源

    };

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

</script>

三、演示截图

原生javascript实现分享到朋友圈功能 支持ios和android
图1:分享到新浪微博

原生javascript实现分享到朋友圈功能 支持ios和android
图2:分享到微信朋友圈

原生javascript实现分享到朋友圈功能 支持ios和android
图3:微信分享给联系人

原生javascript实现分享到朋友圈功能 支持ios和android
图4:QQ分享给联系人

原生javascript实现分享到朋友圈功能 支持ios和android
图5:QQ分享到空间

原生javascript实现分享到朋友圈功能 支持ios和android
图6:调用浏览器的内置分享组件

Javascript 相关文章推荐
js类中的公有变量和私有变量
Jul 24 Javascript
js调试工具console.log()方法查看js代码的执行情况
Aug 08 Javascript
jquery checkbox 勾选的bug问题解决方案与分析
Nov 13 Javascript
jquery实现鼠标滑过显示提示框的方法
Feb 05 Javascript
js性能优化技巧
Nov 29 Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
js 判断当前时间是否处于某个一个时间段内
Sep 19 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 Javascript
使用JavaScript实现ajax的实例代码
May 11 #Javascript
jQuery的框架介绍
May 11 #Javascript
jQuery链式调用与show知识浅析
May 11 #Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 #Javascript
Extjs4.0 ComboBox如何实现三级联动
May 11 #Javascript
javascript简单判断输入内容是否合法的方法
May 11 #Javascript
解析JavaScript面向对象概念中的Object类型与作用域
May 10 #Javascript
You might like
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
php unset全局变量运用问题的深入解析
2013/06/17 PHP
关于WordPress的SEO优化相关的一些PHP页面脚本技巧
2015/12/10 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
javascript 传统事件模型构造的事件监听器实现代码
2010/05/31 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
JavaScript实现弹出DIV层同时页面背景渐变成半透明效果
2016/03/25 Javascript
通过sails和阿里大于实现短信验证
2017/01/04 Javascript
jQuery实现的下雪动画效果示例【附源码下载】
2018/02/02 jQuery
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[01:11:27]2018DOTA2亚洲邀请赛小组赛 A组加赛 Newbee vs Optic
2018/04/03 DOTA
python多重继承实例
2014/10/11 Python
在Python中使用HTML模版的教程
2015/04/29 Python
Python使用matplotlib实现绘制自定义图形功能示例
2018/01/18 Python
python实现装饰器、描述符
2018/02/28 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python实现猜数字游戏
2020/03/25 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
python框架flask入门之路由及简单实现方法
2020/06/07 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
如何进行Linux分区优化
2016/09/13 面试题
俄罗斯商务邀请函
2014/01/26 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
房屋租赁合同补充协议
2014/10/11 职场文书
英语复习计划
2015/01/19 职场文书
还款承诺书范本
2015/01/20 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
写作技巧:如何撰写一份优秀的营销策划书
2019/08/13 职场文书