Vueuniapp前端生成二维码

今天来谈一下前端如何生成二维码。

对于APP应用而言，市场推广是必不可少而且是最为烧钱的阶段，那么，为满足市场推广的需求，仅仅是微信，QQ，朋友圈等连接分享的方式是不够的，当然还得包括面对面分享，那么市场人员的二维码就显得必不可少了。那又如何动态生成二维码呢，本来打算是让后端生成返回前端进行展示的，但是后端人员却完成不了，没办法只有自己去琢磨了。

对于前端生成二维码的js插件还是比较多的，刚开始找的就只是纯web端原生的js插件，但是并不符合我的项目需求，因为用的uni-app框架，不经过封装是用不了的，最终找到自己比较满意的经封装的js。

首先下载你需要下载weapp-qrcode.js（百度网盘下载链接：链接：https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q
提取码：vj2y）

然后就直接给大家上代码吧，这是我直接封装的本地组件：

然后在页面里进行引用即可：

组件引用

// 展示二维码
showQrcode(){
let _this=this;
this.modal=true;
// uni.showLoading()
setTimeout(function(){
// uni.hideLoading()
_this.$refs.qrcode.couponQrCode()
},50)
},

//传入组件的方法
hideQrcode(){
this.modal=false;
}

**********

这里一定要注意：

 setTimeout(function(){
// uni.hideLoading()
_this.$refs.qrcode.couponQrCode()
},50)

因为刚开始元素：display：none,此时，调用二维码生成方法，是生成不了的，所以得用setTimeout延后执行，这样显隐切换才会正常。