jQuery实现“扫码阅读”功能

今天看到一个用户发了个话题，“PC端的URL在移动端上打开要一个个敲好麻烦，有什么好的办法？”。

确实现在已经是移动时代了，在移动设备上阅读慢慢会成为主流，网站如果没有便捷的方式让用户在移动设备阅读的话还真有点落伍，于是想想就做个“扫码阅读”的功能吧。其实很简单，就是将网址生成二维码就行了。

无论用PHP生成，还是用JavaScript生成都是可以的，从代码改动来说，用JavaScript会更省事些。所以这里就用jQuery吧。正好网上有个 jquery.qrcode.js 的扩展，可以拿来用。使用起来也很简单，比如这样：

然后用微信、支付宝钱包什么的扫一扫就可以在手机浏览器打开了，很方便，感谢 jquery.qrcode.js 的作者。

生成QR码的代码如下：

代码如下:

<div id="qrcode"></div>
<script src="http://www.xxx.net/librarys/application/views/veda/js/jquery-1.6.1.min.js" type="text/javascript">
<script src="http://www.xxx.net/librarys/application/views/veda/js/jquery.qrcode.min.js" type="text/javascript">
<script type="text/javascript">
jQuery.noConflict();
jQuery("#qrcode").qrcode({
  render: "canvas", //table方式
  width: 150, //宽度
  height:150, //高度
  text: 'http://www.xxx.net/' //任意内容
});
</script>

jquery.qrcode.js 其实是通过使用jQuery实现图形渲染，画图，支持canvas（HTML5）和table两种方式，默认使用canvas方式，效率最高，当然要浏览器支持html5。直接调用如下：

代码如下:

jQuery('#code').qrcode("http://www.xxx.net/");

如果浏览器不支持 HTML5，或者你要配置图片的尺寸，则可以采用这种方式：

代码如下:

jQuery("#code").qrcode({
   render: "canvas", //canvas or table方式
   width: 150, //宽度
   height:150, //高度
   text: 'http://www.xxx.net/' //内容
});

现在博客每篇文章右侧都有生成QR码，可以扫一扫，在手机上阅读了。

赞 (0)

