原生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与DropDownList 区别分析
Jan 01 Javascript
js Map List 遍历使用示例
Jul 10 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
用户代理字符串userAgent可实现的四个识别
Sep 20 Javascript
Vuex模块化实现待办事项的状态管理
Mar 15 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
js常用正则表达式集锦
May 17 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
Apr 14 Javascript
ES6函数和数组用法实例分析
May 23 Javascript
vue实现input输入模糊查询的三种方式
Aug 14 Vue.js
使用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&amp;java(一)
2006/10/09 PHP
php 分库分表hash算法
2009/11/12 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
PHP数组操作类实例
2015/07/11 PHP
CI(CodeIgniter)模型用法实例分析
2016/01/20 PHP
详解PHP实现支付宝小程序用户授权的工具类
2018/12/25 PHP
JS高级笔记
2011/07/13 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
2013/04/02 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
Node.js实现数据推送
2016/04/14 Javascript
JavaScript常用判断写法大全(推荐)
2016/05/30 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[40:03]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python爬取腾讯视频评论的思路详解
2019/12/19 Python
利用Python计算KS的实例详解
2020/03/03 Python
Python内存映射文件读写方式
2020/04/24 Python
纯css3显示隐藏一个div特效的具体实现
2014/02/10 HTML / CSS
html5 Canvas画图教程(9)—canvas中画出矩形和圆形
2013/01/09 HTML / CSS
投标单位介绍信
2014/01/09 职场文书
暑期培训心得体会
2014/09/02 职场文书
婚内分居协议书范文
2014/11/26 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年财务经理工作总结
2015/05/13 职场文书
付款证明格式范文
2015/06/19 职场文书
SQL中的三种去重方法小结
2021/11/01 SQL Server