vue2.0实现引用qrcode.js实现获取改变二维码的样式


可以在github 上下载demo链接 

https://github.com/fongdaBoy/Vue2.0ComponentDemo

vue代码

<template>
    <div class="qart">
        <div id="qrcode" ref="qrcode">
        </div>
        <input type="text" id="getval" value="" placeholder="修改这个值改变二维码">
    </div>
</template>

<script>

    export default {
        data() {
            return {

            }
        },
        created() {

        },
        mounted() {
            this._getQart()
        },

        methods: {

            _getQart: function() {

                if(this.i==false){
                    var qrcode = new QRCode(document.getElementById("qrcode"), {
                        width : 200,//设置宽高  
                        height : 200
                    });
                    document.getElementById("getval").onkeyup =function(){
                        qrcode.makeCode(document.getElementById("getval").value);
                    };

                    qrcode.makeCode(document.getElementById("getval").value);

                }
                this.i = true;
            },

        }

    }

</script>

<style>
    #qrcode{
        height: 200px;
        width: 200px;
        margin: auto;
    }
</style>


需要引用qrcode.js代码

/**
 * @fileoverview
 * - Using the 'QRCode for Javascript library'
 * - Fixed dataset of 'QRCode for Javascript library' for support full-spec.
 * - this library has no dependencies.
 *
 * @author davidshimjs
 * @see <a href="http://www.d-project.com/" target="_blank">http://www.d-project.com/</a>
 * @see <a href="http://jeromeetienne.github.com/jquery-qrcode/" target="_blank">http://jeromeetienne.github.com/jquery-qrcode/</a>
 */

