原生javascript实现分享到朋友圈功能 支持ios和android

　　现在主流的分享工具也有很多，例如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>

三、演示截图


图１：分享到新浪微博


图2：分享到微信朋友圈


图3：微信分享给联系人


图4：QQ分享给联系人


图5：QQ分享到空间


图6：调用浏览器的内置分享组件

赞 (0)

相关推荐

  • javascript获取wx.config内部字段解决微信分享

    javascript获取wx.config内部字段解决微信分享

    背景 在微信分享开发的时候我们通常的流程是 <?php require_once "jssdk.php"; $jssdk = new JSSDK("yourAppID", "yourAppSecret"); $signPackage = $jssdk->GetSignPackage(); ?> <!DOCTYPE html> <html lang="en"> <head>

  • js实现文字选中分享功能

    总结:文字选中IE和其他浏览器不一样 在IE中文字选中后鼠标抬起,图片显现触发有点快所以用定时器. <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title></title> <script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min

  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

    微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

    本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &

  • JS版微信6.0分享接口用法分析

    本文实例讲述了JS版微信6.0分享接口用法.分享给大家供大家参考,具体如下: 为了净化网络,整顿诱导分享及诱导关注行为,微信于2014年12月30日发布了<微信公众平台关于整顿诱导分享及诱导关注行为的公告>,微信平台开发者发现,原有的微信分享功能不能用了.正在苦于微信分享该怎么解决时,微信于2015年1月10日即时发布了开放JS-SDK,为微信网站的开发提供了强大的js功能. 注: 1.微信JS-SDK,提供的分享接口仅是监听分享事件触发时,修改分享的标题.链接等.不能自定义触发分享事件 2.

  • js微信分享API

    本文为大家分享了js微信分享实现代码,供大家参考,具体内容如下 微信分享Js API 功能: 1.分享到微信朋友圈 2.分享给微信好友 3.分享到腾讯微博 4.隐藏/显示右上角的菜单入口 5.隐藏/显示底部浏览器工具栏 6.获取当前的网络状态 7.调起微信客户端的图片播放组件 8.关闭公众平台Web页面 /**! * 微信内置浏览器的Javascript API,功能包括: * * 1.分享到微信朋友圈 * 2.分享给微信好友 * 3.分享到腾讯微博 * 4.隐藏/显示右上角的菜单入口 * 5.

  • ionic实现底部分享功能

    本文实例为大家分享了ionic底部分享功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.

  • Javascript 实现微信分享（QQ、朋友圈、分享给朋友）

    最近做微信开发,对微信公众号的开发,现在好的都是分享到朋友圈,QQ,分享给好友等分享功能,这里记录下,有需要的朋友也可以看下. // 微信分享 var wx = require('wechat-sdk'); rewardsResultService.getWechatInfo().then(function(data) { var conf = data; wx.config({ debug: false, appId: 'wx34e783920b37ee91', timestamp: conf

  • 原生javascript实现分享到朋友圈功能 支持ios和android

    原生javascript实现分享到朋友圈功能 支持ios和android

    现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器.QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊. 高手在民间啊,下面我们的小编就带你来看看这位兄弟的编写的JS库. 一.工具介绍 nativeShare.js 一个可以通过javascript直接调用原生分享的工具

  • java开发微信分享到朋友圈功能

    微信分享功能开发 用了一天时间,把微信发送给朋友和分享到朋友圈功能开发出来,在这里给大家分享一下,避免大家走弯路. 一.服务器端程序 package com.wiimedia.controller; import java.io.IOException; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; import java.text.ParseException; import

  • 微信小程序实现分享到朋友圈功能

    微信小程序实现分享到朋友圈功能

    截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈 我的套路: 请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便) canvas绘制文字和图片到画布 当用户点击分享到朋友圈时,给用户展示画布,画布转成图片,并将图片保存到相册 onShow: function () { var that = this; //1. 请求后

  • 微信小程序通过保存图片分享到朋友圈功能

    微信小程序通过保存图片分享到朋友圈功能

    说明 首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面上支持分享的应用,基本都是这种实现方式. 准备阶段 1.通过服务器获取小程序码 这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码.然后调用wx.getImageInfo将后台生成的小程序码保存起来. 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不

  • php实现的微信分享到朋友圈并记录分享次数功能

    本文实例讲述了php实现的微信分享到朋友圈并记录分享次数功能.分享给大家供大家参考,具体如下: 1.引入JS文件 2.通过config接口注入权限验证配置 3.通过ready接口处理成功验证 4.通过error接口处理失败验证 JSDK档说明:https://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html (1) <script type="text/javascript" src="http:

  • 微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

    主要为以下实现步骤: 1.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名".(特别提示不需要加上http或者https,吃过亏) 2.页面引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>    <script src="https://res.wx

  • android7.0实现分享图片到朋友圈功能

    本文实例为大家分享了android实现分享图片到朋友圈功能的具体代码,供大家参考,具体内容如下 在Android7.0中,系统对scheme为file://的uri进行了限制,所以通过这种uri来进行分享的一些接口就不能用了,比如使用代码来调用分享朋友圈的接口. 此时就得使用其他的URI scheme来代替 file://,比如MediaStore的 content://.直接上代码: private static boolean checkInstallation(Context contex

  • 基于js实现微信发送好友如何分享到朋友圈、微博

    微信浏览器内置了javascript私有对象WeixinJSBridge,可以实现发送给朋友.分享到朋友圈.分享到微博等功能. <script> var imgUrl = "图片地址"; var lineLink = "当前网址"; var descContent = "描述"; var shareTitle = '标题'; var appid = ''; function shareFriend() { WeixinJSBridge

  • 原生javascript实现类似vue的数据绑定功能示例【观察者模式】

    本文实例讲述了原生javascript实现类似vue的数据绑定功能.分享给大家供大家参考,具体如下: 观察者模式 let observer = { /*订阅功能*/ addSubscriber: function (cb) { this.subscribers.push(cb); }, /*退订功能*/ removerSubscriber: function (cb) { let index = this.subscribers.indexOf(cb); this.subscribers.spl

随机推荐