zoukankan      html  css  js  c++  java
  • uniapp 微信小程序 生成二维码

    使用 tki-qrcode组件 生成二维码(https://www.npmjs.com/package/tki-qrcode)

    1、引入 tki-qrcode

    下载组件后引入

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

    2、view

    <tki-qrcode v-if="ifShow" cid="qrcode" ref="qrcode"  :onval="onval" :size="size"
                                         :background="background" :iconSize="iconsize"
                                         :foreground="foreground" :pdground="pdground" :val="val" :loadMake="loadMake" />

    3、data里面的变量

              //二维码  使用变量
                    ifShow: true,
                    val: tempurl, // 要生成的二维值 可以跳转一个新界面
                    size: 400, // 二维码大小
                    unit: 'upx', // 单位
                    background: '#fff', // 背景色
                    foreground: '#000000', // 前景色
                    pdground: '#2F4F4F', // 角标色 
                    icon: '', // 二维码图标
                    iconsize: 40, // 二维码图标大小
                    lv: 3, // 二维码容错级别 , 一般不用设置,默认就行
                    onval: true, // val值变化时自动重新生成二维码    (一定要注意这个值的设置 刷新二维码使用的)
                    loadMake: true, // 组件加载完成后自动生成二维码
                    src: '', // 二维码生成后的图片地址或base64

    4、刷新二维码

    tempurl = 'nowtime=' +_self.getNowTime() ;
    _self.val=tempurl;

    5、效果(有效期、样式等自己调试):

  • 相关阅读:
    iscroll.js
    HTML 第九章总结
    HTML第八章总结
    HTML第七章总结
    HTML第六章总结
    HTML第五章总结
    HTML第四章总结
    HTML第三章总结
    HTML第二章总结
    HTML第一章总结
  • 原文地址:https://www.cnblogs.com/luo1240465012/p/14276252.html
Copyright © 2011-2022 走看看