1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > 微信小程序点击按钮弹窗生成二维码图片+长按识别

微信小程序点击按钮弹窗生成二维码图片+长按识别

时间:2024-04-04 03:38:57

相关推荐

微信小程序点击按钮弹窗生成二维码图片+长按识别

框架:uni-app

库:Painter

ui框架:uView 1.X

<u-modal class="show-close" v-model="showClose" :title="title" :confirm-style="confirmStyle" confirm-text="确认" @confirm="confirmClose"><view class="slot-content"><view class="tit">温馨提示</view><view class="con">请长按识别二维码跳转公众号或长按保存图片并通过微信扫码领取</view><view class="img"><u-image width="280rpx" height="280rpx" :src="receiveSrc" :fade="true" duration="450" show-menu-by-longpress><u-loading slot="error"></u-loading><u-loading slot="loading"></u-loading></u-image></view></view></u-modal><lPainter customStyle='position: absolute; left: -9999rpx;' :palette="base" @imgOK="onImgOK" />

u-modal 为uView弹窗,弹窗内容显示生成的二维码图片

引入Painter组件(需事先下载库到components)

import lPainter from '@/packageA/components/ape-painter/painter.vue';components: {lPainter},

draw(obj) {this.base = {width: '280rpx',height: '280rpx',background: '#fff',//画布背景色views: [{type: 'qrcode',content: obj.body,css: {width: "280rpx",height: "280rpx",top: "0px",left: "0px",rotate: "0",borderRadius: ""}}]}},

获取数据后,调用this.draw()方法,绘制canvas,这里使用的painter内置的生成二维码qrcode,

onImgOK(e){this.receiveSrc = e.detail.path},

绘制成功后,onImgOk回调中获取生成图片地址

u-image组件中绑定receiveSrc,并开启show-menu-by-longpress长按识别

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。