如何在微信小程序中生成二维码:一个最简单的案例就让你明白

2023-11-04

使用weapp.qrcode.js 在 微信小程序 中,快速生成二维码

一、效果


二、具体步骤、代码

 

 


下载weapp-qrcode代码
然后 将 dist 目录下的weapp.qrcode.esm.js 复制到项目目录中(这里是utils目录下)

1、小程序wxml文件
创建 canvas,并定义好 width, height, canvasId

<view class="">
	<canvas style="width: 200px; height: 200px;margin:0 auto" canvas-id="myQrcode"></canvas>
</view>


2、小程序js代码
非常简单的案例,onLoad函数直接生成二维码


// 将 dist 目录下,weapp.qrcode.esm.js 复制到项目utils目录下
// 直接引入 js 文件
import drawQrcode from 'weapp-qrcode';

Page({
  data: {
    qrcodeWidth: 0
  },
  onLoad: function () {
    drawQrcode({
      width: 200, // 必须,二维码宽度,与canvas的width保持一致
      height: 200, // 必须,二维码高度,与canvas的height保持一致
      canvasId: 'myQrcode',
      background:'#ffffff', //	非必须,二维码背景颜色,默认值白色
      foreground: '#2bb15e', // 非必须,二维码前景色,默认值黑色 	'#000000'
      // ctx: wx.createCanvasContext('myQrcode'), // 非必须,绘图上下文,可通过 wx.createCanvasContext('canvasId') 获取,v1.0.0+版本支持
      text: 'https://blog.csdn.net/chushiyan',  // 必须,二维码内容
      // v1.0.0+版本支持在二维码上绘制图片

      image: {
        // imageResource: '../../images/icon.png', // 指定二维码小图标
        dx: 70,
        dy: 70,
        dWidth: 60,
        dHeight: 60
      }
    })
  },

 
})



运行,效果就如前面的截图。
 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在微信小程序中生成二维码:一个最简单的案例就让你明白 的相关文章

