使用 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、效果(有效期、样式等自己调试):

uniapp 微信小程序 生成二维码的更多相关文章

  1. .NET开发微信小程序-生成二维码

    1.生成小程序二维码功能 直接请求相应的链接.传递相应的参数 以生成商铺的付款码为例: var shopsId = e.ShopsId //付款码的参数 var codeModel = new fun ...

  2. .NET开发微信小程序-生成二维码 - 转

    1.生成小程序二维码功能 直接请求相应的链接.传递相应的参数 以生成商铺的付款码为例: var shopsId = e.ShopsId //付款码的参数 var codeModel = new fun ...

  3. 微信小程序- 生成二维码

    wx.request({ // 获取token url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential', ...

  4. 关于微信小程序获取二维码的踩坑记录

    1.踩坑需求:获取小程序的二维码 2.踩坑接口: https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN3 踩坑代码 pu ...

  5. 微信小程序获取二维码(直接上代码)https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN

    应为是直接返回二进制数据所有与其他接口些许差别,希望能帮助现在的你! 谢谢!!!    /** * 37.微信二维码生成 */ public String getWeiXinCourseMap() { ...

  6. 微信小程序--扫描二维码

    场景---在微信中扫描朋友发来的二维码后进入小程序,其实那个地址是带有参数的,那么如何接收那个参数呢,其实就是进入小程序页面的onLoad生命周期行数的options参数里面.

  7. 又是新动作!微信小程序专属二维码出炉

    又到了晚上,微信又给我们带来了惊喜,并这次不是新的能力,而是把大家再熟悉不过的二维码换了新的造型. 正式揭晓:微信特制的小程序码.扫一扫新二维码 只要你的微信升级到了 6.5.7 版本,就可以扫码或者 ...

  8. 微信小程序获取二维码并把logo替换为自己的头像

    $avatarUrl = 'http://cms-bucket.nosdn.127.net/2018/05/28/a1a44ffdc2d24f928c1860d4fbf54703.jpeg?image ...

  9. 微信小程序通过二维码获取参数运行

    小程序开发过程中会遇到参数id会通过二维码获取,然后执行接口获取数据,但是难免会遇到带过来的参数出现乱码,这样就需要解码,多个参数时就需要进行处理取我们需要的字段值:小程序开发过程中会遇到参数id会通 ...

随机推荐

  1. 【转载】Linux命令-自动挂载文件/etc/fstab功能详解[转]

    博客园 首页 新随笔 联系 订阅 管理 随笔 - 322  文章 - 0  评论 - 19 Linux命令-自动挂载文件/etc/fstab功能详解[转]     一./etc/fstab文件的作用 ...

  2. Docker存储(4)

    一.docker存储资源类型 用户在使用 Docker 的过程中,势必需要查看容器内应用产生的数据,或者需要将容器内数据进行备份,甚至多个容器之间进行数据共享,这必然会涉及到容器的数据管理 (1)Da ...

  3. 028.Python面向对象继承(单继承,多继承,super,菱形继承)

    一 继承的概念 种类 单继承 多继承 至少两个类: 子类:一个类继承另外一个类,那么该类是子类(也叫作衍生类) 父类:另外一个,这个被继承的类,叫做父类(也叫作超类),object 在python中 ...

  4. 11.4 iftop:动态显示网络接口流量信息

    iftop是一款实时流量监控工具,可用于监控TCP/IP连接等,必须以root用户的身份运行. 一般最小化安装系统都是没有这个命令的,需要使用yum命令额外安装,而且还要从epel源下载.   ift ...

  5. 安装tomcat8 env

    目录 1 download package 2 install tomcat 3 Pro config 4. docker image 1 download package wget https:// ...

  6. 炫彩流光按钮 CSS + HTML

    炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值.--歌德 效果图 三个绝美的样例 HTML代码 <div class="box"> <but ...

  7. 微信小程序在ios系统不兼容new Date('yyyy-mm-dd')

    微信小程序中使用new Date('2021-04-01 10:11:20')来转换时间在苹果手机不生效 兼容写法为new Date('2021/04/01 10:11:20')

  8. Linux 文件不能被root修改与编辑原因

    近段时间公司的一台服务器被恶意添加了一些定时器任务到crond的配置文件"/var/spool/cron/root"里,本想着只要简单使用crontab -e命令把该恶意的任务去除 ...

  9. js中reduce用法详解

    介绍reduce reduce() 方法接收一个函数作为累加器,reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素,接受四个参数:初始值(上一次回调的返回值),当 ...

  10. 机器学习PAL数据可视化

    机器学习PAL数据可视化 本文以统计全表信息为例,介绍如何进行数据可视化. 前提条件 完成数据预处理,详情请参见数据预处理. 操作步骤 登录PAI控制台. 在左侧导航栏,选择模型开发和训练 >  ...