相关推荐

  • 使用jquery.qrcode生成彩色二维码实例

    使用jquery.qrcode生成彩色二维码实例

    jquery.qrcode.js 是居于jquery类库的绘制二维码的插件,用它来实现二维码图形渲染支持canvas和table两种绘图方式.(jquery.qrcode.js 设置显示方式为table时在webkit核心浏览器如chrome下会变形,这个需要注意.) 下面为测试代码(增加了颜色控制,可以设置4个区块的颜色值,需要指定render为table.),效果如下: 代码如下: <html> <head> <title>JS生成二维码</title>

  • 利用jquery.qrcode在页面上生成二维码且支持中文

    实例如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>使用j

  • Jquery 类网页微信二维码图块滚动效果具体实现

    首先是自己定制的脚本方法属性代码: 复制代码 代码如下: /*  * 创建浮动图片广告(Generate a dock AD image)  *  * USAGE:   *  $(selector).higo_plugins_ad({  *      src:null,                    // 广告图片路径  *      closeSrc:null,               // 关闭图片路径  *      href:"#",                

  • jquery.qrcode在线生成二维码使用示例

    最近在做一个二维码的项目,所以在随便看的时候发现这个感觉挺不错的.jquery除了它自己非常出色的js功能之外还附带有数不清的插件,可以完成各种美好的效果和功能.jquery.qrcode就是其中一个,用来在线生成二维码. qrcode插件在github上开源的地址在https://github.com/jeromeetienne/jquery-qrcode 它的后面附带有使用说明,只有简单的四步,非常方便的调用. 插件是外国人写的,所以在开始使用的时候不能识别中文内容的二维码,因为jquery

  • 利用jquery包将字符串生成二维码图片

    将一个字符串(可以是中文,在生成二维码图片之前将中文转码)生成二维码图片,如果想要带log的二维码,可以在生成后的二维码中间部位自己添加一个小log,log图片不要太大,不然就扫描不出内容了. 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.8.3.js"

  • jQuery实现“扫码阅读”功能

    今天看到一个用户发了个话题,"PC端的URL在移动端上打开要一个个敲好麻烦,有什么好的办法?". 确实现在已经是移动时代了,在移动设备上阅读慢慢会成为主流,网站如果没有便捷的方式让用户在移动设备阅读的话还真有点落伍,于是想想就做个"扫码阅读"的功能吧.其实很简单,就是将网址生成二维码就行了. 无论用PHP生成,还是用JavaScript生成都是可以的,从代码改动来说,用JavaScript会更省事些.所以这里就用jQuery吧.正好网上有个 jquery.qrcod

  • 详解java实现简单扫码登录功能(模仿微信网页版扫码)

    详解java实现简单扫码登录功能(模仿微信网页版扫码)

    java实现简单扫码登录功能 模仿微信pc网页版扫码登录 使用js代码生成qrcode二维码减轻服务器压力 js循环请求服务端,判断是否qrcode被扫 二维码超时失效功能 二维码被扫成功登录,服务端产生sessionId,传到页面使用js保存cookie 多线程 生成qrcode相关js jquery.qrcode.js 代码 页面div <div class="pc_qr_code"> <input type="hidden" id="

  • 基于 Swoole 的微信扫码登录功能实现代码

    基于 Swoole 的微信扫码登录功能实现代码

    随着微信的普及,扫码登录方式越来越被现在的应用所使用.它因为不用去记住密码,只要有微信号即可方便快捷登录.微信的开放平台原生就有支持扫码登录的功能,不过大部分人还是在用公众平台,所以扫码登录只能自行实现.这里基于微信公众平台的带参数临时二维码,并且结合 Swoole 的 WebSocket 服务实现扫码登录.大体流程如下: 客户端打开登录界面,连接到 WebSocket 服务 WebScoket 服务生成带参数二维码返回给客户端 用户扫描展示的带参数二维码 微信服务器回调扫码事件并通知开发者服务

  • 基于C#实现微信支付宝扫码支付功能

    为公司系统业务需要,这几天了解了一下微信和支付宝扫码支付的接口,并用c#实现了微信和支付宝扫码支付的功能. 微信支付分为6种支付模式:1.付款码支付,2.native支付,3.jsapi支付,4.app支付,5.h5支付,6.小程序支付 我在这里用到的是native支付,就是网页生成二维码让用户扫码支付,再调用回调接口判断用户是否支付成功. 支付宝支付api也挺多的,我只使用了一些我在系统中能够用到的,现在将代码简单记录在这里,先从微信支付开始. 微信支付 先上后台代码: 传入参数(总金额一定要

  • Android集成zxing扫码框架功能

    我们知道zxing是一个强大的处理二维码和条形码等的开源库,本篇文章记录一下自己在项目中集成zxing开源库的过程. 导入依赖 implementation 'com.google.zxing:core:3.3.3' 申请权限 在AndroidManifest中申请相应权限: <!--相机--> <uses-permission android:name="android.permission.CAMERA" /> <!--震动--> <use

  • Spring Boot实现微信扫码登录功能流程分析

    Spring Boot实现微信扫码登录功能流程分析

    目录 1. 授权流程说明 第一步:请求CODE 第二步:通过code获取access_token 第三步:通过access_token调用接口 2. 授权流程代码 3. 用户登录和登出 4. Spring AOP校验用户有没有登录 5. 拦截登录校验不通过抛出的异常 微信开放平台:微信扫码登录功能 官方文档:https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html 1. 授权

  • Vue PC端实现扫码登录功能示例代码

    目录 需求描述 思路解析 前端功能实现 如何控制二维码的时效性? 前端如何获取服务器二维码的状态? 本篇文章给大家带来了关于Vue的相关知识,其中主要介绍了在PC端实现扫码的原理是什么?怎么生成二维码图片?怎么用Vue实现前端扫码登录?感兴趣的朋友,下面一起来看一下吧,希望对大家有帮助. 需求描述 目前大多数PC端应用都有配套的移动端APP,如微信,淘宝等,通过使用手机APP上的扫一扫功能去扫页面二维码图片进行登录,使得用户登录操作更方便,安全,快捷. 思路解析 PC 扫码原理? 扫码登录功能涉

  • nodejs微信扫码支付功能实现

    前言 本篇文章主要是记录本人在微信扫码支付过程中所遇到的问题,给大家一个借鉴作用,希望对你们有帮助 开发环境 nodejs v8.1.0 egg v1.1.0 准备工作 微信公众号-appid 微信商户号-mch_id key值(签名算法所需,其实就是一个32位的密码,可以用md5生成一个)(key设置路径:微信商户平台(pay.weixin.qq.com)-->账户设置-->API安全-->密钥设置) 扫码支付-统一下单 以下才用的是微信模式二,因为比较简单 let MD5 = req

  • java实现在SSM下使用支付宝扫码支付功能

    java实现在SSM下使用支付宝扫码支付功能

    本文实例为大家分享了java使用支付宝扫码支付的具体代码,供大家参考,具体内容如下 准备工作 首先开通支付宝沙箱的测试账号,里面会有消费者账户和收款方账户 手机扫码下载手机端app 基础配置 所需jar包 AlipayConfig package com.alipay.config; import java.io.FileWriter; import java.io.IOException; import java.util.ResourceBundle; /* * *类名:AlipayConf

  • java实现微信扫码支付功能

    本文实例为大家分享了java实现微信扫码支付的具体代码,供大家参考,具体内容如下 1.maven项目的pom.xml中添加如下jar包: <dependency> <groupId>com.github.wxpay</groupId> <artifactId>wxpay-sdk</artifactId> <version>0.0.3</version> </dependency> 2.编写WeWxConfig类

随机推荐