二维码转换成短链接_二维码解析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#使用WebClient登录网站抓取登录后的网页

    C#登录网站实际上就是模拟浏览器提交表单,然后记录浏览器响应返回的会话Cookie值,再次发送请求时带着这个会话cookie值去请求就可以实现模拟登录的效果了。如下类CookieAwareWebCl

    2021年12月27日
    39
  • java命令行执行 jar_java命令打包jar

    java命令行执行 jar_java命令打包jar摘要这个技巧阐明了如何不直接处理清单文件而将一个不能运行jar包转换成一个可以执行的jar包。学会如何写一段转换jar包的程序,将你的jar包转换成你能使用java-jar命令运行jar包或象在windows系统上那样通过双击来运行jar包。你可以很容易地将一个应用的所有的类和资源打包到一个jar文件中去。事实上,这只是打包的一个原因。另一个原因是让用户很容易地执行包中的应用。那么在java的…

    2022年10月5日
    2
  • 为什么使用框架

    为什么使用框架

    2022年3月12日
    40
  • TOP命令详解(TOP10)

    原文http://rockhooray.blog.51cto.com/938613/832621一概述在终端中可以查看top命令的路径和所属软件包。top程序对运行的系统提供一个动态的实时的监控。它能够显示系统的总体信息和一些正被Linux内核管理的任务。它所显示的系统总体信息的样式以及任务信息显示的样式,顺序和大小都是可以由用户配置,而且配置信息可以重启后永久生

    2022年4月11日
    237
  • 范冰:增长黑客入门训练营

    范冰:增长黑客入门训练营之前刚入门产品的时候,增长的概念已经很流行了,连着读了SeanEllis的《增长黑客:如何低成本实现爆发式成长》和范冰的《增长黑客:创业公司的用户与收入增长秘籍》以及相应的公开课,如果你不知道SeanEllis,那我觉得你应该认真花点时间去了解一下这位“增长黑客之父”了,之前已经分享过SeanEllis的公开课和关于这本书的读书笔记,比较开心的是无意中发现2019年《增长黑客:创业公司的用户与收入增长秘籍》的作者范冰就已经亲自开了这本增长黑客的课程,还是觉得好物不容错过!欢迎要资源,欢迎交流沟通过~

    2022年5月11日
    75
  • vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」

    vue 高德地图标记_如何在vue里面调用高德地图「建议收藏」1.修改webpac.base.conf.js文件与module同一级添加externals:{‘AMap‘:‘AMap‘,‘AMapUI‘:‘AMapUI‘}配置。然后在index页面引入文件接着下载包vue-amap,然后在vue页面中importAMapfrom‘AMap‘//在使用地图的页面引入该组件varmapexportdefault{mounted:functio…

    2022年5月21日
    40

发表回复

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

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