原生js或uni-app生成二维码(可修改二维码样式，带logo）

一、原生js生成二维码（用qrcode）

html部分

<div class="main"><div id="qrcodeHide" class="qrcode-hidden"></div><div id="qrcode" class="qrcode"></div>
</div>

js部分

//qrcode.min.js的下载地址为https://github.com/1429880240/qrcodejs
<script src="./js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">var url = 'https://www.baidu.com';  //生成的二维码要跳转的地址var qrHiddenBox = document.getElementById("qrcodeHide")var qrbox = document.getElementById("qrcode")new QRCode(qrHiddenBox, url);//在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏,所以需要特殊处理一下，将canvas标签隐藏，拿到生成的url放到img里面再展示出来var myCanvas = document.getElementsByTagName('canvas')[0];var image = new Image();image.src = myCanvas.toDataURL("image/png");qrbox.append(image);
</script>

二、uni-app生成二维码

1、直接生成二维码（缺点：无法设置图片logo）

html部分

<view class="container"><image :src="qr"></image>
</view>

js部分

//先引入引入wxqrcode.js，下载地址：链接: https://pan.baidu.com/s/1iEHNl-_F8kGwRDV-enMz5Q 密码: c4hm）
import Qr from "@/util/wxqrcode.js"
methods: {getQr(){this.qr = Qr.createQrCodeImg('https://www.baidu.com') //生成二维码的地址，以百度为例},
}

2、引入uni-app的tki-qrcode插件（可以设置图片logo）

html部分

<view class="qrimg"><tki-qrcode:val="val":size="size":icon="icon":iconSize="iconsize":onval="onval":loadMake="loadMake"/>
</view>

js部分 (插件的下载地址：https://github.com/q310550690/uni-app-qrcode )

import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {components: {tkiQrcode},data() {return {val: 'https://www.baidu.com',size: 180,loadMake: true,onval: true,icon: '../../static/imgs/ewm-logo.png',iconSize:50};},
}

属性说明

效果图

原生js或uni-app生成二维码(可修改二维码样式，带logo）相关推荐

原生JS结合canvas写的一套画板,能修改画笔粗细,能修改画笔颜色,能清空画板等一系列功能
1. 本片文章是使用的原生JS代码编写的画板,能实现画笔粗细的修改,以及画笔颜色的修改 2. 用到的JS的canvas知识点之外,还用到了鼠标事件的监听.根据鼠标事件,监听点击起始位置,以及过程中鼠标 ...
【每日一练】原生js仿淘宝主图放大镜功能，附学习源码
在我们的项目中,经常会遇到各种功能效果的实现,对于每一项功能的实现方式,都有很多种,这些实现方式没有好坏之分,只有适合与否,但是我个人建议,如果项目急就选择自己擅长的方式实现,比较完成工作更加重要嘛. ...
基于vue.js的uni app跨平台框架webapp、安卓app、苹果app、微信小程序毕业设计毕设作品开题报告论文参考（2）预约订座APP系统
效果图
小程序+二维码（带logo图片,可直接运行）
前言: 因为业务需要,再小程序上也得实现带logo的二维码效果,这里整理带logo二维码和不带logo二维码两种效果效果图: 不带logo二维码效果图: 带logo二维码效果图: 一. 不带logo ...
二维码制作完成后，还能修改二维码的内容吗？
二维码制作完成后,还能修改二维码的内容吗? 前几天有收到好多用户在咨询同样的问题: "打印出来的二维码,还能修改二维码内容吗?" "海报上的二维码,怎么修改二维码后面的网 ...
再来一个小游戏——原生js逐句解释开发简易版别踩白块，附源码
芜湖!没想到上个做扫雷的阅读量这么高(激动) 先捞一下:做个小项目~纯原生JS手把手逐句解释写一个扫雷小游戏(附源码) 快看↑ 这次就做一个别踩白块吧哈哈哈哈哈最终版演示地址:钢琴块源码在最后!最 ...
js动画与html动画效果,九种原生js动画效果
在做页面中,多数情况下都会遇到页面上做动画效果,我们大部分做动画的时候都是使用框架来做(比如jquery),这里我介绍下如何让通过原生的js来实现像框架一样的动画效果! 1.匀速动画效果说明:匀速动画 ...
生成二维码，扫描二维码，二维码预览三件套。uQRCode、uni.scanCode、uni.previewImage
生成二维码,扫描二维码,二维码预览三件套.uQRCode.uni.scanCode.uni.previewImage 一.生成二维码使用插件:uQRCode(在uniapp插件市场下载引入) 将uq ...
修改二维码生成插件jquery.qrcode.js支持加入自定义LOGO
1,将jquery.qrcode.min.js和jquery添加到您的网页中 <script src="jquery.min.js"></script> & ...
【Android App】二维码的讲解及生成属于自己的二维码实战（附源码和演示超详细必看）
需要全部代码请点赞关注收藏后评论区留言~~~ 一.二维码基本内容介绍条形码只能表达十几位数字编码,无法表示更复杂的数据. 二维码在二维方格上描出一个个黑点,从而表达更丰富的信息. 二维码早已在手机A ...

原生js或uni-app生成二维码(可修改二维码样式，带logo）

一、原生js生成二维码（用qrcode）

二、uni-app生成二维码

原生js或uni-app生成二维码(可修改二维码样式，带logo）相关推荐

最新文章

热门文章