原生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 相关文章推荐
自动检查并替换文本框内的字符
Jun 30 Javascript
实例:尽可能写友好的Javascript代码
Oct 09 Javascript
js url传值中文乱码之解决之道
Nov 20 Javascript
JavaScript 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery 复合选择器应用的几个例子
Sep 11 Javascript
js全选按钮的实现方法
Nov 17 Javascript
js实现拖拽功能
Mar 01 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
基于BootStrap的文本编辑器组件Summernote
Oct 27 Javascript
VUE+node(express)实现前后端分离
Oct 13 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
PHP多文件上传实例
2015/07/09 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
jquery 循环显示div的示例代码
2013/10/18 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
2015/02/20 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
js获取页面description的方法
2015/05/21 Javascript
JavaScript如何获取数组最大值和最小值
2015/11/18 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
Angularjs实现分页和分页算法的示例代码
2016/12/23 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue设置默认首页的操作
2020/08/12 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
linux 下实现python多版本安装实践
2014/11/18 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
Windows下的Jupyter Notebook 安装与自定义启动(图文详解)
2018/02/21 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
Python中对数组集进行按行打乱shuffle的方法
2018/11/08 Python
python中实现控制小数点位数的方法
2019/01/24 Python
Python模块 _winreg操作注册表
2020/02/05 Python
Python3基于print打印带颜色字符串
2020/07/06 Python
Python+Appium实现自动化清理微信僵尸好友的方法
2021/02/04 Python
int和Integer有什么区别
2013/05/25 面试题
计算机专业应届毕业生自荐信
2013/09/26 职场文书
计算机实训报告范文
2014/11/05 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
幼儿园教师求职信
2015/03/20 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书
Vue提供的三种调试方式你知道吗
2022/01/18 Vue.js