<!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. 关闭tslint

    只需要在tslint.config里配置一行 "defaultSeverity": "none",

  2. Oracle Database的基本概念

    一个 Oracle 服务器:是一个关系数据库管理系统(RDBMS),它提供全面的, 近乎完整的信息管理由Oracle 实例和Oracle 数据库组成Oracle 数据库 和 Oracle 实例Orac ...

  3. idea设置包的导入和提示重复代码下波浪线

    1.一般idea都不会导入包.即使按了(以下都是已eclipse设置idea的快捷键) alt+enter键也不能导入. 2.关闭重复代码提示(也就是重复代码有波浪线)

  4. Django Model模型

    Model简介 模型准确且唯一的描述了数据.它包含您储存的数据的重要字段和行为.一般来说,每一个模型都映射一张数据库表. 每个模型都是一个 Python 的类,这些类继承 django.db.mode ...

  5. Qt可扩展窗口实现

    前言 有时候需要实现窗口可扩展,换句话说有一部分widget能够隐藏,显示,并且对话框大小可以随着widget变动而做出相应的变化:如图: 在点击CheckBox时,GroupBox_2能够显示,取消 ...

  6. MongoDB Input

    Configure Connection Tab Host name(s) or IP address(es):网络名称或者地址.可以输入多个主机名或IP地址,用逗号分隔.还可以通过将主机名和端口号与 ...

  7. python中pip的安装与更新

    python -m pip install --upgrade pip --force-reinstall

  8. [Python]最长公共子序列 VS 最长公共子串[动态规划]

    前言 由于原微软开源的基于古老的perl语言的Rouge依赖环境实在难以搭建,遂跟着Rouge论文的描述自行实现. Rouge存在N.L.S.W.SU等几大子评估指标.在复现Rouge-L的函数时,便 ...

  9. Swift 3.0 闭包的定义和使用

    // // ViewController.swift // 闭包的定义和使用 // // Created by 思 彭 on 16/9/17. // Copyright © 2016年 思 彭. Al ...

  10. 状态管理之 Flux、Redux、Vuex、MobX（概念篇）

    本文是对 Flux.Redux.Vuex.MobX 几种常用状态管理模式的总结,偏向于概念层面,不涉及过多代码. 状态管理 什么是状态管理? 状态管理就是,把组件之间需要共享的状态抽取出来,遵循特定的 ...