。找了一下午的插件,不是教程太笼统,就是各种报错,最终用的是插件ay-qrcode。
。下载地址 生成二维码。传入链接,即可使用,可快速扫出链接 - DCloud 插件市场
。教程作者写的很详细,附链接 https://ext.dcloud.net.cn/plugin?id=3870
。下载源码解压,复制/components
下的组件至项目根目录的 /components
文件夹下
<view style="margin: 40upx;">
<ayQrcode ref="qrcode" :modal="modal_qr" :url="url" @hideQrcode="hideQrcode"
:height="300" :width="300" />
</view>
import ayQrcode from "@/components/ay-qrcode/ay-qrcode.vue"
export default {
components: {
ayQrcode,
},
data() {
return {
//二维码相关参数
modal_qr: false,
url: 'https://pixabay.com/images/search/?order=ec', // 要生成的二维码值
}
},
onLoad() {
let that = this;
that.showQrcode();//一加载生成二维码
},
methods: {
// 展示二维码
showQrcode() {
let _this = this;
this.modal_qr = true;
// uni.showLoading()
setTimeout(function() {
// uni.hideLoading()
_this.$refs.qrcode.crtQrCode()
}, 50)
},
//传入组件的方法
hideQrcode() {
this.modal_qr = false;
},
}
}
。!!!url:传入需要生成二维码的链接。
。二维码不居中
评论里的解决办法是:二维码不居中,二维码在不是750像素手机上不能居中问题找到了,源码里宽高用px单位就行了。
或者自己改样式。