Home

Awesome

uni-app 二维码生成器

作者:诗小柒

  1. H5、微信小程序、支付宝小程序、APP,其它平台的小程序没有测试
  2. 使用canvas生成
  3. 可设置二维码背景色,前景色,角标色
  4. 可设置二维码logo

重要的事情说3遍 重要的事情说3遍 重要的事情说3遍

  1. IOS、Android真机都可以正常生成二维码
  2. 使用的时候出现无法生成二维码或空白的请先github直接打包下载,问题依旧,请github上直接提出问题并配图
  3. 有问题请说明问题原因,这样我才好定位,否则我也无法解决
  4. 如果此插件有帮助到你请打5分或赞赏我,你的支持是我更新的动力

开始使用

NPM

npm i tki-qrcode

GIT

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

更新说明

使用方法

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>

属性

属性名类型默认值可选值说明
cidStringtki-qrcode-canvascanvasId,页面存在多个二维码组件时需设置不同的ID
sizeNumber200生成的二维码大小
unitStringupxpx大小单位尺寸
showBooleantrue默认使用组件中的image标签显示二维码
valString二维码要生成的内容
backgroundString#000000二维码背景色
foregroundString#ffffff二维码前景色
pdgroundString#ffffff二维码角标色
iconString二维码图标URL(必须是本地图片,网络图需要先下载至本地)
iconSizeNumber40<br/>注意此大小不会跟随二维码size 动态变化,设置时需注意大小,不要太大,以免无法识别二维码图标大小
lvNumber3(一般不用设置)容错级别
onvalBooleanfalse监听val值变化自动重新生成二维码
loadMakeBooleanfalse组件初始化完成后自动生成二维码,val需要有值
usingComponentsBooleantruefalse是否使用了自定义组件模式(主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题)
showLoadingBooleantruefalse是否显示loading
loadingTextString二维码生成中loading文字

方法

方法名参数默认值说明
_makeCode()生成二维码
_clearCode()清空二维码(清空二维码会触发result回调 返回值为空)
_saveCode()保存二维码到图库

事件

事件名返回值说明
result生成的图片base64或图片临时地址返回二维码路径 注:_clearCode()后返回空

感谢

uni-app qrcode