原生js或uni-app生成二维码(可修改二维码样式，带logo）

一、原生js生成二维码（用qrcode）

html部分

<div class="main">
	<div id="qrcodeHide" class="qrcode-hidden"></div>
	<div id="qrcode" class="qrcode"></div>
</div>

js部分

//qrcode.min.js的下载地址为https://github.com/1429880240/qrcodejs
<script src="./js/qrcode.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    var url = 'https://www.baidu.com';  //生成的二维码要跳转的地址
    var qrHiddenBox = document.getElementById("qrcodeHide")
    var qrbox = document.getElementById("qrcode")
    new QRCode(qrHiddenBox, url);
    //在小米或者华为手机上生成的二维码是通过canvas展示的，img标签被隐藏,所以需要特殊处理一下，将canvas标签隐藏，拿到生成的url放到img里面再展示出来
    var myCanvas = document.getElementsByTagName('canvas')[0];
    var image = new Image();
    image.src = myCanvas.toDataURL("image/png");
    qrbox.append(image);
</script>

二、uni-app生成二维码

1、直接生成二维码（缺点：无法设置图片logo）

html部分

<view class="container">
	<image :src="qr"></image>
</view>

js部分

//先引入引入wxqrcode.js，下载地址：链接: https://pan.baidu.com/s/1iEHNl-_F8kGwRDV-enMz5Q 密码: c4hm）
import Qr from "@/util/wxqrcode.js"
methods: {
	getQr(){
		this.qr = Qr.createQrCodeImg('https://www.baidu.com') //生成二维码的地址，以百度为例
	},
}

2、引入uni-app的tki-qrcode插件（可以设置图片logo）

html部分

<view class="qrimg">
    <tki-qrcode
    :val="val"
    :size="size"
    :icon="icon"
    :iconSize="iconsize"
    :onval="onval"
    :loadMake="loadMake"/>
</view>

js部分 (插件的下载地址：https://github.com/q310550690/uni-app-qrcode )

import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
export default {
    components: {tkiQrcode},
    data() {
		return {
			val: 'https://www.baidu.com',
			size: 180,
			loadMake: true,
			onval: true,
			icon: '../../static/imgs/ewm-logo.png',
			iconSize:50
		};
	},
}

属性说明

效果图