原生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 相关文章推荐
jquery下利用jsonp跨域访问实现方法
Jul 29 Javascript
JavaScript正则表达式的分组匹配详解
Feb 13 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
jQuery Mobile中的button按钮组件基础使用教程
May 23 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
Sep 17 Javascript
jquery.param()实现数组或对象的序列化方法
Oct 08 jQuery
小程序开发之模态框组件封装
Apr 23 Javascript
JavaScript this关键字指向常用情况解析
Sep 02 Javascript
vue.js封装switch开关组件的操作
Oct 26 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
一个简单的域名注册情况查询程序
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
php使用MySQL保存session会话的方法
2015/06/18 PHP
PHP中foreach()用法汇总
2015/07/02 PHP
PHP7使用ODBC连接SQL Server2008 R2数据库示例【基于thinkPHP5.1框架】
2019/05/06 PHP
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
2012/11/14 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
jQuery Ajax中的事件详细介绍
2015/04/16 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
简单封装js的dom查询实例代码
2016/07/08 Javascript
Bootstrap源码解读按钮(5)
2016/12/23 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
ES6中Iterator与for..of..遍历用法分析
2017/03/31 Javascript
详解Vue结合后台的列表增删改案例
2018/08/21 Javascript
JavaScript实现的级联算法示例【省市二级联动功能】
2018/12/25 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
vue实现公告栏文字上下滚动效果的示例代码
2020/06/16 Javascript
[00:18]天涯墨客三技能展示
2018/08/25 DOTA
Python random模块(获取随机数)常用方法和使用例子
2014/05/13 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python 字符串转列表 list 出现\ufeff的解决方法
2017/06/22 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
python求前n个阶乘的和实例
2020/04/02 Python
python获取时间戳的实现示例(10位和13位)
2020/09/23 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
鲜果饮品店创业计划书
2014/01/21 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
个人融资协议书
2014/10/02 职场文书
委托证明范本
2014/11/25 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
班主任工作总结范文
2015/08/13 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
python中super()函数的理解与基本使用
2021/08/30 Python