小程序使用weapp-qrcode二维码插件,宽高自适应解决方法


小程序使用的是weapp-qrcode.js

github地址

使用说明
// 将 dist 目录下,weapp.qrcode.esm.js 复制到项目目录中
import drawQrcode from '../../utils/weapp.qrcode.esm.js'

drawQrcode({
  width: 200,
  height: 200,
  canvasId: 'myQrcode',
  // ctx: wx.createCanvasContext('myQrcode'),
  text: 'https://github.com/yingye',
  // v1.0.0+版本支持在二维码上绘制图片
  image: {
    imageResource: '../../images/icon.png',
    dx: 70,
    dy: 70,
    dWidth: 60,
    dHeight: 60
  }
})

但是你在小程序里面使用会发现这个width height是px
可以使用微信的api wx.getSystemInfoSync()

wx.getSystemInfoSync()里面包含platform 表示手机的系统是android还是ios,windowWidth表示手机的使用窗口宽度单位px

所以就可以根据不同的宽度展示不同大小的二维码了

const systemInfo = wx.getSystemInfoSync()
const width = 200*systemInfo.windowWidth/375
const height = width


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM