uniapp生成二维码和条形码

uniapp生成二维码和条形码

我们做小程序在我的这个页面经常会遇到有生成二维码的需求，那么我们使用tki-barcode和tki-qrcode这两个组件进行实现我们的需求
组件下载地址：“点击这里”
下载之后我们解压到项目的components
接下来第一步：我们就在使用的那个页面进行引用

import tkiBarcode from '@/components/tki-barcode/tki-barcode'
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode'

components: {
	tkiBarcode,
	tkiQrcode
},

<view class="warp_back">
	<u-image src="/static/juxing.png" mode="widthFill" width="90%" height="100%" style="position: relative;margin: 0 auto;"></u-image>
	<view class="component text-center">
		 <view class="component-code">
			<tki-barcode
				ref="barcode"
				onval
				:val="code"
				:load-make="true"
				:opations="barOpations"/>
		 </view>
		<view class="coupon-no-view">{{ code }}</view>
		<view class="component-qr">
			<tki-qrcode
				 ref="qrcode"
				 onval
				 :val="code"
				 :size="250"
				 :load-make="true"
				 :show-loading="false"/>
		</view>
						        
	</view>
		<u-image @click="close" mode="widthFill" class="close" src="/static/close_meck.png" width="60rpx" height="60rpx"></u-image>
	</view>

.warp_back{
			width: 80%;
			height: 58% !important;
			margin: 0 auto;
			position: relative;
			// background-image: url('../../static/juxing.png');
			
			.u-image{
				margin: 0 auto;
				hieght:92% !important;
				
				.u-image__image{
					hieght:92%;
				}
			}
			
			.waro_lfet{
				width: 60rpx;
				height: 120rpx;
				border-top-right-radius: 60rpx;
				border-bottom-right-radius: 60rpx;
				position: absolute;
				top: 10em;
				left: 64rpx;
				background: #F8F8F8;
				
			}
			.close{
				position: absolute;
				bottom: -20%;
				left: 45%;
			}
		}

以上就是一个完整的例子，希望能帮助到你！