首页 > 其他分享 >uniapp/vue 生成二维码

uniapp/vue 生成二维码

时间:2023-03-14 09:57:55浏览次数:45  
标签:uniapp vue weapp 生成 qrcode 二维码 qrCode js

 

1、在页面中引入js文件

const qrCode = require('@/assets/js/weapp-qrcode.js')

 

2、在页面中增加

<canvas  class="canvas" canvas-id="couponQrcode"></canvas>

 

3、生成二维码

      // 二维码生成工具
            couponQrCode() {
                let _this = this;
                new qrCode('couponQrcode', {
                    text: `这里是二维码的跳转的URL可以加参数的`,
                    width: 100,
                    height: 100,
                    colorDark: "#2B84FE",
                    colorLight: "#EDF4FD",
                    correctLevel: qrCode.CorrectLevel.H
                }).exportImage(res => {
                    //回调的是二维码生成的图片
                })
            },

附:(js文件的内容地址)  https://blog-static.cnblogs.com/files/-Fly/weapp-qrcode.js

 

标签:uniapp,vue,weapp,生成,qrcode,二维码,qrCode,js
From: https://www.cnblogs.com/-Fly/p/17213840.html

相关文章

  • Vue封装的过度与动画
    1、作用:在插入、更新或移除DOM元素时,在合适的时候给元素添加样式类名。2、图示  3、写法:(1)准备好样式:元素进入的样式:v-enter:进入的起点v-enter-active:......
  • #yyds干货盘点#简单的vuex实现
    实现一个vuex插件​​pvuex​​ 初始化:Store声明、install实现,vuex.js:letVue;//定义install方法完成赋值与注册functioninstall(_Vue){Vue=_Vue;Vue.mixin({......
  • #yyds干货盘点#Vuex中的store
    每一个​​Vuex​​应用的核心就是store(仓库)。store基本上就是一个容器,包含着应用中大部分的state(状态)。​​Vuex​​和单纯的全局对象有以下两点不同:​​Vuex​​ 的状态......
  • 【django-vue】七牛云上传视频 搜索接口 支付宝sdk二次封装 下单接口 前端支付页
    目录上节回顾课程详情接口choice字段今日内容1文件存储1.1七牛云上传文件2搜索导航栏2.1Header.vue3搜索接口4搜索页面5支付宝支付介绍5.1支付测试,生成支付链接6......
  • 滴滴前端高频vue面试题(边面边更)
    Vue-router路由模式有几种vue-router有3种路由模式:hash、history、abstract,对应的源码如下所示switch(mode){case'history':this.history=newHTML5H......
  • new Vue的时候到底做了什么
    Vue加载流程1.初始化的第一阶段是Vue实例也就是vm对象创建前后:首先Vue进行生命周期,事件初始化发生在beforeCreate生命周期函数前,然后进行数据监测和数据代理的初始化,也就......
  • vue模板跨域问题
        在接口中有baseURL就不会拼axios中默认的baseURL ......
  • 20230313-VUE-VUE新建项目报错Error: The package.json file at 'C:\Users\Administ
    缺少package.json文件npminit-y初始化一个文件 ......
  • vue 处理后端返回的文档流
    xiazai(){this.$_api.kanbanApi.Get({responseType:'blob',url:'KanbanItemData/exportExcel'//`${this.selectComponents.config.da......
  • vue常见的优化手段
    前提:永远不要过早地优化,仅在影响运行、卡的不行的时候才优化[参考]代价:代码会变得难以阅读,开发难度增大使用key对于通过循环生成的列表,应给每个列表项一个稳定且唯一......