http://www.liaoxiansheng.cn/?p=294

我们知道现在我们无法直接通过js直接跳转到微信和QQ等软件进行分享,但是现在像UC浏览器和QQ浏览器这样的主流浏览器自带一个分享工具,而他们也有自己定义的js接口.我们通过调用浏览器的接口去调用浏览器的分享,从而实现原生分享功能.是不是很酷呢?

工具介绍:

nativeShare是一个可以通过javascript直接调用原生分享的工具. 该工具具有以下特点:
支持原生微博、微信好友、微信朋友圈、QQ好友、QQ空间分享
支持调用浏览器更多分享功能
不依赖任何jquery以及其他插件
注意:目前仅支持手机UC浏览器和QQ浏览器
github项目地址:https://github.com/JefferyWang/nativeShare.js
Git@OSC项目地址:http://git.oschina.net/wangjunfeng/nativeShare.js
扫描二维码访问Demo:

使用方法:

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>

效果图

实现手机网页调起原生微信朋友圈分享的工具nativeShare.js的更多相关文章

  1. 微信分享缩略图,如何增加微信朋友圈分享链接的小图片? facebook、google+、twitter等分享的标签

    微信分享缩略图 如何增加微信朋友圈分享链接的小图片?在网页的头部<head>标签内加上以下代码,图片路径自行修改.<head><div id='wx_pic' style ...

  2. 纯Java实现微信朋友圈分享图

    纯Java实现微信朋友圈分享图 1.实现分享图的效果 2.开发环境 2.1 JDK * oracle's jdk 1.8以上 2.2 字体 * 若选择了微软雅黑字体又是代码部署到Linux,则需要安装 ...

  3. ionic 实现微信朋友圈分享的完整开发流程

    最近开始要着手负责开发ionic的项目了,一直很好奇想实现一个微信朋友圈分享的功能,所以我就网上找了找文章来练手实现,果不其然,找到了几篇,但是发现它们的流程都不太详细,清楚,直接,还有不少坑. 今天 ...

  4. apiCloud 三方分享,微信好友分享,微信朋友圈分享,QQ分享,微博分享

    首先查看我的这篇有关三方登录的博客,地址是http://www.cnblogs.com/gqx-html/p/8303567.html,配置完三方数据后可以从上一篇文章中的链接跳转到各个登录查看api ...

  5. 微信朋友圈分享页面(JS-SDK 1.0)

    微信更新sdk后大量分享朋友圈代码失效,标题 缩略图 描述无法自定义 新版SDK分享文章步骤 1.绑定域名 (方法参考 http://mp.weixin.qq.com/wiki/7/aaa137b55 ...

  6. JN_0001:在微信朋友圈分享时长大于10s的视频

    1,先在聊天窗口里发送视频. 2,长按视频点击”收藏“. 3,进入微信收藏管理页面,播放视频. 4,点击右上角三点按钮,选择“转存为笔记”. 5,于是在收藏页面中会生成一个新的收藏笔记链接,打开链接再 ...

  7. 微信朋友圈分享js代码最新2015年无错版

    最近微信对分享做了进一步规范,导致很多分享都不起作用了,今天跟大家分享,2015年最新修无错的! 以下是主要微信分享页面代码:(其中红色部分主要懒友自己填写自己哈.) <?php require ...

  8. React Native微信分享 朋友圈分享 Android/iOS 通用

    超详细React Native实现微信好友/朋友圈分享功能-Android/iOS双平台通用   2016/06/16 |  React Native技术文章 |  Sky丶清|  暂无评论 |  1 ...

  9. iOS - 社会化分享-微信分享,朋友圈分享

    我仅仅做了文字和图片分享功能 1. TARGETS - Info - URL Types identifier -> weixin URL Schemes ->  应用id 2.在AppD ...

随机推荐

  1. 廖雪峰Java9正则表达式-2正则表达式进阶-6搜索和替换

    1.使用正则表达式分割字符串: String[] string.split(String regex); "a b c".split("\\s");->[ ...

  2. 双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪

    双系统可以进入Windows但进入Ubuntu时无法进入系统引导,只有左上角光标闪 这时候可以进入windows下的easyBCD重新创建ubuntu引导项即可

  3. light oj 1037 状压dp

    #include <iostream> #include <cstdlib> #include <cstring> #include <queue> # ...

  4. 强制以32位ie运行程序

    最近被一个问题给郁闷住了.给电脑重装系统后,发现发布好的程序.或者VS2012总是以64位ie运行程序,这样的话skyline的三维控件无法显示.到现在我是确定ie64无法识别skyline的控件. ...

  5. 【JZOJ5179】【NOI2017模拟6.29】哈哈

    题意 给定一个长度为n的序列,你可以进行若干次操作: 选择一个区间,删掉,并获得Val[Len]的得分,Len为这个区间的长度: 其中这个区间满足: 1.相邻两个数差的绝对值为1 2.每个数都大于相邻 ...

  6. express-generator简单使用

    1.安装 npm install express npm install -g express-generator 全局安装.express-generator是一个node的自动化创建项目工具,类似 ...

  7. 2018-8-14-Resharper-如何把类里的类移动到其他文件

    title author date CreateTime categories Resharper 如何把类里的类移动到其他文件 lindexi 2018-08-14 17:34:39 +0800 2 ...

  8. Linux 系统的运行级别(runlevel)

    Linux 系统有 7 个运行级别,Linux 系统任何时候都运行在一个指定的运行级别上,不同的运行级别所运行的程序和服务不尽相同,所要完成的工作和要达到的目的也不相同 · 运行级别 0 系统停机(h ...

  9. 超干货!Cassandra Java堆外内存排查经历全记录

    背景 最近准备上线cassandra这个产品,同事在做一些小规格ECS(8G)的压测.压测时候比较容易触发OOM Killer,把cassandra进程干掉.问题是8G这个规格我配置的heap(Xmx ...

  10. JavaScript 实现回文解码

    题目也是源自今日头条前端工程师笔试题.题目描述: 现在有一个字符串,你要对这个字符串进行 n 次操作,每次操作给出两个数字:(p, l) 表示当前字符串中从下标为 p 的字符开始的长度为 l 的一个子 ...