uniapp，vue3，生成二维码，多端兼容

如题，最近项目里需要引进生成二维码功能在此记录。

1，APP只测试了安卓，IOS大概率没问题。

2，H5没问题，小程序没测大概率没问题。

以最少代码完成需要的功能所有这次代码很少，使用npm包 qrocde的npm地址

只是web端可以直接用toDataURL这个方法，返回的base64直接放到图片src就行。

多端有两种方式，可以按照喜好自己选择，第二种比第一种兼容好。

一，下载qrcode

npm install -s qrcode

二，引入并封装方法 这个是连带svg标签返回所以只需要在用的地方v-html 

toDataUrl 只能在浏览器中使用，APP不显示所以要用 toString

// 生成二维码
import qrCode from "qrcode"
export const qrCodeImage = (str) => {
	return new Promise((res, rej) => {
		// toDataURL
		qrCode.toString(String(str), {
           type: 'svg',
          errorCorrectionLevel: "H",
            margin:0,
    }, (err, string) => {
			console.log(string)
			let imageUrl = string
			res(imageUrl)
		})
	})

}

三，setup语法糖中引入

import {
		qrCodeImage
	} from "@/utils"
const imageStr = ref("")
	onShow(async _ => {
		imageStr.value = await qrCodeImage("执行")
	})

 四，在标签中v-html

<view v-html="imageStr" style="position: fixed;z-index: 999;height: 300rpx;width: 300rpx;">

		</view>

第二种稍微修改下， 需要第二个npm包

将svg转为base64返回的数据可以直接放进图片标签的src里，应该是兼容最好的一个方式了。

一，下载base-64 用来转换svg

npm install -s base-64

二，引入base-64并修改原来的方法

// 生成二维码
import qrCode from "qrcode"
import Base64 from 'base-64';
export const qrCodeImage = (str) => {
	return new Promise((res, rej) => {
		// toDataURL
		qrCode.toString(String(str), {
			type: 'svg',
			errorCorrectionLevel: "H",
            margin:0,
		}, (err, str) => {
			const base64 = Base64.encode(str)
			let imageUrl = `data:image/svg+xml;base64,${base64}`;
			console.log(imageUrl)
			res(imageUrl)
		})
	})

}

三，setup引用

import { qrCodeImage } from "../../utils/order-pay"
	const imageStr = ref("")
	onShow( async _ => {
		imageStr.value = await qrCodeImage("二维码数据")
	})

四，标签引用

<image style="position: fixed;z-index: 999;background-color: pink;" :src="imageStr" mode=""></image>