原生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的固定表头和列头的代码
May 03 Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
js实现带三角符的手风琴效果
Mar 01 Javascript
深入理解Angular4中的依赖注入
Jun 07 Javascript
浅谈node的事件机制
Oct 09 Javascript
解决ng-repeat产生的ng-model中取不到值的问题
Oct 02 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
详解微信小程序图片地扯转base64解决方案
Aug 18 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
js 图片懒加载的实现
Oct 21 Javascript
Angular性能优化之第三方组件和懒加载技术
May 10 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版
2006/10/09 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
js获取下拉列表的值和元素个数示例
2014/05/07 Javascript
jquery实现显示已选用户
2014/07/21 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
VC调用javascript的几种方法(推荐)
2016/08/09 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Django使用详解:ORM 的反向查找(related_name)
2018/05/30 Python
Python实现的插入排序,冒泡排序,快速排序,选择排序算法示例
2019/05/04 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
计算pytorch标准化(Normalize)所需要数据集的均值和方差实例
2020/01/15 Python
Django 实现对已存在的model进行更改
2020/03/28 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
惊艳的手工时装首饰:Migonne Gavigan
2018/02/23 全球购物
error和exception有什么区别
2012/10/02 面试题
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
如何唤起类中的一个方法
2013/11/29 面试题
《蜗牛的奖杯》教后反思
2014/04/24 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
大学生就业协议书范本(适用于公司企业)
2014/10/07 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
领导干部失职检讨书
2015/05/05 职场文书
小学六一儿童节活动总结
2015/05/05 职场文书
python简单验证码识别的实现过程
2021/06/20 Python
nginx静态资源的服务器配置方法
2022/07/07 Servers
python playwrigh框架入门安装使用
2022/07/23 Python