原生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 相关文章推荐
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
使用jQuery管理选择结果
Jan 20 Javascript
使用JavaScript开发IE浏览器本地插件实例
Feb 18 Javascript
JS验证邮件地址格式方法小结
Dec 01 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
从零学习node.js之mysql数据库的操作(五)
Feb 24 Javascript
JS实现对json对象排序并删除id相同项功能示例
Apr 18 Javascript
vue中组件的3种使用方式详解
Mar 23 Javascript
vue-父子组件和ref实例详解
Nov 10 Javascript
JavaScript语句错误throw、try及catch实例解析
Aug 18 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与ASP
2006/10/09 PHP
第七节--类的静态成员
2006/11/16 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JS target与currentTarget区别说明
2011/08/28 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
AngularJs根据访问的页面动态加载Controller的解决方案
2015/02/04 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
js窗口震动小程序分享
2016/11/28 Javascript
javascript中的面向对象
2017/03/30 Javascript
原生javascript上传图片带进度条【实例分享】
2017/04/06 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
JS实现的点击按钮图片上下滚动效果示例
2019/01/28 Javascript
详解微信小程序之一键复制到剪切板
2019/04/24 Javascript
js尾调用优化的实现
2019/05/23 Javascript
python命令行参数sys.argv使用示例
2014/01/28 Python
Python获取二维矩阵每列最大值的方法
2018/04/03 Python
Python实现曲线拟合操作示例【基于numpy,scipy,matplotlib库】
2018/07/12 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
写出一个方法实现冒泡排序
2016/07/08 面试题
如何利用find命令查找文件
2016/11/18 面试题
毕业生自荐信格式
2014/03/07 职场文书
电子专业毕业生自荐信
2014/05/25 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
交通安全教育主题班会
2015/08/12 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技