二维码转换成短链接_二维码解析url

二维码转换成短链接_二维码解析urlVue生成二维码实战案例,vue把url地址转化为二维码手机扫码打开

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

代码

npm install qrcodejs2 --save

代码引入到项目中,不需要再main.js做处理,只需要在使用的vue页面中引入。

在页面中使用

<template>
	<div id="qrcode" ref="qrcode"></div>
</template>

<script> // 需要在页面中引入 import QRCode from 'qrcodejs2' export default{ 
      components:{ 
      QRCode }, data(){ 
      return{ 
      } } ... } </script>

生成二维码

mounted() { 
   
   	 this.qrcodeScan();    // 注:需在mounted里触发qrcodeScan函数
   }
methods:{ 
   
	qrcodeScan() { 
    //生成二维码
		let qrcode = new QRCode(document.getElementById("qrcode"), { 
   
		width: 150, // 二维码宽度 
		height: 150, // 二维码高度
		text: window.location.href, // 浏览器地址url
		colorDark: "#000000",
		colorLight: "#ffffff",
		correctLevel: QRCode.CorrectLevel.H,
		})
		// console.log(window.location.href);
	},
},

text为二维码扫码打开之后的链接
这里把url地址转化为二维码。实现pc端页面,扫码打开手机端。


如图
在这里插入图片描述
我本来还想用获取路由,然后路由拼接上前缀,
发现这样不灵活,只能路径写死 万一改域名之类的 就会出问题
然后发现了

window.location.href // 浏览器地址url

直接用这个,反正手机端和pc端地址是一样的

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/188792.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C++多线程编程:同步之互斥量Mutex「建议收藏」

    C++多线程编程:同步之互斥量Mutex「建议收藏」文章目录5.示例代码文章目录1.CreateMutex()2.ReleaseMutex()3.WaitForSingleobject()4.CloseHandle()5.示例代码6.Mutex实现一个程序只允许允许一个实例(进程)5.示例代码文章目录1.CreateMutex()2.ReleaseMutex()3.WaitForSingleobject()4.CloseHandle()5.示例代码6.Mutex实现一个程序只允许允许一个实例(进程))5.示例代码文章目录1

    2022年6月26日
    37
  • navicate15最新激活码_在线激活

    (navicate15最新激活码)这是一篇idea技术相关文章,由全栈君为大家提供,主要知识点是关于2021JetBrains全家桶永久激活码的内容IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html1STL5S9V8F-eyJsa…

    2022年3月27日
    102
  • Kinect开发学习笔记之(一)Kinect介绍和应用

    Kinect开发学习笔记之(一)Kinect介绍和应用

    2021年12月5日
    35
  • docker安装 搭建私库 删除私库镜像 打印私库镜像 的shell脚本[通俗易懂]

    docker安装 搭建私库 删除私库镜像 打印私库镜像 的shell脚本[通俗易懂]#!/bin/bash#本脚本可以打印私有镜像库中所有的镜像#私有镜像库地址HUB_URL=hub.dy.com:5000#取得所有私有镜像库的所有镜像IMAGESLIST=$(curl-shttp://${HUB_URL}/v2/_catalog)#echo${IMAGESLIST}#删除后2个字符IMAGESLIST=${IMAGESLIST::-2}#删除…

    2022年7月18日
    15
  • IntelliJ IDEA常用快捷键汇总

    IntelliJ IDEA常用快捷键汇总在使用IntelliJIdea的时候,使用快捷键是必不可少的。掌握一些常用的快捷键能大大提高我们的开发效率。有些快捷键可以熟练的使用,但是还有另外一些快捷键虽然很好用,但是由于因为没有形成使用习惯或者没有理解快捷键的用法,甚至之前对一些快捷键根本没有概念,导致不会去使用。对于这些快捷键,如果能够用好,编辑代码的效率必能提高一个水平。所以在此梳理出来,加强自己的使用,形成习惯。(注:有些操作的快捷键

    2022年5月15日
    56
  • 现代语音信号处理笔记 (一)

    现代语音信号处理笔记 (一)本系列笔记对胡航老师的现代语音信号处理这本书的语音处理部分进行总结,包含语音信号处理基础、语音信号分析、语音编码三部分。一开始以为三部分总结到一篇文章里就可以了,但写着写着发现事情并没有那么简单。。。因此还是老老实实的总结吧,扎实的基础最重要。语音信号处理基础语音信号的处理简称语音处理,是用数字信号处理技术对语音信号进行处理的一门学科。语音信号均采用数字方式进行处理,语音信号的数字…

    2022年5月26日
    42

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号