https://github.com/q310550690/uni-app-qrcode

uni-app 二維碼生成器

作者：詩(shī)小柒

H5、微信小程序、支付寶小程序、APP，其它平臺(tái)的小程序沒(méi)有測(cè)試

使用canvas生成

可設(shè)置二維碼背景色，前景色，角標(biāo)色

可設(shè)置二維碼logo

重要的事情說(shuō)3遍 重要的事情說(shuō)3遍 重要的事情說(shuō)3遍

IOS、Android真機(jī)都可以正常生成二維碼

使用的時(shí)候出現(xiàn)無(wú)法生成二維碼或空白的請(qǐng)先github直接打包下載，問(wèn)題依舊，請(qǐng)github上直接提出問(wèn)題并配圖

有問(wèn)題請(qǐng)說(shuō)明問(wèn)題原因，這樣我才好定位，否則我也無(wú)法解決

如果此插件有幫助到你請(qǐng)打5分或贊賞我，你的支持是我更新的動(dòng)力

• 圖片1 是微信小程序真機(jī)實(shí)測(cè)
• 圖片2 是微信小程序模擬實(shí)測(cè)
• 圖片3 是支付寶小程序模擬器實(shí)測(cè)
• 圖片4 是安卓真機(jī)實(shí)測(cè)
• 圖片5 H5

開(kāi)始使用

NPM

npm i tki-qrcode

GIT

git clone https://github.com/q310550690/uni-app-qrcode

更新說(shuō)明

• 0.1.7 修復(fù)支付寶無(wú)法生成的問(wèn)題（導(dǎo)致這個(gè)問(wèn)題是uni-app官方的template編譯器沒(méi)有編譯出支付寶識(shí)別的canvas組件）
• 0.1.6 新增cid屬性，支持同一個(gè)頁(yè)面使用多個(gè)二維碼組件
• 0.1.5 新增showLoading、loadingText屬性
• 0.1.4 新增usingComponents屬性，修復(fù)非自定義組件下 v-if 無(wú)法生成二維碼的問(wèn)題（非自定義組件下設(shè)置為false）
• 0.1.3 新增unit屬性
• 0.1.2 適配新版uni-app編譯器 感謝 "DCloud_UNI_Trust" (如果github上下載后使用新版HbuilderX1.7.1.20190320編譯后無(wú)法啟動(dòng)請(qǐng)等待Dcloud更新即可)
• 0.1.1 新增監(jiān)聽(tīng)val值變化時(shí)自動(dòng)生成二維碼(onval)、新增組件初始化時(shí)自動(dòng)生成二維碼(loadMake) 屬性，具體說(shuō)明看文檔說(shuō)明
• 0.1.0 常規(guī)更新
• 0.0.9 修復(fù)小程序真機(jī)生成二維碼錯(cuò)亂問(wèn)題（其實(shí)這是小程序canvas的鍋）
• 0.0.8 修復(fù)官方 uni.canvasToTempFilePath 在有些平臺(tái)返回字段不統(tǒng)一而導(dǎo)致的支付寶無(wú)法生成二維碼的問(wèn)題。
• 0.0.7 常規(guī)修復(fù)
• 0.0.6 新增角標(biāo)色、二維碼logo

使用方法

在?script?中引入組件

import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

export default {

??? components: {tkiQrcode}

}

在?template?中使用

<view class="qrimg">

??? <tki-qrcode

??? ref="qrcode"

??? :cid="cid"

??? :val="val"

??? :size="size"

??? :unit="unit"

??? :background="background"

??? :foreground="foreground"

??? :pdground="pdground"

??? :icon="icon"

??? :iconSize="iconsize"

??? :lv="lv"

??? :onval="onval"

??? :loadMake="loadMake"

??? :usingComponents="usingComponents"

??? :showLoading="showLoading"

??? :loadingText="loadingText"

??? @result="qrR" />

</view>

屬性

屬性名	類(lèi)型	默認(rèn)值	可選值	說(shuō)明
cid	String	tki-qrcode-canvas	?	canvasId，頁(yè)面存在多個(gè)二維碼組件時(shí)需設(shè)置不同的ID
size	Number	200	?	生成的二維碼大小
unit	String	upx	px	大小單位尺寸
show	Boolean	true	?	默認(rèn)使用組件中的image標(biāo)簽顯示二維碼
val	String	二維碼	?	要生成的內(nèi)容
background	String	#000000	?	二維碼背景色
foreground	String	#ffffff	?	二維碼前景色
pdground	String	#ffffff	?	二維碼角標(biāo)色
icon	String	?	?	二維碼圖標(biāo)URL（必須是本地圖片，網(wǎng)絡(luò)圖需要先下載至本地）
iconSize	Number	40 注意此大小不會(huì)跟隨二維碼size 動(dòng)態(tài)變化，設(shè)置時(shí)需注意大小，不要太大，以免無(wú)法識(shí)別	?	二維碼圖標(biāo)大小
lv	Number	3（一般不用設(shè)置）	?	容錯(cuò)級(jí)別
onval	Boolean	false	?	監(jiān)聽(tīng)val值變化自動(dòng)重新生成二維碼
loadMake	Boolean	false	?	組件初始化完成后自動(dòng)生成二維碼，val需要有值
usingComponents	Boolean	true	false	是否使用了自定義組件模式（主要是為了修復(fù)非自定義組件模式時(shí) v-if 無(wú)法生成二維碼的問(wèn)題）
showLoading	Boolean	true	false	是否顯示loading
loadingText	String	二維碼生成中	?	loading文字

方法

方法名	參數(shù)	默認(rèn)值	說(shuō)明
_makeCode()	?	?	生成二維碼
_clearCode()	?	?	清空二維碼（清空二維碼會(huì)觸發(fā)result回調(diào) 返回值為空）
_saveCode()	?	?	保存二維碼到圖庫(kù)

事件

事件名	返回值	說(shuō)明
result	生成的圖片base64或圖片臨時(shí)地址	返回二維碼路徑 注：_clearCode()后返回空

感謝

uni-app?qrcode

?

總結(jié)

以上是生活随笔為你收集整理的uni-app 二维码生成器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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