<!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. mongodb 安装配置及简单使用

    步骤一: 下载网址:https://www.mongodb.com/download-center/community 根据自己的环境下载 步骤二: 安装过程只需要默认即可,需要注意的是连接工具“mo ...

  2. qt 之http学习

    在Qt网络编程中,需要用到协议,即HTTP.它是超文本传输协议,它是一种文件传输协议. 新建工程名为“http”,然后选中QtNetwork模块,最后Base class选择QWidget.注意:如果 ...

  3. JavaScript中原型链存在的问题解析

    我们知道使用原型链实现继承是一个goodway:)看个原型链继承的例子. function A () { this.abc = 44; } A.prototype.getAbc = function ...

  4. Python Flask，cookie,session ，设置、获取、删除

    使用Response类的set_cookie()方法可以设置cookie: Response.set_cookie( key, //键 value='', //值 max_age=None, //秒为 ...

  5. 'pybot.bat' 不是内部或外部命令,也不是可运行的程序

    在通过命令行工具 运行RobotFramework的文件, 会使用到pybot.bat. 在dos输入pybot提示'pybot' 不是内部或外部命令,也不是可运行的程序或批处理文件, 可以在pyth ...

  6. Java特殊数据结构-TreeSet

    资料来源 TreeSet初步入门总结 https://www.cnblogs.com/yzssoft/p/7127894.html TreeSet自然排序与比较器排序精讲 https://blog.c ...

  7. Spring-Kafka —— 消费重试机制实现

    消息处理问题 在从Kafka主题接收消息之后立即处理消息的消费者的实现非常简单.不幸的是,现实要复杂得多,并且由于各种原因,消息处理可能会失败.其中一些原因是永久性问题,例如数据库约束失败或消息格式无 ...

  8. 树莓派上安装Samba实现树莓派与Windows间的文件共享

    我是参考这篇文章的: https://www.jianshu.com/p/ead92b06318e 安装samba和common-bin库(具有smbpasswd效用) sudo apt-get in ...

  9. .Net Core 2.*+ InfluxDB+Grafana+App Metrics实时性能监控

    前言 .net core 2.* 实施性能监控 这个工具其实给运维 大大们用起来是更爽的.但是Grafana现在还没有找到中文版. 本文需要了解的相关技术与内容: InfluxDb(分布式时序数据库, ...

  10. 云计算openstack核心组件--glance-镜像服务（6）

    glance做什么 OpenStack 由 Glance 提供 Image 服务 获取镜像位置 https://docs.openstack.org/image-guide/obtain-images ...