原生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 相关文章推荐
javascript 播放器 控制
Jan 22 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
JavaScript实现GriwView单列全选(自写代码)
May 13 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
Aug 13 Javascript
js中indexof的用法详细解析
Dec 24 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
详解Angular开发中的登陆与身份验证
Jul 27 Javascript
JavaScript中正则表达式使数字、中文或指定字符高亮显示
Oct 31 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
详解在React-Native中持久化redux数据
May 22 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 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 rawurlencode与urlencode函数的深入分析
2013/06/08 PHP
PHP实现获取FLV文件的时间
2015/02/10 PHP
Yii2.0表关联查询实例分析
2016/07/18 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
tp5(thinkPHP5框架)captcha验证码配置及验证操作示例
2019/05/28 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
Windows系统下使用Sublime搭建nodejs环境
2015/04/13 NodeJs
jQuery实现冻结表格行和列
2015/04/29 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
浅谈angularjs $http提交数据探索
2017/01/20 Javascript
JavaScript轮播图简单制作方法
2017/02/20 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
[44:39]2014 DOTA2国际邀请赛中国区预选赛 NE VS CNB
2014/05/21 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
[02:29]大剑、皮鞭、女装,这届DOTA2勇士令状里都有
2020/07/17 DOTA
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python中用于检查英文字母大写的isupper()方法
2015/05/19 Python
Python文件处理
2016/02/29 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python实现按首字母分类查找功能
2019/10/31 Python
tensorflow实现读取模型中保存的值 tf.train.NewCheckpointReader
2020/02/10 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
2016/12/16 HTML / CSS
CLR与IL分别是什么含义
2016/08/23 面试题
抽象类和接口的区别
2012/09/19 面试题
总经理岗位职责描述
2014/02/08 职场文书
我的中国梦口号
2014/06/16 职场文书
反腐倡廉警示教育活动心得体会
2014/09/04 职场文书
学期个人自我总结
2015/02/13 职场文书
捐书活动倡议书
2015/04/27 职场文书
学历证明样本
2015/06/16 职场文书