微信小程序绘制二维码

2021-10-26 10:00:52 阅读：150 来源： 互联网

话不多说，直接上代码。

这里的宽高是二维码的宽高

<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传给这个方法就可以在视图绘制出你想要的二维码啦！

快去试试吧

标签：ewm,微信,height,二维码,绘制,id,size
来源： https://blog.csdn.net/Liu_JiaqiPro/article/details/120965957

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

微信小程序绘制二维码