<template> <view class="codes"> <view class="canvasbox"> <canvas style="width: 200px;height: 200px;" canvas-id="myQrcode"></canvas> </view> <view class="text"> 请将二维码对准设备摄像头 </view> </view> </template> <script> import drawQrcode from 'weapp-qrcode' export default { data() { return { qrcode: null } }, onLoad() { this.creatQrCode() // 开启分享 uni.showShareMenu({ withShareTicket: true, menus: ['shareAppMessage', 'shareTimeline'] }) }, methods: { creatQrCode() { let userData = this.$store.state.vuex_userData console.log(userData) drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', text: `userId=${userData.customNo}&type=user` }) } } } </script> <style> .codes{ width: 100%; padding: 50rpx; } .canvasbox{ box-shadow: 3upx 3upx 6upx #eee; background: #FFFFFF; height: 230px; width: 230px; display: flex; justify-content: center; align-items: center; margin: 50rpx auto; } .text{ text-align: center; padding: 20rpx; color: #999999; } </style>