原生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读取cookies)
Jan 11 Javascript
判断一个变量是数组Array类型的方法
Sep 16 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
javascript的propertyIsEnumerable()方法使用介绍
Apr 09 Javascript
JS修改iframe页面背景颜色的方法
Apr 01 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
Nov 30 Javascript
基于jQuery实现二级下拉菜单效果
Feb 01 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
深入理解AngularJS中的ng-bind-html指令
Mar 27 Javascript
ztree实现权限横向显示功能
May 20 Javascript
Bootstrap Table使用整理(一)
Jun 09 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与SQL注入攻击[二]
2007/04/17 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php检测文本的编码
2015/07/26 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
vue+express 构建后台管理系统的示例代码
2018/07/19 Javascript
Vue 解决多级动态面包屑导航的问题
2019/11/04 Javascript
Java Varargs 可变参数用法详解
2020/01/28 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
Python配置mysql的教程(推荐)
2017/10/13 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python合并2个字典成1个新字典的方法(9种)
2019/12/19 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
焊接专业毕业生求职信
2013/10/01 职场文书
设计部经理的岗位职责
2013/11/16 职场文书
个人收入证明范本
2014/01/12 职场文书
英语专业毕业生求职信
2014/05/24 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书