uni-app根據鏈接生成二維碼

1. 效果圖如下 
2. 下載插件 （tki-qrcode）
3. 安裝插件

   npm i tki-qrcode

    

4. 代碼如下

<template>
	<view class="centent">
		<view class="user">
			<image class="user-img" src="../../static/login/login_logo.png"></image>
			<view class="user-title" >
				<span class="user-name">同學</span>
			</view>
		</view>
		<view class="qrcode">
				<view>
					<view class="qrimg">
						<tki-qrcode 
						ref="qrcode" 
						:val="val" 
						:size="size" 
						:unit="unit" 
						:background="background" 
						:foreground="foreground"
						:pdground="pdground" 
						:iconSize="iconsize" 
						 :lv="lv" 
						 :onval="onval" 
						 :loadMake="loadMake"
						 :showLoading="showLoading" 
						 :loadingText="loadingText" 
						 @result="qrR" />
					</view>
				</view>

		</view>
		<view class="note">掃一掃上面的二維碼圖案，添加我好友</view>
	</view>
</template>

<script>
	import tkiQrcode from "../../components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {
			tkiQrcode
		},
	

			data() {
				return {
					token: "",
					uuid: "",
					guid: "",
					ImDeviceNumber:"",
					qrCode:"",
					val: '',
					size: 500,
					background: '#ffffff',
					foreground: '#000000',
					pdground: '#000000',
					iconsize: 30,
					lv: 3,
					onval: true,
					unit: 'upx',
					loadMake: true,
					src: '',
					showLoading: true,
					loadingText: '二維碼生成中'
					
				}
			},
			onLoad() {
				uni.getStorage({
					key: 'idInfo',
					success: res => {
						var data = res.data;
						this.uuid = data.uuid;
						this.guid = data.guid;
					}
				});
				uni.getStorage({
					key: 'user',
					success: res => {
						var data = res.data;
						this.token = data.token;
					}
				});
				this.code();
				
				
				this.val=this.qrCode;
				
				
			},
			methods: {
					
			    code(){
					uni.request({
							url: 'xxx',
							method: 'POST',
							header: {
								'content-type' : "application/json",
								'Im-Token' : this.token,
								'Im-Client-Id':this.uuid,	
								'Im-Device-Number':this.uuid,	
											
								},				
							data:{
								id:this.guid,
								action: 'qrcodeContent',
								type : '2',	
								payload:{
									type:"1",
								}					
							},
							success: res =>{			
								if(res.data.code == 0 ){
									this.qrCode=res.data.payload.content;
									 console.log("44this.qrCode",this.qrCode);
									
						         }else{
									uni.showToast({title:res.data.message, icon:"none"});
								}				
						     }
						})
			},
			qrR(){
				console.log(1)
			},
			}
		}
	</script>
	
</script>

<style>
	page{
		width: 100%;
		height: 100%;
		background: #EDEDED;
	}
	.centent {
		width: 90%;
		margin: 80px auto;
		flex-direction: column;
		background: #FFFFFF;
		border-radius: 7px;
	}
	.user {
		width: 100%;
		margin: 10px auto;
		box-sizing: border-box;
		color: #000000;
		flex-direction: row;
		align-items: center;
		display: flex;
		
	}
	
	.user-img {
		width: 100upx;
		height: 100upx;
		border-radius: 10upx;
		padding: 10px 0 10px 20px;
	}
	
	.user-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}
	
	.user-name {
		height: 100upx;
		line-height: 140upx;
		font-size: 32upx;
		color: #000000;
		display: block;
	}
	.qrcode{
		width: 70%;
		margin: 0 auto;
	}
	uni-image{
		width: 100%;
		/* height: 100%; */
	}
	.note{
		width: 100%;
		margin: 0 auto;
		padding: 10px 0;
		font-size:12px;
		font-family:PingFang SC;
		font-weight:400;
		line-height:51px;
		color:rgba(144,144,144,1);
		letter-spacing:1px;
		opacity:1;
		text-align: center;
	}
	
	canvas{
	    height: 370px;
	    width: 370px;
	  }
</style>