二维码转换成短链接_二维码解析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端地址是一样的

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vmware中ubuntu虚拟机扩容

    vmware中ubuntu虚拟机扩容ubuntu硬盘扩容

  • 对口计算机一分一档2019河北,最新!2019河北高考一分一档统计表公布![通俗易懂]

    对口计算机一分一档2019河北,最新!2019河北高考一分一档统计表公布![通俗易懂]免费申请学习规划请选择学习阶段学前小学初中高中大学留学其他已为25937位学员提供学习规划*验证码*短信验证码{“text1”:{“label”:”薄弱科目”,”placeholder”:”请输入你的薄弱科目”,”required”:1,”formType”:”text”,”group”:”dynamic”,”name”:”text1″,”type”:”text”,”data”:[]},”cour…

  • java11-泛型及其使用[通俗易懂]

    java11-泛型及其使用[通俗易懂]1.概述就本质而言“泛型”的意思就是参数化类型。参数化类型很重要,因为使用该特性创建的类、接口以及方法可以以参数的形式指定操作的数据类型。泛型通俗的说就是方法的返回值或参数是不确定的,可以随创建

  • 拉链表详解_拉链表还原统计

    拉链表详解_拉链表还原统计拉链表产生背景在数据仓库的数据模型设计过程中,经常会遇到这样的需求:1、数据量比较大;2、表中的部分字段会被update,如用户的地址,产品的描述信息,订单的状态等等;3、需要查看某一个时间点或者时间段的历史快照信息,比如,查看某一个订单在历史某一个时间点的状态,比如,查看某一个用户在过去某一段时间内,更新过几次等等;4、变化的比例和频率不是很大,比如,总共有1000万的会员,每天新增和发生变化的有10万左右;5、如果对这边表每天都保留一份全量,那么每次全量中会保存很多不变的信息,对存储是极大的

    2022年10月17日
  • Python测试框架之pytest详解

    Python测试框架之pytest详解Python测试框架之前一直用的是unittest+HTMLTestRunner,听到有人说pytest很好用,所以这段时间就看了看pytest文档,在这里做个记录。官方文档介绍:Pytestisaframeworkthatmakesbuildingsimpleandscalabletestseasy.Testsareexpressiveand…

  • 监控平台架构设计

    监控平台架构设计

发表回复

您的电子邮箱地址不会被公开。

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