小程序+二維碼（帶logo圖片,可直接運行）

前言：

        因爲業務需要，再小程序上也得實現帶logo的二維碼效果，這裏整理帶logo二維碼和不帶logo二維碼兩種效果

效果圖：

不帶logo二維碼效果圖：

帶logo二維碼效果圖：

一. 不帶logo二維碼實現步驟：( 使用 weapp-qrcode.js )  官網入口

1.index.wxml  這裏的360rpx==180px  單位換算詳情入口

<view class="qrcode">
       <canvas style="width: 360rpx; height: 360rpx;" canvas-id="myQrcode"></canvas>
 </view>

2.index.js

weapp-qrcode.js 

鏈接：https://pan.baidu.com/s/1-oEnuPPaz8RJ8UZxdfiBKA     提取碼：tje0

import drawQrcode  from '../common/js/weapp-qrcode.js';


onLoad: function(params){
        this.setQrcode();
},

    /**
     * 生成二維碼
     * */
    setQrcode(){
        new drawQrcode('myQrcode',{
            width: 180,
            height: 180,
            text: '1111',
            colorDark: '#000000',
            colorLight: '#ffffff',
            padding: 2, // 生成二維碼四周自動留邊寬度，不傳入默認爲0
        })
    }

二. 帶logo二維碼實現步驟：( 使用 weapp.qrcode.js )  官網入口

1.index.wxml  這裏的360rpx==180px  單位換算詳情入口

<view class="qrcode">
       <canvas style="width: 360rpx; height: 360rpx;" canvas-id="myQrcode"></canvas>
 </view>

2.index.js

weapp.qrcode.js  這個文件，我是npm i weapp.qrcode -s 然後取dist的js文件

鏈接：https://pan.baidu.com/s/1U__OJ-f6uPNtKapFfH7mBg    提取碼：se2r

import drawQrcode  from '../common/js/weapp.qrcode.js';
 onLoad: function(params){
        this.setQrcode();
    },
   /**
     * 生成二維碼
     * */
    setQrcode(){
        drawQrcode({
            width: 180,
            height: 180,
            canvasId: 'myQrcode',
            text: '111',
            image: {
                imageResource: '../image/logo.svg',//注意，svg圖再真機測試會出不來，換成png的可以
                dx: 70,
                dy: 70,
                dWidth: 40,
                dHeight: 40
            }
        })


   }

官網介紹文檔：