Vue uni-app前端生成二维码
<p>今天来谈一下前端如何生成二维码。</p><p>对于APP应用而言，市场推广是必不可少而且是最为烧钱的阶段，那么，为满足市场推广的需求，仅仅是微信，QQ，朋友圈等连接分享的方式是不够的，当然还得包括面对面分享，那么市场人员的二维码就显得必不可少了。那又如何动态生成二维码呢，本来打算是让后端生成返回前端进行展示的，但是后端人员却完成不了，没办法只有自己去琢磨了。</p>
<p>对于前端生成二维码的js插件还是比较多的，刚开始找的就只是纯web端原生的js插件，但是并不符合我的项目需求，因为用的uni-app框架，不经过封装是用不了的，最终找到自己比较满意的经封装的js。</p>
<p>首先下载你需要下载weapp-qrcode.js（百度网盘下载链接：链接：https://pan.baidu.com/s/1VXhq3ZjxmDcH1tFujKg75Q<br>提取码：vj2y）</p>
<p>然后就直接给大家上代码吧，这是我直接封装的本地组件：</p>
<p><template><br> <view class=""><br> <view class="qrcode-box" :class="modal?'show':'hide'" @tap="hideQrcode"><br> <view class="qrcode-item"><br> <view class="item-box"><br> <view class="title">推广码</view><br> <canvas class="canvas" style="width: 550rpx;height: 550rpx;" canvas-id="couponQrcode"></canvas><br> </view><br> </view> <br> </view><br> </view><br></template></p>
<p><script><br> const qrCode = require('@/common/weapp-qrcode.js')<br> export default {<br> data() {<br> return {<br> show:true<br> }<br> },<br> props:{<br> modal:{<br> type:Boolean,<br> default:false<br> },<br> url:{<br> type:String,<br> default:''<br> }<br> },<br> methods: {<br> // 展示二维码<br> // showQrcode(){<br> // this.modal=true;<br> // let ID=uni.getStorageSync('userInfo').id;<br> // let url="https://www.ttlwl.cn/appDownload.html?shareUserId="+ID;<br> // this.couponQrCode(url);<br> // },<br> hideQrcode(){<br> // this.modal=false;<br> this.$emit("hideQrcode")<br> },<br> // 二维码生成工具<br> couponQrCode() {<br> let _this=this;<br> new qrCode('couponQrcode', {<br> text: this.url,<br> width: 260,<br> height: 260,<br> colorDark: "#333333",<br> colorLight: "#FFFFFF",<br> correctLevel: qrCode.CorrectLevel.H<br> })<br> }<br> },<br> mounted() {<br> }<br></script></p>
<p><style scoped lang="scss"><br> <br> .qrcode-box{<br> position: fixed;<br> left: 0;<br> top: 0;<br> right: 0;<br> bottom: 0;<br> height: 100vh;<br> width: 100vw;<br> background-color: rgba(59,59,59,0.6);<br> // opacity: 0.8;<br> text-align: center;<br> display: flex;<br> align-items: center;<br> display: none;<br> .qrcode-item{<br> flex: 1;<br> position: relative;<br> text-align: center;<br> .item-box{<br> width: 90%;<br> margin: auto;<br> display: inline-block;<br> margin-top: 30%;<br> padding-bottom: 30rpx;<br> // animation: show 0.7s;<br> .title{<br> font-size: 46rpx;<br> text-align: center;<br> margin-bottom: 24rpx;<br> }<br> .canvas{<br> margin: auto;<br> display: inline-block;<br> margin: auto;<br> }<br> background-color: #FFFFFF;<br> }<br> <br> }<br> }<br> .opacity{<br> opacity: 0;<br> display: block;<br> }<br> <br> .show{<br> display: block;<br> animation: fade 0.7s;<br> // -moz-animation: fade 0.5s; /* Firefox */<br> // -webkit-animation: fade 0.5s; /* Safari 和 Chrome */<br> // -o-animation: fade 0.5s;<br> }<br> .hide{<br> animation: hide 0.7s;<br> }<br> @keyframes fade<br> {<br> from {<br> opacity: 0.8;<br> }<br> to {<br> opacity: 1;<br> }<br> }<br> @keyframes hide<br> {<br> from {opacity: 1;}<br> to {opacity: 0;}<br> }<br> <br></style></p>
<p> </p>
<p>然后在页面里进行引用即可：</p>
<p>组件引用</p>
<p><qrcode ref="qrcode" :modal="modal" :url="url" @hideQrcode="hideQrcode"></qrcode></p>
<p> </p>
<p> </p>
<p>// 展示二维码<br> showQrcode(){<br> let _this=this;<br> this.modal=true;<br> // uni.showLoading()<br> setTimeout(function(){<br> // uni.hideLoading()<br> _this.$refs.qrcode.couponQrCode()<br> },50)<br> },</p>
<p>//传入组件的方法<br> hideQrcode(){<br> this.modal=false;<br> }</p>
<p> </p>
<p>**********</p>
<p>这里一定要<span style="background-color: rgba(255, 0, 0, 1)"><strong>注意</strong></span>：</p>
<p> setTimeout(function(){<br>// uni.hideLoading()<br>_this.$refs.qrcode.couponQrCode()<br>},50)</p>
<p>因为刚开始元素：display：none,此时，调用二维码生成方法，是生成不了的，所以得用setTimeout延后执行，这样显隐切换才会正常。</p><br><br>
来源：https://www.cnblogs.com/chenjianbao/p/13594687.html
頁:
[1]