随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

本文给大家介绍的一款组件是：

快速实现基于uQRCode封装简单快速实用全端二维码生成插件;

效果图如下：

编辑

代码如下：

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

使用方法


#引入js文件

> import uQRCode from '@/common/uqrcode.js'
>
> <view class="canvas">
>
> <!-- 二维码插件 width height设置宽高 -->
>
> <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
>
> </view>

HTML代码部分


> <template>
>
> <view class="content">
>
> <view class="canvas">
>
> <!-- 二维码插件 width height设置宽高 -->
>
> <canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}" />
>
> </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
>
> <script>
>
> 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封装简单快速实用全端二维码生成插件

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

使用方法

HTML代码部分