微信小程序業(yè)務(wù)-字符串生成二維碼（weapp-qrcode）

• 前言
• 邂逅weapp-qrcode
• • 基本使用
  • 詳細(xì)參數(shù)
  • 小程序組件中使用
  • image屬性詳解
  • • 想使用網(wǎng)絡(luò)圖片？
• 參考地址

前言

在小程序項(xiàng)目中會(huì)遇到需要展示二維碼的需求，大部分情況是將網(wǎng)址（本質(zhì)上就是字符串）轉(zhuǎn)換為二維碼，微信小程序官方?jīng)]有提供生成二維碼相關(guān)的api，所以要借助第三方庫(kù)。

邂逅weapp-qrcode

weapp.qrcode.js 在 微信小程序 中，快速生成二維碼

基本使用

.wxml

<canvas class="icon-qrcode" style="width: 180px; height: 180px" canvas-id="myQrcode" />

.js

import drawQrcode from "../../../../utils/weapp-qrcode";drawQrcode({width: 180,height: 180,canvasId: 'myQrcode',text: 轉(zhuǎn)換為二維碼的字符串, })

詳細(xì)參數(shù)

小程序組件中使用

如果是在小程序組件中使用，必須得傳_this參數(shù)，否則會(huì)導(dǎo)致生成空白canvas

drawQrcode({width: 180,height: 180,canvasId: 'myQrcode',text: 轉(zhuǎn)換為二維碼的字符串,_this: this, })

注意傳入的this指向一定要指向組件對(duì)象

image屬性詳解

image屬性的作用是在二維碼中間生成一張小圖，如下圖所示

drawQrcode({width: 180,height: 180,canvasId: 'myQrcode',text: 轉(zhuǎn)換為二維碼的字符串,_this: this,image: {imageResource: '/images/userIcon.png',dx: 60,dy: 60,dWidth: 60,dHeight: 60,} })

• imageResource表示圖片路徑，僅支持小程序本地路徑，網(wǎng)絡(luò)圖片即使配置域名也無(wú)法生效
• dx：x軸便宜量，dy：y軸便宜量，dWidth/dHeight：圖片寬高，
• 其中的圖片居中位置需要自己計(jì)算，通過(guò)（dx = （canvas大小 - dWidth）/ 2）得到x軸偏移量，y軸同理

想使用網(wǎng)絡(luò)圖片？

為什么不能直接使用網(wǎng)絡(luò)圖片？
實(shí)際上weapp-qrcode的image屬性是通過(guò)CanvasContext.drawImage實(shí)現(xiàn)的，相信細(xì)心的你可以在參數(shù)說(shuō)明中發(fā)現(xiàn)。

而CanvasContext.drawImage是不支持直接使用網(wǎng)絡(luò)圖片

如何使用網(wǎng)絡(luò)圖片？
根據(jù)文檔中的提示，解決辦法已經(jīng)很明顯了，我們可以先調(diào)用getImageInfo或者downloadFile，在成功的回調(diào)里面使用weapp-qrcode

wx.downloadFile({url: 網(wǎng)絡(luò)圖片路徑,success: (res) => {console.log(res)drawQrcode({width: 180,height: 180,canvasId: 'myQrcode',text: 轉(zhuǎn)換為二維碼的字符串,_this: this,image: {imageResource: res.tempFilePath,dx: 60,dy: 60,dWidth: 60,dHeight: 60,}})} })

• 這樣使用的缺點(diǎn)也很明顯，延遲了二維碼的生成時(shí)間

參考地址

https://www.npmjs.com/package/weapp-qrcode
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的微信小程序业务-字符串生成二维码（weapp-qrcode）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。