uniapp中H5网页和打包app分别生成二维码

一、h5网页中生成二维码业务

引入“qrcodejs2.js"：npm install qrcodejs2；

<template>
	<view>
		<view id="guestQrcode" style="text-align: center;"></view>
	</view>
</template>
<script>
	import QRCode from "qrcodejs2";
	export default {
		data() {
			return {
			}
		},
		mounted() {
			let proportionUpdate = document.getElementById('guestQrcode');
			if (proportionUpdate) {
				proportionUpdate.innerHTML = ""
			}
			// document.getElementById('guestQrcode').innerHTML="";
			this.$nextTick(() => {
				setTimeout(() => {
					var qrcode = new QRCode(document.getElementById("guestQrcode"), {
						width: 223,
						height: 223
					});
					qrcode.clear(); // 清除代码
					qrcode.makeCode("要生成二维码的数据"); // 生成另外一个二维码
				}, 500)
			})
		},
		methods: {}
	}
</script>
<style lang="scss" scoped>
</style>

二、app中生成二维码业务

对于uniapp开发，可以去DCloud插件市场找各种各样的插件，在这里分享一款制作二维码的插件二维码生成器

首先使用HBuildreX导入插件，导入成功之后，项目目录下面将会多出一个ay-qrcode组件，然后在对应需要用到的界面使用即可。

<template>
	<view>
		<ayQrcode ref="qrcode" :modal="modal_qr"  @hideQrcode="hideQrcode"  :url="url" :height="150" :width="150"/>
	</view>
</template>

<script>
	import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
	export default {
		components: {
			ayQrcode
		},
		data() {
			return {
				modal_qr :false,
				url: '' // 要生成的二维码值
			}
		},
		onLoad() {
			//一加载生成二维码
			this.showQrcode() 
		},
		methods: {
			showQrcode(){
				this.modal_qr = true;
				this.url = "要生成二维码的数据"
				setTimeout(function() {
					_this.$refs.qrcode.crtQrCode()
				}, 50)
			},
			hideQrcode(){
				this.modal_qr = false;
			}
		}
	}
</script>

<style scoped lang="scss">
</style>