zoukankan      html  css  js  c++  java
  • 小程序使用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
    
  • 相关阅读:
    02-cocoapods的安装和使用
    01-唐巧之cocoapods
    class0513(html)
    程序集
    c#面向对象
    html
    dom
    Javascript
    Jquery
    ado.net
  • 原文地址:https://www.cnblogs.com/huangguofeng/p/13735859.html
Copyright © 2011-2022 走看看