原生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操作cookie_获取与修改代码
May 21 Javascript
jQuery数据缓存功能的实现思路及简单模拟
May 27 Javascript
jQuery的基本概念与高级编程
May 14 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
Oct 28 Javascript
Bootstrap Paginator分页插件使用方法详解
May 30 Javascript
Angular JS数据的双向绑定详解及实例
Dec 31 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
Bootstrap免费字体和图标网站(值得收藏)
Mar 16 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
layui分页效果实现代码
May 19 Javascript
判断iOS、Android以及PC端的示例代码
Nov 15 Javascript
JS实现普通轮播图特效
Jan 01 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
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
使用ThinkPHP的自动完成实现无限级分类实例详解
2016/09/02 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
JQuery 技巧和窍门整理(8个)
2010/04/22 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
script的async属性以非阻塞的模式加载脚本
2013/01/15 Javascript
js去字符串前后空格5种实现方法及比较
2013/04/03 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
2020/12/13 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
js实现车辆管理系统
2020/08/26 Javascript
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python如何实现int函数的方法示例
2018/02/19 Python
Redis使用watch完成秒杀抢购功能的代码
2018/05/07 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python实现合并excel表格的方法分析
2019/04/13 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
《美丽的田园》教学反思
2014/03/01 职场文书
班主任新年寄语
2014/04/04 职场文书
护士自我推荐信范文
2015/03/24 职场文书
创建文明城市倡议书
2015/04/28 职场文书
干部作风纪律整顿心得体会
2016/01/23 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
python爬虫之爬取笔趣阁小说
2021/04/22 Python
python flask开发的简单基金查询工具
2021/06/02 Python
react antd实现动态增减表单
2021/06/03 Javascript
如何利用Python实现一个论文降重工具
2021/07/09 Python
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
mysql sum(if())和count(if())的用法说明
2022/01/18 MySQL
如何更改Win11声音输出设备?Win11声音输出设备四种更改方法
2022/04/08 数码科技
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技