前言:
因爲業務需要,再小程序上也得實現帶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
}
})
}
官網介紹文檔: