微信小程序绘制二维码
2021/10/26 11:10:46
本文主要是介绍微信小程序绘制二维码,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
话不多说,直接上代码。
这里的宽高是二维码的宽高
<view id="container" class="qrcode"> <view class="ewm"> <canvas style="width: 400rpx; height: 400rpx;" canvas-id="myQrcode"> </canvas> </view> </view>
.ewm的宽高是背景的宽高,如果不加或和二维码的宽高一样,又可能降低识别率
.qrcode的left是控制位置,750-.ewm的宽度,再除二
.ewm { background-color: #e8e8e8; display: flex; justify-content: center; align-items: center; width: 440rpx; height: 440rpx; margin: 50rpx auto; } .qrcode { position: fixed; top: 490rpx; left: 175rpx; z-index: 2; }
// 绘制Qrcode ewmChange(id) { let size = {} size.w = wx.getSystemInfoSync().windowWidth / 750 * 400 size.h = size.w drawQrcode({ width: size.w, height: size.h, canvasId: 'myQrcode', text: id, }) },
把想转化为二维码的字符串通过id传给这个方法就可以在视图绘制出你想要的二维码啦!
快去试试吧
这篇关于微信小程序绘制二维码的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-07-06微信小程序 将base64 图片格式转换为本地文件-icode9专业技术文章分享
- 2024-07-03微信小程序分享跳转-icode9专业技术文章分享
- 2024-07-03小程序微信支付提示缺少total_fee-icode9专业技术文章分享
- 2024-07-03微信小程序携带参数分享 前后端交互流程-icode9专业技术文章分享
- 2024-07-02微信小程序中禁止左右滑动切换页面-icode9专业技术文章分享
- 2024-06-30实现小程序内部扫码签到和微信扫一扫签到-icode9专业技术文章分享
- 2024-06-30微信内调用扫码扫描小程序码如何解析链接-icode9专业技术文章分享
- 2024-06-30小程序码链接加密了如何解-icode9专业技术文章分享
- 2024-05-302024年最新版云开发cms开通步骤,开始开发微信小程序前的准备工作,认真看完奥!
- 2024-03-30微信小程序的网络设置,及网络请求:wx.request(OBJECT)