随机推荐

  • 机器学习 | Sklearn中的朴素贝叶斯全解

    前期文章介绍了朴素贝叶斯理论 掌握理论后如何去使用它 是数据挖掘工作者需要掌握的实操技能 下面来看看Sklearn中都有哪些朴素贝叶斯 朴素贝叶斯是运用训练数据学习联合概率分布 及
  • uniapp微信小程序实现对H5的全屏适配(@莫成尘)

    复制代码您将看到和一下截图一样的效果 我们将适配全屏至正常h5下的所以页面大小 您再此处将依然使用rpx作为开发单位
  • Linux网络编程 - 基于TCP的服务器端/客户端(1)

    一 理解 TCP 和 UDP 根据数据传输方式的不同 基于网络传输协议的套接字一般分为TCP套接字和UDP套接字 因为TCP是面向连接的 因此又称为基于流 stream 的套接字 TCP Transmission Control Proto
  • Android recyclerView只显示一条数据

    recyclerView的数据集合里明明很多条数据 为什么只显示了一条数据 代码里一顿debug过后 还去翻onBindViewHolder的注释文档 你是不是还是死活找不到原因 骚年 该扇自己耳光了 把item的高度设置成了match p
  • linux环境变量和软件安装路径 小结

    linux环境变量和软件安装路径 小结 目录 linux环境变量和软件安装路径 小结 1 背景 2 Linux环境变量设置 1 对所有用户永久生效 2 对单一用户永久生效 3 当前shell BASH 临时有效 4 查看环境变量 expor
  • sort函数自定义排序

    sort函数自定义排序 咳咳 自定义排序说实话用的地方还是很多的 像ACM里面 天梯赛里面 特别是天梯 必出这玩意 咳咳 水点字数 咱继续 首先哈 我们来看一下c 自带的排序 可以看出哈 默认是按升序排序的 sort不但可以对整型进行排序还
  • VTK交互器

    VTK交互器定义了用户了与VtkWidget界面的交互方式 结构图如下 交互器类名 功能 vtkInteractorStyle 一个实现大部分动作的基类 对交互只有接口 没有实际功能 vtkInteractorStyle3D 允许用户交互
  • 阿里云ECS服务器Linux第一次登录 提示Login Incorrect的解决方法

    问题情景 1 第一次购买ECS服务器 2 没有设置过系统root账户的Login密码 不是连接远程时提示需要输入的那个6位纯数字密码哈 3 在阿里云控制台中启动 远程连接 4 输入6位纯数字密码 首次连接会提示密码 后面不再提示 需要记下来
  • 小白就懂的IDEA中将本地的Jar包导入到Springboot(含若依)中

    在项目开发的过程中 难免会遇到在Springboot中无法通过pom中添加依赖使用maven下载需要的jar包 而本地PC端中我们拥有jar包 这时候该如何办呢 下面所采用的方法既不添加lib文件 就能搞定 1 打开IDEA开发软件 2 然
  • 『贪吃蛇』AI 算法简易实现(中秋特别版)

    前言 一年一度的中秋节就快到了 平台也有各种各样的中秋发文活动 正在翻阅时偶然间我看到了这篇文章 兔饼大作战 吃月饼 见月亮 还能咬自己 欢庆中秋特制版 掘金 juejin cn 大家肯定比较熟悉了 这个游戏的内核就是贪吃蛇 作者也是对玩法
  • G1理论基础与最佳实践

    文章目录 1 G1理论基础 1 1 G1介绍 1 2 YongGC 1 3 mixed gc 1 4 扩展 1 4 1 记忆集和卡表 1 4 2 STAB和TAMS 1 5 G1相比CMS的优势 2 G1日志解读与经验分享 2 1 日志解读
  • Win10专业版系统Docker安装、配置和使用详细教程

    一 win10专业版系统首先需要开启硬件虚拟化及Hyper V功能 才能进行Docker for Windows软件安装 如何开启硬件虚拟化 自行百度 可在任务栏中查看虚拟化是否开启 win10系统 打开控制面板 应用 程序和功能 开启Hy
  • postman——集合——执行集合——迭代运行集合

    网址 https learning getpostman com docs postman collection runs starting a collection run 开始收集运行 集合是一组请求 可以在对应的环境下作为一系列请求一
  • 前后端接口规范

    原文地址 https github com f2e journey treasure blob master api md 前后端接口规范 随着前后端分离越来越普遍 后端接口规范也就越来越重要了 一套良好的接口规范可以提升工作效率 减少沟通
  • Java-线程同步

    Java 线程同步 在Java中 我们通过同步机制 来解决线程的安全问题 实现线程安全的三种方法 1 同步代码块 synchronized 同步监视器 需要被同步的代码 说明 操作共享数据的代码 即为需要被同步的代码 gt 不能包含代码多了
  • 基于Python+Django的项目实战-信息安全领域中语义搜索引擎的设计与实现(附源码+论文)

    大家好 我是职场程序猿 感谢您阅读本文 欢迎一键三连哦 当前专栏 基于Python的毕业设计 精彩专栏推荐 微信小程序毕业设计 安卓app毕业设计 Java毕业设计 信息安全领域中语义搜索引擎的设计 django 演示 源码及论文下载地址
  • 前端复习HTML+CSS+JavaScript(必问面试题)

    前端复习 HTML 常见的几种图片格式以及他们之间的区别是什么 JPG 支持有损压缩 不支持透明 不支持动画 色彩还原度较好 PNG 不支持压缩 支持透明 半透明 不透明 不支持动画 GIF 支持有损压缩 不支持全透明 支持半透明 支持动画
  • Java 接入微信支付API V3 接口开发案例

    关于API v3 为了在保证支付安全的前提下 带给商户简单 一致且易用的开发体验 我们推出了全新的微信支付API v3 相较于之前的微信支付API 主要区别是 遵循统一的REST的设计风格 使用JSON作为数据交互的格式 不再使用XML 使
  • C02_02 Python笔记备份 变量

    author Liu Shao Ji encoding utf 8 字符串赋值到变量 再打变量打印出来 message Hello Python world print message 尝试在Hello world py中使用一个变量 在这
  • 如何在微信小程序中生成二维码:一个最简单的案例就让你明白

    使用weapp qrcode js 在 微信小程序 中 快速生成二维码 一 效果 二 具体步骤 代码 下载weapp qrcode代码 然后 将 dist 目录下的weapp qrcode esm js 复制到项目目录中 这里是utils目