原生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 相关文章推荐
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
jQuery实现用户注册的表单验证示例
Aug 28 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
使用Vue-Router 2实现路由功能实例详解
Nov 14 Javascript
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
Apr 27 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
使用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程序员工具
2008/05/26 PHP
php判断两个浮点数是否相等的方法
2015/03/14 PHP
PHP遍历数组的方法汇总
2015/04/30 PHP
php 在字符串指定位置插入新字符的简单实现
2016/06/28 PHP
jQuery 动态酷效果实现总结
2009/12/27 Javascript
jQuery 树形结构的选择器
2010/02/15 Javascript
asp.net刷新本页面的六种方法总结
2014/01/07 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
jQuery事件对象总结
2016/10/17 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
网页中的图片查看器viewjs使用方法
2017/07/11 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
2020/10/21 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
在Python中使用正则表达式的方法
2015/08/13 Python
深入理解Python中的内置常量
2017/05/20 Python
python自动查询12306余票并发送邮箱提醒脚本
2018/05/21 Python
Tensorflow实现神经网络拟合线性回归
2019/07/19 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
新电JAVA笔试题目
2014/08/31 面试题
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
学生会离职感言
2014/02/11 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
运动会宣传语
2015/07/13 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js
react antd实现动态增减表单
2021/06/03 Javascript