原生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自定义事件代码说明
Jan 31 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
Jul 27 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
Apr 29 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
JS身份证信息验证正则表达式
Jun 12 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
Jul 24 Javascript
js页面加载后执行的几种方式小结
Jan 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 设计模式之 单例模式
2008/12/19 PHP
基于PHP的简单采集数据入库程序
2014/07/30 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
遍历jquery对象的代码分享
2011/11/02 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
详解vue 命名视图
2019/08/14 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
[01:15:18]2014 DOTA2国际邀请赛中国区预选赛 LGD VS Speed Gaming.cn
2014/05/22 DOTA
Python从MP3文件获取id3的方法
2015/06/15 Python
python实现媒体播放器功能
2018/02/11 Python
无法使用pip命令安装python第三方库的原因及解决方法
2018/06/12 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
使用sklearn的cross_val_score进行交叉验证实例
2020/02/28 Python
Python之Sklearn使用入门教程
2021/02/19 Python
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
应聘文员自荐信范文
2014/03/11 职场文书
企业节能减排实施方案
2014/03/19 职场文书
《去年的树》教学反思
2014/04/11 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
工作简报怎么写
2015/07/21 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
python如何在word中存储本地图片
2021/04/07 Python
用Python实现Newton插值法
2021/04/17 Python
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers