小程序使用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