<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

         <style type="text/css">

             #WX {

                 width: 231px;

                 height: 285px;

                 background: red;

                 padding: 10px;

                 background: #fff;

                 border: solid 1px #d8d8d8;

                 position: fixed;

                 top: 0;

                 left: 0;

                 right: 0;

                 bottom: 0;

                 margin: auto;

             }

             .bd_weixin_popup_head {

                 font-size: 12px;

                 font-weight: bold;

                 text-align: left;

                 line-height: 16px;

                 height: 16px;

                 position: absolute;

                 color: #000;

             }

             .bd_weixin_popup_head span {

                 font-size: 12px;

                 font-weight: bold;

                 text-align: left;

                 line-height: 16px;

             }

             .bd_weixin_popup_close {

                 width: 16px;

                 height: 16px;

                 text-decoration: none;

                 font-size: 16px;

                 text-align: right;

                 position: absolute;

                 right: 0;

                 top: 0;

                 cursor: pointer;

             }

             .bd_weixin_popup_foot {

                 font-size: 12px;

                 text-align: left;

                 line-height: 22px;

                 color: #666;

             }

             #weixin {

                 width: 185px;

                 height: auto;

                 margin: 10px auto;

             }

         </style>

     </head>

     <body>

         <div id="WX">

             <div class="bd_weixin_popup_head">

                 <span>分享到微信朋友圈</span>

                 <a class="bd_weixin_popup_close">×</a>

                 <div id="weixin"></div>

                 <div class="bd_weixin_popup_foot">打开微信，点击底部的“发现”，<br>使用“扫一扫”即可将网页分享至朋友圈。</div>

             </div>

         </div>

     </body>

     <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>

     <script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

     <script type="text/javascript">

         var path = window.location.href;//获取页面的链接

         $("#weixin").qrcode({

             text: path, //设置二维码内容

 //            render: "table", //设置渲染方式

             width: 185, //设置宽度,默认生成的二维码大小是 256×256

             height: 185, //设置高度

             typeNumber: -1, //计算模式

             background: "#ffffff", //背景颜色

             foreground: "#000000" //前景颜色

         });

     </script>

 </html>

javascript实现网页分享至朋友圈功能的更多相关文章

  1. android网页分享到朋友圈问题求助？

    目前想要实现通过QQ将网页分享到微信好友或朋友圈,看见有些APP是直接分享出去左下角图标显示的是QQ.求助各位大牛提供下思路. 这种功能是怎么实现的.应该不是通过android的系统分享实现的吧?.查 ...

  2. UC浏览器 分享到朋友圈和微信好友 分类： JavaScript 2015-04-28 14:45 615人阅读 评论(1) 收藏

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  3. 移动端以及 PC浏览器页面分享到朋友圈等的功能实现

    我们经常可以在一些 app上看到分享到朋友圈.微信好友.qq好友等功能,例如 饿了么.美团等 app,下单之后就会弹出给好友发红包的 modal窗,这在 app上很常见,app的权限可以很大,甚至连启 ...

  4. JAVA调用微信接口实现页面分享功能(分享到朋友圈显示图片，分享给朋友)

    钉钉提供的内网穿透之HTTP穿透:https://www.cnblogs.com/pxblog/p/13862376.html 网页分享到微信中如何显示标题图,如果自定义标题图,描述,显示效果如下 官 ...

  5. 微信JSSDK使用步骤(用于在微信浏览器中自定义分享,分享到朋友圈，拍照，扫一扫等功能)

    一.使用JSSDK需要一个公众号(需要认证!): (1).把自己项目的服务器地址输入. (2).把MP_verify_m7Qp93BAuIGDWRVO.txt  文件下载下来,放到该服务器域名指向的根 ...

  6. UC和QQ两个主流浏览器 * 点击触发微信分享到朋友圈或发送给朋友的功能(转载)

    转载(声明:仅供学习使用) /** * 此插件主要作用是在UC和QQ两个主流浏览器 * 上面触发微信分享到朋友圈或发送给朋友的功能 * 代码编写过程中 参考: * http://mjs.sinaimg ...

  7. 微信JS-SDK实现自定义分享功能，分享给朋友，分享到朋友圈

    分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = n ...

  8. UC浏览器 分享到朋友圈和微信好友

    用手机UC浏览器访问新浪微博,会注意到有这样的两个分享按钮: 在手机端浏览器里,点击分享按钮,就可以启动微信客户端并分享到微信.研究了下其源代码,存在这样的一个js:http://mjs.sinaim ...

  9. 微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

    之前写过一篇使用微信JS-SDK来实现扫一扫功能的博客 微信公众号开发–微信JS-SDK扫一扫功能 在该博客里介绍了微信JS-SDK的基本用法,其中包括以下几个步骤 还详细介绍了通过config接口注 ...

随机推荐

  1. LC 638. Shopping Offers

    In LeetCode Store, there are some kinds of items to sell. Each item has a price. However, there are ...

  2. LC 781. Rabbits in Forest

    In a forest, each rabbit has some color. Some subset of rabbits (possibly all of them) tell you how ...

  3. Handler处理消息

    UI主线程通过Looper循环查询消息队列UI_MQ,当发现有消息存在时会将消息从消息队列中取出.首先分析消息,通过消息的参数判断该消息对应的Handler,然后将消息分发到指定的Handler进行处 ...

  4. an extra named object property

    Grunt supports the ability to split each task configuration into several separate configurations all ...

  5. WampServer 下载以及安装问题 以及配置远程连接MYSQL

    WampServer 3.0 下载: http://dl.pconline.com.cn/download/52877-1.html 碰到的问题DDL无法添加,解决方法:MSVCR110.DLL fo ...

  6. python基础知识（循环语句）

    for循环.while循环.循环嵌套 for 迭代变量 In 对象: 循环体 range(start,end,step) 第一个和第三个可以省略生成一系列的连续整数 start 包括起始值 end  ...

  7. robots.txt文件

    网站通过一个符合Robots协议的robots.txt文件来告诉搜索引擎哪些页面可以爬取.Robots.txt协议全称“网络爬虫排除标准”.一般情况下,该文件以一行或多行User-agent记录开始, ...

  8. Java更新Oracle的clob类型字段

    Java更新Oracle的clob类型字段 1.查询该clob字段 2.处理该clob字段查询结果 3.更新该clob字段查询结果 1.查询该clob字段 <select id="se ...

  9. jstl与EL表达式

    一·el表达式介绍 EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user.sex} ...

  10. 什么是NameNode和DataNode？他们是如何协同工作的？

    [学习笔记] 什么是NameNode和DataNode?他们是如何协同工作的? 马克-to-win @ 马克java社区:一个HDFS集群包含一个NameNode和若干的DataNode(start- ...