<!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. github上打开或下载过慢的问题解决

    1.用站长工具查询github.com http://tool.chinaz.com/dns?type=1&host=github.com&ip= 2.找到“美国[海外]”项查到的ip ...

  2. LC 640. Solve the Equation

    Solve a given equation and return the value of x in the form of string "x=#value". The equ ...

  3. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_5-7.授权登录获取微信用户个人信息实战

    笔记 7.授权登录获取微信用户个人信息实战         简介:讲解使用授权码code获取用户个人信息接口 关键点:看微信文档,字段尽量用拷贝 1.通过code获取access_token      ...

  4. Java日志体系（五）logback

    1.1 简介 师出同门,与log4j一样,logback也是由Ceki Gülcü开发的开源日志组件,可以说是log4j的改进版:在现如今的项目中,logback的出现次数越来越多,是目前主流首选的日 ...

  5. How to remove duplicate lines in a large text file?

    How would you remove duplicate lines from a file that is  much too large to fit in memory? The dupli ...

  6. Django：（03）请求和响应

    一.HttpRequest 客户端传参的几种方式 传递方式 示例 后端获取方式 数据类型 url路径(path) /news/1/2 正则匹配 str 查询字符串 /news2?category=1& ...

  7. MBProgressHUD长时间加载无法取消的解决方法

    使用MBProgressHUD时,加载网路数据,或者等待webview加载完毕,长时间的等待导致体验不佳,这时候希望点击屏幕取消加载动画效果: // MBProgressHUD.h @protocol ...

  8. Java 基础篇之lambda

    Lambda 示例 public interface Eatable { void taste(); } public interface Flyable { void fly(String weat ...

  9. Kafka Connector无法启动的原因

    如图:启动Connector的时候一直提示报错. 后面找了一下网上发现原因, 基本原因就是Kafka的lib包和插件包都添加到ClassPath里面了 而这两地方都有Kafka-Client的jar包 ...

  10. Golang结构体struct的使用(结构体嵌套， 匿名结构体等)

    转自: https://studygolang.com/articles/11313 golang中是没有class的,但是有一个结构体struct,有点类似,他没有像java,c++中继承的概念,但 ...