!(function () {
//---------------------------------------------------------------------
// QRCode for JavaScript
//
// Copyright (c) 2009 Kazuhiko Arase
//
// URL: http://www.d-project.com/
//
// Licensed under the MIT license:
//   http://www.opensource.org/licenses/mit-license.php
//
// The word "QR Code" is registered trademark of
// DENSO WAVE INCORPORATED
//   http://www.denso-wave.com/qrcode/faqpatent-e.html
//
//---------------------------------------------------------------------
    function QR8bitByte(data) {
        this.mode = QRMode.MODE_8BIT_BYTE;
        this.data = data;
        this.parsedData = [];

// Added to support UTF-8 Characters
        for (var i = 0, l = this.data.length; i < l; i++) {
            var byteArray = [];
            var code = this.data.charCodeAt(i);

            if (code > 0x10000) {
                byteArray[0] = 0xF0 | ((code & 0x1C0000) >>> 18);
                byteArray[1] = 0x80 | ((code & 0x3F000) >>> 12);
                byteArray[2] = 0x80 | ((code & 0xFC0) >>> 6);
                byteArray[3] = 0x80 | (code & 0x3F);
            } else if (code > 0x800) {
                byteArray[0] = 0xE0 | ((code & 0xF000) >>> 12);
                byteArray[1] = 0x80 | ((code & 0xFC0) >>> 6);
                byteArray[2] = 0x80 | (code & 0x3F);
            } else if (code > 0x80) {
                byteArray[0] = 0xC0 | ((code & 0x7C0) >>> 6);
                byteArray[1] = 0x80 | (code & 0x3F);
            } else {
                byteArray[0] = code;
            }

            this.parsedData.push(byteArray);
        }

        this.parsedData = Array.prototype.concat.apply([], this.parsedData);

        if (this.parsedData.length != this.data.length) {
            this.parsedData.unshift(191);
            this.parsedData.unshift(187);
            this.parsedData.unshift(239);
        }
    }

    QR8bitByte.prototype = {
        getLength: function (buffer) {
            return this.parsedData.length;
        },
        write: function (buffer) {
            for (var i = 0, l = this.parsedData.length; i < l; i++) {
                buffer.put(this.parsedData[i], 8);
            }
        }
    };

    function QRCodeModel(typeNumber, errorCorrectLevel) {
        this.typeNumber = typeNumber;
        this.errorCorrectLevel = errorCorrectLevel;
        this.modules = null;
        this.moduleCount = 0;
        this.dataCache = null;
        this.dataList = [];
    }

    QRCodeModel.prototype={
  addData:function(data){
  var newData=new QR8bitByte(data);this.dataList.push(newData);this.dataCache=null;},isDark:function(row,col){
  if(row<0||this.moduleCount<=row||col<0||this.moduleCount<=col){
  throw new Error(row+","+col);}
        return this.modules[row][col];},getModuleCount:function(){
  return this.moduleCount;},make:function(){
  this.makeImpl(false,this.getBestMaskPattern());},makeImpl:function(test,maskPattern){
  this.moduleCount=this.typeNumber*4+17;this.modules=new Array(this.moduleCount);for(var row=0;row<this.moduleCount;row++){
  this.modules[row]=new Array(this.moduleCount);for(var col=0;col<this.moduleCount;col++){
  this.modules[row][col]=null;}}
        this.setupPositionProbePattern(0,0);this.setupPositionProbePattern(this.moduleCount-7,0);this.setupPositionProbePattern(0,this.moduleCount-7);this.setupPositionAdjustPattern();this.setupTimingPattern();this.setupTypeInfo(test,maskPattern);if(this.typeNumber>=7){
  this.setupTypeNumber(test);}
        if(this.dataCache==null){
  this.dataCache=QRCodeModel.createData(this.typeNumber,this.errorCorrectLevel,this.dataList);}
        this.mapData(this.dataCache,maskPattern);},setupPositionProbePattern:function(row,col){
  for(var r=-1;r<=7;r++){
  if(row+r<=-1||this.moduleCount<=row+r)continue;for(var c=-1;c<=7;c++){
  if(col+c<=-1||this.moduleCount<=col+c)continue;if((0<=r&&r<=6&&(c==0||c==6))||(0<=c&&c<=6&&(r==0||r==6))||(2<=r&&r<=4&&2<=c&&c<=4)){
  this.modules[row+r][col+c]=true;}else{
  this.modules[row+r][col+c]=false;}}}},getBestMaskPattern:function(){
  var minLostPoint=0;var pattern=0;for(var i=0;i<8;i++){
  this.makeImpl(true,i);var lostPoint=QRUtil.getLostPoint(this);if(i==0||minLostPoint>lostPoint){minLostPoint=lostPoint;pattern=i;}}
        return pattern;},createMovieClip:function(target_mc,instance_name,depth){
  var qr_mc=target_mc.createEmptyMovieClip(instance_name,depth);var cs=1;this.make();for(var row=0;row<this.modules.length;row++){
  var y=row*cs;for(var col=0;col<this.modules[row].length;col++){
  var x=col*cs;var dark=this.modules[row][col];if(dark){qr_mc.beginFill(0,100);qr_mc.moveTo(x,y);qr_mc.lineTo(x+cs,y);qr_mc.lineTo(x+cs,y+cs);qr_mc.lineTo(x,y+cs);qr_mc.endFill();}}}
        return qr_mc;},setupTimingPattern:function(){
  for(var r=8;r<this.moduleCount-8;r++){
  if(this.modules[r][6]!=null){
  continue;}
        this.modules[r][6]=(r%2==0);}
        for(var c=8;c<this.moduleCount-8;c++){
  if(this.modules[6][c]!=null){
  continue;}
            this.modules[6][c]=(c%2==0);}},setupPositionAdjustPattern:function(){
  var pos=QRUtil.getPatternPosition(this.typeNumber);for(var i=0;i<pos.length;i++){
  for(var j=0;j<pos.length;j++){
  var row=pos[i];var col=pos[j];if(this.modules[row][col]!=null){
  continue;}
        for(var r=-2;r<=2;r++){
  for(var c=-2;c<=2;c++){
  if(r==-2||r==2||c==-2||c==2||(r==0&&c==0)){
  this.modules[row+r][col+c]=true;}else{
  this.modules[row+r][col+c]=false;}}}}}},setupTypeNumber:function(test){
  var bits=QRUtil.getBCHTypeNumber(this.typeNumber);for(var i=0;i<18;i++){
  var mod=(!test&&((bits>>i)&1)==1);this.modules[Math.floor(i/3)][i%3+this.moduleCount-8-3]=mod;}
        for(var i=0;i<18;i++){
  var mod=(!test&&((bits>>i)&1)==1);this.modules[i%3+this.moduleCount-8-3][Math.floor(i/3)]=mod;}},setupTypeInfo:function(test,maskPattern){
  var data=(this.errorCorrectLevel<<3)|maskPattern;var bits=QRUtil.getBCHTypeInfo(data);for(var i=0;i<15;i++){
  var mod=(!test&&((bits>>i)&1)==1);if(i<6){
  this.modules[i][8]=mod;}else if(i<8){
  this.modules[i+1][8]=mod;}else{
  this.modules[this.moduleCount-15+i][8]=mod;}}
        for(var i=0;i<15;i++){
  var mod=(!test&&((bits>>i)&1)==1);if(i<8){
  this.modules[8][this.moduleCount-i-1]=mod;}else if(i<9){
  this.modules[8][15-i-1+1]=mod;}else{
  this.modules[8][15-i-1]=mod;}}
        this.modules[this.moduleCount-8][8]=(!test);},mapData:function(data,maskPattern){
  var inc=-1;var row=this.moduleCount-1;var bitIndex=7;var byteIndex=0;for(var col=this.moduleCount-1;col>0;col-=2){
  if(col==6)col--;while(true){
  for(var c=0;c<2;c++){
  if(this.modules[row][col-c]==null){
  var dark=false;if(byteIndex<data.length){dark=(((data[byteIndex]>>>bitIndex)&1)==1);}
        var mask=QRUtil.getMask(maskPattern,
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
课程概述: 本课程是一个小型的vue周边技术+以php为基础的+微信接口开发的小型项目。本项目以微信扫码关注公众号实现网站自动登陆这一功能为载体,将会讲解如下主要核心知识点:前端你将学习到: 一、vue-cli4进行前端项目的创建 二、如何使用vuex进行登陆信息的管理与同步 三、如何使用axios进行接口请求的封装与拦截 四、在脚手架里使用Element-UI 五、学习组件化编程的思想 六、如何解决接口前后端分离引起的跨域问题以及在跨域下使用cookie凭证进行会话维护 后端你讲学习到: 一、如何申请微信公众号测试账号,如何进行相关参数的配置,如何进行微信相关接口的开发 二、如何使用微信接口开发,如获取临时二维码获取用户基础信息,监听公众号关注以及扫描事件 三、如何使用redis对数据进行缓存 四、如何使用php原生代码进行接口的开发 五、如何使用laralvel 7.x 框架进行接口的开发 六、学习到laravel 核心概念的使用方法,如什么是依赖注入,如何使用服务容器解决依赖注入、服务提供者、间件的使用,如何处理请求数据,如何进行用户认证,以及如何使用Eloquent ORM进行数据库操作 七、开发过程遇到的问题,如何进行排查 八、git远端仓库的建立与配置,如何在配置多仓库下的公钥,服务器端部署公钥的配置,如何进行代码部署,本地与服务器代码的开发实时同步 九、如何使用composer帮助我们进行第三方依赖包的安装 本课程的设计思路随笔: 从业务层面上来讲,扫码关注公众号,实现网站端自动登陆是一个非常实用的功能,可以为微信公众号引流。 技术层面上来说,使用前后端分离进行制作,可以将前端以及后端的知识都涵盖到。对于前端的路由,信息维护,脚手架的搭建,ui组件的使用,接口的请求与封装都能够讲解到。 对于后端,本课程对php原生代码以及工作使用频率比较高的同时也很优雅的laravel框架都会进行讲解,分别予以代码的实现。让同学们能够看到原生开发与框架开发的区别,原生开发使得基础比较弱的同学能够慢慢上手,也知道此功能实现的核心要点,在进行原生代码开发后,再进行框架开发,会有个循序渐进的过程,同时在框架里面我们会降到主流框架都会用到的一些核心思想,比如依赖注入,服务容器,间件等等,同时对于想学习laravel框架的同学,学习过这个案例后,再去看文档就知道该如何去看,如何去学了。 对于整个代码的管理与部署,我们也会引入git仓库进行项目代码管理,如何在服务器进行网站环境的搭建与代码部署等等实用技巧。 相信本课程会给大家带来十足的收获,大家加油。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值