使用HBuider
1.先安裝插件
（地址 :? https://ext.dcloud.net.cn/plugin?id=1287）

這里直接就安裝到了uni-modules里面了

2、引入

import uQRCode from ‘@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue’

3、代碼實現(xiàn) ?

<template>
   <view>
<!-- 渲染數(shù)據(jù) -->
		<view class="u-demo-block__content wrap" v-for="item in filteredList" :key="item.id">
			<u-row class="contentbox">
				<u-col span="12" class="action-item">
					<view><text class="info">xxx:</text>{{item.outbound.udeptName}}</view>
				  <view class="button">
				 <!-- 點擊二維碼出來 @click="click(item)" -->
						<button class="button-item" type="primary" @click="click(item)">二維碼顯示</button>
					</view>
				</u-col>
			</u-row>
		</view>
		<!-- 二維碼 -->
		<view>
		<!-- 彈框 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<uqrcode ref="uQRCode" :mode="mode" :value="text" :size="size" :margin="margin" canvasId="item.id"
						background-color="backgroundColor" :foreground-color="foregroundColor" :typeNumber="typeNumber"
						:fileType="fileType" />
				  </view>
			</uni-popup>
		</view>
	</view>
</template>
<script>
	import {receive} from '@/api/xxx/index'  
	import uQRCode from '@/uni_modules/Sansnn-uQRCode/components/u-qrcode/u-qrcode.vue'
	export default {
		data() {
			return {
				mode: 'canvas',//也可以是view
				text: 'test',//也可以寫網(wǎng)址，直接生成對應(yīng)的二維碼
				size: 140,
				margin: 10,
				backgroundColor: '#FFFFFF',
				foregroundColor: '#000000',
				//errorCorrectLevel: uQRCode.errorCorrectLevel.H,  
				typeNumber: -1,
				fileType: 'png',
				defaultErrorCorrectLevel: uQRCode.errorCorrectLevel,
				type: 'center', //彈框在中央
			}
		},
		methods: {
		 // 請求數(shù)據(jù)
			getReceive() {
				receive().then(res => {
					this.receiveList = res.rows;
				}).catch((error) => {})
			},
			//點擊二維碼出來
			click(item) {
				console.log(item);
				//這里把數(shù)據(jù)的id賦值給text，綁定到上面，這樣點擊就是對應(yīng)的二維碼
				this.text = item.outbound.id;
				console.log(this.text);
				this.$refs.popup.open("center")  //這里是彈框在最中央
			}
	}
</script>
<style>
	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 30px;
		height: 180px;
		width: 180px;
		background-color: #fff;
	}
</style>

4.開發(fā)中使用

彈框用到了uni-app提供的uni-popup彈框，把二維碼放到內(nèi)容那塊，替換即可

文章來源地址http://www.zghlxwxcb.cn/news/detail-695190.html

到了這里，關(guān)于二維碼生成&點擊按鈕展示二維碼的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！