VUE框架应用包---------微信二维码应用_vue微信扫码登录二维码大小-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45176415/article/details/116236465

微信二维码：

说明: 项目中的场景中对文章的进行微信输出二维码，或者二维码进行扫描跳转链接。

应用：

提示：这里可以添加要学的内容
例如：

1、 VUE安装包

安装QR包

npm install --save qrcodejs2

2、引用导入

import QRCode from “qrcodejs2”

3、页面使用

<template>
    <div class="qrcodeimg">
      <p id="qrcode"></p>
    </div>
</template>
<script>
import QRCode from "qrcodejs2"; //二维码
export default {
   methods：{
    qrcode() {
      let qrcode = new QRCode("qrcode", {
        width: 120,
		height: 120, // 高度
		colorLight: "#ffffff",
        text: ''// 二维码内容
      });
    }
  },
  mounted() {
   this.qecode()
  }
};
</script>

JQuery使用：

1. github 地址

github 地址

2. 引入Js

<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>

3. 元素应用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>二维码生成测试页面</title>
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.qrcode.min.js" ></script>
	</head>
	<body>
		<div id="code"></div>
		<script type="text/javascript">
			$("#code").qrcode({	
   			        width: 400, //宽度 
    			    height:400, //高度 
    			    text: "www.zhizuobiao.com" //任意内容     			
			});
		</script>
	</body>
	
</html>

4. 参数说明

render   : "canvas",//设置渲染方式  
width       : 256,     //设置宽度  
height      : 256,     //设置高度  
typeNumber  : -1,      //计算模式  
correctLevel    : QRErrorCorrectLevel.H,//纠错等级  
background      : "#ffffff",//背景颜色  
foreground      : "#000000" //前景颜色

5. JQ转码

提示： jquery.qrcode.min.js在进行对中文文字进行生成的时候需要进行转码

<div id="code"></div>
<script>
    //如果内容中有中文，在生成二维码钱就要把字符串转换成utf-8
    function toUtf8(str) {
        var out, i, len, c;
        out = "";
        len = str.length;
        for (i = 0; i < len; i++) {
            c = str.charCodeAt(i);
            if ((c >= 0x0001) && (c <= 0x007F)) {
                out += str.charAt(i);
            } else if (c > 0x07FF) {
                out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            } else {
                out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
                out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
            }
        }
        return out;
    }
 
    $('#code').qrcode({
        text: toUtf8('我是tianma'),
        width: 150,
        height: 150
    });
 
    //就目前 微信/支付宝等 不识别其他颜色的二维码
    $('#code').qrcode({
        text: toUtf8('我是tianma'),
        width: 150,
        height: 150,
        background: '#f00',
        foreground: '#0f0'
    });
</script>

6. 注意事项

//text 属性的值长度不能太长，最大字节数 10208
//text 字符串太长 微信/支付宝等扫一扫无法识别，微博识别内容更多
//微博扫一扫：大约200 字以内，微信扫一扫：大约 160字以内，支付宝扫一扫：大约130字符以内
$('#code').qrcode({
    text: toUtf8('来越多的，当前不曾具有的，'),
    width: 150,
    height: 150
});