前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件

快速实现基于uQRCode封装简单快速实用全端二维码生成插件; 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=12677

效果图如下：

代码如下：
# 基于uQRCode封装简单快速实用全端二维码生成插件

#### 使用方法

```使用方法

#引入js文件

import uQRCode from '@/common/uqrcode.js'

</view>

```

#### HTML代码部分

```html

</view>

<text class="list-text">{{ '预约号码:' + ' ' + this.myFormatData.yyh}}

</text>

<text class="list-text"> {{ '预约窗口:' + ' ' + this.myFormatData.bsdmc}}

</text>

<text class="list-text"> {{ '业务类型:' + ' ' + this.myFormatData.Yylxmc}}

</text>

<text class="list-text"> {{ '预约日期:' + ' ' + this.myFormatData.yyrq}}

</text>

</view>

</template>

```

#### JS代码（引入组件填充数据）

```javascript

import Vue from 'vue';

import uQRCode from '@/common/uqrcode.js'

export default {

data() {

return {

// 二维码标识串

qrcodeText: '',

// 二维码尺寸

qrcodeSize: 136,

// 最终生成的二维码图片

qrcodeSrc: '',

myFormatData:{'yyh':'eoruw20230528','bsdmc':'窗口1','Yylxmc':'租金缴纳','yyrq':'预约日期'},

}

onLoad(e) {

this.make();

methods: {

make() {

uni.showLoading({

title: '二维码生成中',

mask: true

})

uQRCode.make({

canvasId: 'qrcode',

text: this.qrcodeText,

size: this.qrcodeSize,

margin: 10,

success: res => {

this.qrcodeSrc = res

console.log('qrcodeSrc = ' + this.qrcodeSrc);

complete: () => {

uni.hideLoading()

}

})

}

</script>

```

#### CSS

```CSS

<style>

page {

background-color: #FFFFFF;

}

.content {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

margin-top: var(--status-bar-height);

}

.text {

display: flex;

justify-content: center;

margin-top: 46rpx;

margin-bottom: 6rpx;

font-size: 36rpx;

height: 44rpx;

color: #333333;

}

.canvas {

margin-top: 50rpx;

margin-bottom: 36rpx;

text-align: center;

}

.list-text {

display: flex;

justify-content: center;

width: 100%;

line-height: 60rpx;

font-size: 28rpx;

color: #666666;

}

.button {

width: 88%;

margin-top: 52rpx;

}

</style>

```

前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件相关推荐

vue二维码生成插件 - npm安装篇
vue二维码生成插件 - npm安装篇具体使用: 1. 安装: npm install vue-qr --save 2. 引入和声明 //在需要生成二维码的文件中引入比如qrCode.vue imp ...
canvas 插件_基于canvas的JavaScript 二维码生成工具——QRCanvas
介绍在我们日常的开发中,特别是在现代的社会环境下,二维码的应用可谓是丰富多彩,各种各样让人眼花缭乱的二维码,可见二维码已经渗透进我们生活的方方面面,也可以说目二维码确确实实方便了我们的生活.因为作为 ...
前端（Vue）怎么实现二维码生成
功能需求: 输入链接或文字,生成二维码效果演示: 输入网址使用手机扫码输入文字扫描二维码好,现在我们开始编程,简单介绍一下思路:找到一个免费的二维码生成api接口,进行对接我用到的是一个叫 ...
基于SignalR的消息推送与二维码描登录实现
1 概要说明使用微信扫描登录相信大家都不会陌生吧,二维码与手机结合产生了不同应用场景,基于二维码的应用更是比较广泛.为了满足ios.android客户端与web短信平台的结合,特开发了基于Singl ...
专属微信二维码python制作_如何利用Python制作简单的公众号二维码关注图
创意配图:微信,微信公众号,微信大V 而且最近发现了一个新的图像处理方面的库-Wand,它是 ImageMagick 库的 Python 接口.于是,我就打算用这个库来实现简单的制作一个二维码关注图, ...
基于jquery类库的绘制二维码的插件jquery.qrcode.js
jquery.qrcode.min.js 如下 (function(r){r.fn.qrcode=function(h){var s;function u(a){this.mode=s;this.d ...
java二维码生成使用SSM框架搭建属于自己的APP二维码合成、解析、下载
java二维码生成使用SSM框架搭建属于自己的APP二维码合成.解析.下载自己用java搭建一个属于自己APP二维码合成网站.我的思路是这样的: 1.用户在前台表单提交APP的IOS和Andro ...
魔坊APP项目-15-邀请好友（业务逻辑流程图、服务端提供邀请好友的二维码生成接口、客户端通过第三方识别微信二维码，服务端提供接口允许访问、App配置私有协议,允许第三方应用通过私有协议,唤醒APP）
邀请好友 1.业务逻辑流程图客户端提供点击"邀请好友"以后的页面frame,html/invite.html,代码: <!DOCTYPE html> <html ...
uQRCode二维码生成+样式
1.快速上手 | uQRCode 中文文档 2.二维码生成器 - DCloud 插件市场 3.前端生成二维码并下载(PC端)-CSDN博客

前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件

前端vue uni-app基于uQRCode封装简单快速实用全端二维码生成插件相关推荐

最新文章

热门文章