微信小程序業務-字符串生成二維碼（weapp-qrcode）

• 前言
• 邂逅weapp-qrcode
• • 基本使用
  • 詳細參數
  • 小程序組件中使用
  • image屬性詳解
  • • 想使用網絡圖片？
• 參考地址

前言

在小程序項目中會遇到需要展示二維碼的需求，大部分情況是將網址（本質上就是字符串）轉換為二維碼，微信小程序官方沒有提供生成二維碼相關的api，所以要借助第三方庫。

邂逅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: 轉換為二維碼的字符串, })

詳細參數

小程序組件中使用

如果是在小程序組件中使用，必須得傳_this參數，否則會導致生成空白canvas

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

注意傳入的this指向一定要指向組件對象

image屬性詳解

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

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

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

想使用網絡圖片？

為什么不能直接使用網絡圖片？
實際上weapp-qrcode的image屬性是通過CanvasContext.drawImage實現的，相信細心的你可以在參數說明中發現。

而CanvasContext.drawImage是不支持直接使用網絡圖片

如何使用網絡圖片？
根據文檔中的提示，解決辦法已經很明顯了，我們可以先調用getImageInfo或者downloadFile，在成功的回調里面使用weapp-qrcode

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

• 這樣使用的缺點也很明顯，延遲了二維碼的生成時間

參考地址

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。