js动态生成二维码

LinMeng 等级 1081 0 0
标签: 二维码前端

需求:项目需要根据链接实时生成二维码,当检测终端是PC时,将当前项目链接生成二维码供用户手机端使用

判断终端是否为mobile

function isMobile () {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
  return flag;
}

链接准备

this.$store.state.getQRCodeUrl = document.URL;
//链接也可以用window.location.href 获取
 if (!window.common.isMobile()) {
     this.$router.push({path: '/QRCodepage'}); 
      return;
   } 

插件准备

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
下载命令 npm install qrcodejs2 --save

生成二维码

<template>
  <div class="QRCodePage">
      <div class="content">
        <div class="titleCen">请扫描二维码支付</div>
        <div id='qrcode' class="qrCode"></div>
      </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';
export default {
  name: 'QRCodePage',
  data () {
    return {
      url: ''
    };
  },
  created () {
    this.url = this.$store.state.getQRCodeUrl;
  },
  mounted () {
    this.createQRCode();
  },
  methods: {
    createQRCode () {
        var qrcode =  new QRCode('qrcode', {
          text: this.url,
          width: 300,
          height: 300,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        });
        qrcode.makeCode(this.url); // 生成二维码
    }
  }

};
</script>

<style lang='less'>
.QRCodePage{
    background-color: #f7f7f7;
    height: 100%;
    .content{
        width: 300px;
        height: 300px;
        margin: 20px auto;
        .titleCen{
          text-align:center;
        }
        .qrCode{
          width: 90%;
          margin:20px auto;
        }
    }
}

</style>

###注意: 在本地调试时报错-----vue.runtime.esm.js?2b0e:1888 Error: code length overflow. (1676>1056) 发布到测试上用测试域名就好了

收藏
评论区

相关推荐

项目实战之---AES 加密
ajax/index.js import axiosApi from '../js/fetch'; import { baseUrl, headerParams } from '../js/baseUrl'; // import引用AES源码js import CryptoJS from 'cryptojs/cryptojs'; console.lo
前端 - 常见的异常捕获方法
前端异常捕获在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮。从ES3开始,js也提供了类似的异常处理机制,从而让js代码变的更健壮,程序执行的过程中出现了异常,也可以让程序具有了一部分的异常恢复能力。js异常的特点是,出现不会导致JS引擎崩溃,最多只会终止当前执行的任务。回归正题,我们该如何在程序异常发生
CSS禁用鼠标拖拽选中内容
chrome  -webkit-user-select:none firxfox  -moz-user-select:none IE需要使用JS的onSelected事件了。 JS代码             dom.style.MozUserSelect = 'none';//fixrox禁止选择的JS脚本             dom.st
JS
[在线预览](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fjsfiddle.net%2F1010543618%2Ffyf913t0%2F) 使用《Web API 接口》的《MutationObserver》 [MutationObserver](https://www.oschina.
JS动态加载JS
1、直接document.write <script language="javascript"> document.write("<script src='test.js'><\\/script>"); </script> 2、动态改变已有script的src属性 <script src='' id="s1"></script> <
JS导出页面为PDF文件,该如何操作?来看一眼就明白啦!
废话不多说,直接上代码。 1.资源文件或依赖 <script type="text/javascript" src="https://my.oschina.net//u/4265132/blog/4054317/js/canvg2.js"></script><script type="text/javascript" src="https://m
Echarts全国地图二级钻取
<html> <head> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/echarts-all-3.js"></script> <script src="js/china.js"></script> </h
JQValidate使用说明
JQuery Validate使用总结: 一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/jquery.validate.js" type="text/javascript"></script> 二、默认校验规则
JS前端图形化插件之利器Gojs组件(php中文网)
JS前端图形化插件之利器Gojs组件(php中文网) ========================== 一、总结 ---- ### 一句话总结:php中文网我可以好好走一波 二、JS前端图形化插件之利器Gojs组件 -------------------- 参考: JS前端图形化插件之利器Gojs组件-js教程-PHP中文网 http://
JavaScaript学习笔记第(一)
js由三部分组成,分别是ECMAScript、DOM、BOM 其中ECMAScript规定了js的语法 js是一门解释型语言、脚本语言、动态类型语言、基于对象语言 书写js代码和CSS一样,有三个书写的地方,第一个是使用<script>标签,再<sccript>标签中书写js代码,标签一般都在body标签中的末尾,第二个地方是书写再结构里,html标签
JavaScript 两个叹号含义
先起个例子吧~  这个用的是谋智的js引擎monkey spider  darion.yaphet@localhost.localdomain:/home/darion.yaphet> js               js> var i; js> print(i) undefined js>  js> va
JavaScript八张思维导图
**![](https://oscimg.oschina.net/oscnet/17104907-a0f0-4b40-ac9d-9c40d9b13157.jpg)** **目录** * JS基本概念 * JS操作符 * JS基本语句 * JS数组用法 * Date用法 * JS
Javascript 是如何体现继承的 ?
js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承)   由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现 在面向对象的语言中,我们使用类来创建一个自定义对象
React.createClass 、React.createElement、Component
react里面有几个需要区别开的函数 React.createClass 、React.createElement、Component 首选看一下在浏览器的下面写法: <div id="app"> </div> <script src="../js/react.js"></script> <scr
Springmvc异步上传文件
<script src="js/jquery.js" type="text/javascript"></script><script src="js/jquery.ext.js" type="text/javascript"></script><script src="js/jquery.form.js" type="text/javascript"