【RuoYi移动端】uni-app中实现生成二维码功能（代码示例）

完整示例：

<template><view><view class="titleBar">执法检查“通行码”信息</view><view class="twoCode"><canvas canvas-id="qrcode"></canvas></view></view>
</template><script>import UQrcode from '@/pages/common/uqrcode.js'export default {onLoad() {this.QRurl = 'https://mp.csdn.net'this.qrFun(this.QRurl)},data() {return {qrcodeData: '', // 存储二维码图片的 Base64 编码QRurl: '',qrWidth: 0}},created() {// this.getCode()},mounted() {// this.generateQRCode('https://www.example.com'); // 生成二维码},methods: {qrFun: function(text) {UQrcode.make({canvasId: 'qrcode', //切记canvasId 里边的内容需要跟canvas里边canvas-id="qrcode"的名字一样componentInstance: this, // 当前页面的this,需要传递过去text: text, //需要转成二维码的内容是后端传过来的，我这里是onLoad传过来的，根                              据自己的需要size: 200, // // 二维码的大小,单位是pxmargin: 0, // 二维码的边距,如果设置为0就无边距backgroundColor: '#ffffff', // 二维码的背景色foregroundColor: '#000000', // 二维码的前景色,即二维码图案的颜色fileType: 'jpg', // 生成的二维码图片格式errorCorrectLevel: UQrcode.errorCorrectLevel.H, // 二维码的错误纠正级别,H为最高级别// 成功生成二维码的回调函数success: res => {// 在这里可以获取生成的二维码图片}})}},}
</script><style lang="scss">page {background-color: #eaf0f6;padding-top: 20px;}.titleBar {width: 90%;height: 50px;line-height: 50px;margin-top: 50px;background-image: url("../static/images/gra-linear.png");background-size: 100% 50px;margin: 0 auto;border: 1px solid #C1D6E6;text-align: center;font-size: 25px;}.twoCode {width: 90%;height: 300px;// line-height: 50px;border: 1px solid #C1D6E6;margin: 0 auto;display: flex;align-items: center;/* 画布上下居中 */justify-content: center;/* 画布左右居中 */background-color: #fff;}/* 画布样式 */.twoCode canvas {width: 200px;height: 200px;// background-color: red;}.topBar {height: 50px;width: 100%;background-image: url("../static/images/header-bg.png");background-repeat: repeat-x;display: flex;align-items: center;/* 上下居中 */justify-content: center;/* 左右居中 */}.topBar img {margin-top: 5px;height: 40px;width: auto;}</style>

记得在@/pages/common/uqrcode.js文件夹下放入uqrode.js文件，请到网上下载。