小程序使用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
posted @ 2020-09-15 16:06  CV攻城狮  Views(1635)  Comments(0Edit  收藏  举报