原生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 mobile changepage的三种传参方法介绍
Sep 13 Javascript
JavaScript中的运算符种类及其规则介绍
Sep 26 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
巧用replace将文字表情替换为图片
Apr 17 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
javascript事件模型实例分析
Jan 30 Javascript
介绍一个简单的JavaScript类框架
Jun 24 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
Angular.js实现动态加载组件详解
May 28 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 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
How do I change MySQL timezone?
2008/03/26 PHP
php面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
php对二维数组进行相关操作(排序、转换、去空白等)
2015/11/04 PHP
PHP+JS三级菜单联动菜单实现方法
2016/02/24 PHP
Thinkphp极验滑动验证码实现步骤解析
2020/11/24 PHP
javascript中的float运算精度实例分析
2010/08/21 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
自己编写的支持Ajax验证的JS表单验证插件
2015/05/15 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
2016/06/17 Javascript
JavaScript——DOM操作——Window.document对象详解
2016/07/14 Javascript
es6学习笔记之Async函数的使用示例
2017/05/11 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
node 文件上传接口的转发的实现
2019/09/23 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
简单了解Python下用于监视文件系统的pyinotify包
2015/11/13 Python
基于DataFrame筛选数据与loc的用法详解
2018/05/18 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
美国Randolph太阳镜官网:美国制造的飞行员太阳镜和射击眼镜
2018/06/15 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
介绍一下Cookie和Session及他们之间的区别
2012/11/20 面试题
怎样让char类型的东西转换成int类型
2013/12/09 面试题
心理健康课教学反思
2014/02/13 职场文书
小学生勤俭节约演讲稿
2014/08/28 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
2014年企业员工工作总结
2014/12/09 职场文书
男人帮观后感
2015/06/18 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
go 原生http web 服务跨域restful api的写法介绍
2021/04/27 Golang
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript