原生小程序生成二维码并保存到本地

需求:我要在一个页面中生成一个二维码,并且这个二维码可以长按保存到本地或者发送给好友;

我这里是将生成的canvas二维码转换成图片,利用长按图片进行保存或转发

效果图:

第一步先下载对应的包:

npm install weapp-qrcode --save

第二步: wxml

        我们需要准备一个生成二维码的canvas

<canvas class="pf canvas" style="width:260rpx;height:260rpx;" canvas-id="myQrcode" id="myQrcode"></canvas>

canvas-id="myQrcode"        这个id是生成二维码的时候需要

id="myQrcode"        这个id是转换图片的时候需要

        还需要一个存放图片的image (图片的位置自定义)

<image show-menu-by-longpress="true" src="{{qrcodeUrl}}" mode="aspectFit"></image>

show-menu-by-longpress="true"        必须存在

 第三步:JS

        先导入weapp-qrcode包


import drawQrcode from 'weapp-qrcode'

       data中定义需要用到的变量

data: {
    showCodeFn:false,
    qrcodeUrl:''
  },

        开始生成二维码 

onLoad(options) {
var that = this
drawQrcode({
      width:130,
      height:130,
      canvasId: 'myQrcode',
      text: config.temporaryUrl+'wechat/unit/'+options.unitId,
      callback:function(e){
        //我这里判断如果二维码生成成功就调用转换图片的方法,万一在没生成二维码之前,用户点击了图片的,报错或者看不见就尴尬了
        that.drawImg()
      }
    })
 },

至于需要在哪个生命周期函数中生成二维码,自己定

         将二维码转换成图片的方法

drawImg(){
    var that = this
    // 创建一个选择器查询对象
    const query = wx.createSelectorQuery();
    // 执行查询并获取 canvas 节点的实例
    query.select('#myQrcode').boundingClientRect()
    // 查询结束后执行回调函数
    query.exec((res) => {
      if (res[0]) {
        // res[0] 是 canvas 节点信息,确保节点存在
        wx.canvasToTempFilePath({
          canvasId: 'myQrcode',
          success(res) {
            that.setData({
//因为的的需求是点击某个地方,才让图片显示,所以在没生成图片之前,先把需要点击的那个地方隐藏了,等生成图片成功后,再放出来,所以这里是控制那个点击地方的显示/隐藏
              showCodeFn:true
            })
            console.log('查询成功')
            const tempFilePath = res.tempFilePath;
            console.log(tempFilePath);
            that.setData({
//这是图片地址
              qrcodeUrl: tempFilePath
            })
          },
          fail(err) {
            console.error( err);
          }
        });
      } else {
        console.error('未能找到对应的 canvas 节点');
      }
    });
  },

完成 ✿✿ヽ(°▽°)ノ✿

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/791557.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言笔记31 •单链表经典算法OJ题-3.反转链表•

反转链表 1.问题 给你单链表的头节点 head&#xff0c;请你反转链表&#xff0c;并返回反转后的链表。 2.代码实现&#xff1a; //3.反转链表 #define _CRT_SECURE_NO_WARNINGS 1 #include <stdio.h> #include <stdlib.h> #include <assert.h>typedef int …

LLM——langchain 与阿里 DashScop (通义千问大模型) 和 DashVector(向量数据库) 结合使用总结

文章目录 前言预览直接调用大模型使用 prompt template格式化输出使用上下文 RAG 增强检索 自定义 langchain AgentPromptTemplate 和 ChatPromptTemplate使用少量示例创建ChatPromptTemplate 前言 langchain 是一个面向大模型开发的框架&#xff0c;其中封装了很多核心组件&a…

设计模式之外观模式(Facade)

Facade设计模式&#xff0c;也称为外观模式&#xff0c;是一种结构型设计模式&#xff0c;它主要用于为子系统中的一组接口提供一个统一的高层接口&#xff0c;从而使得子系统更加容易使用。以下是关于Facade设计模式的详细介绍&#xff1a; 一、定义 Facade模式为多个复杂的…

期权专题12:期权保证金和期权盈亏

目录 1. 期权保证金 1.1 计算逻辑 1.2 代码复现 1.3 实际案例 2. 期权盈亏 2.1 价格走势 2.2 计算公式 2.2.1 卖出期权 2.2.2 买入期权 免责声明&#xff1a;本文由作者参考相关资料&#xff0c;并结合自身实践和思考独立完成&#xff0c;对全文内容的准确性、完整性或…

【Linux】管道命令

命令执行的时候有时会输出数据&#xff0c;有的命令输出的数据太繁杂了。 那么我们怎么去筛选这些信息来得到我们所想要的格式&#xff1f; 这就牵涉到管道命令的问题了&#xff08;pipe&#xff09;&#xff0c;管道命令使用的是【|】这个界定符号。另外&#xff0c;管道命令与…

Mongodb单字段索引详解

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第89篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。如果您认为我的文章对您有帮助或者解决您的问题&#xff0c;欢迎在文章下面点个赞&#xff0c;或者关…

概率论期末速成(知识点+例题)

考试范围 一&#xff1a; 事件关系运算性质全概率公式、贝叶斯公式古典概型 二&#xff1a; 离散分布律连续密度函数性质 -> 解决三个问题&#xff08;求待定系数、求概率、求密度函数&#xff09;分布函数 -> 解决三个问题常用分布&#xff08;最后一节课的那几个分…

Linux 调试命令记录

查看CPU信息 cat /proc/cpuinfo 显示当前电源功耗 top 命令能够清晰的展现出系统的状态&#xff0c;而且它是实时的监控&#xff0c;按 q 退出。 uptime 与 w 这两个命令只是单纯的反映出负载&#xff0c;所表示的是过去的1分钟、5分钟和15分钟内进程队列中的平均进程数量。…

【机器学习】机器学习详解-小白入门(随记)

&#x1f388;边走、边悟&#x1f388;迟早会好 机器学习&#xff08;Machine Learning&#xff09;是一种人工智能技术&#xff0c;通过让计算机系统从数据中学习并改进其性能&#xff0c;而不是通过显式编程来完成特定任务。其核心概念是利用算法和统计模型对大量数据进行分…

「解析」Cosine-Warmup 学习率策略

参考论文&#xff1a;SGDR: Stochastic Gradient Descent with Warm Restarts Bag of Tricks for Image Classification with Convolutional Neural Networks 梯度下降算法需要我们设置一个值&#xff0c;用来控制权重更新幅度&#xff0c;我们将其称之为学习率。它是控制模型学…

统信UOS桌面操作系统上删除系统升级后GRUB中的回滚条目与备份

原文链接&#xff1a;统信UOS删除升级后GRUB中的回滚条目与备份 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇关于在统信UOS桌面操作系统上删除系统升级后GRUB中的回滚条目与备份的文章。在进行系统升级后&#xff0c;GRUB引导菜单中可能会出现多个回滚条目和备份…

maven高级1——一个项目拆成多个

把原来一个项目&#xff0c;拆成多个项目。 &#xff01;&#xff01;他们之间&#xff0c;靠接口通信。 以ssm整合好的项目为例&#xff1a; 如何看拆的ok不ok 只要compile通过就ok。 拆分pojo 先新建一个项目模块&#xff0c;再把内容复制进去。 拆分dao 1.和上面一样…

Python爬虫速成之路(1):获取网页源代码

hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;绝命Coding-CSDN博客 &a…

暴雨、高温等极端天气频发,农险业务迎大考

近期&#xff0c;湖北地区暴雨如注&#xff0c;持续的强降水使得地势低洼的农田面临严重的渍涝风险&#xff0c;早稻、再生稻等作物或将遭受“雨洗禾花”的威胁。 山东的农田却饱受高温干旱的煎熬&#xff0c;南四湖下级湖水位持续降低&#xff0c;农作物受旱面积不断扩大&…

grep对文件内容搜索(附重要拓展-正则表达式)

文件搜索是搜索查找符合条件的某文件的目录&#xff0c;若要编辑文件或对文件的某配置进行修改&#xff0c;就需要对文件内容进行搜索。 grep 命令是 Linux 及类 Unix 操作系统中的一个强大的文本搜索工具&#xff0c;用于搜索一个或多个文件中匹配给定模式的行。grep 代表“Gl…

请跳至打印机属性的“Adobe PDF设置”页面,取消选择“仅停靠系统字体;不使用文档字体”

场景&#xff1a; 当使用adobe pdf打印时&#xff0c;出现如下提示“请跳至打印机属性的“Adobe PDF设置”页面&#xff0c;取消选择“仅停靠系统字体&#xff1b;不使用文档字体””&#xff0c;该如何解决。 描述 □“仅停靠系统字体&#xff1b;不使用文档字体” 复选本框…

nginx安装配置视频频服务器-windows

编译安装nginx 1、安装perl 安装地址: https://strawberryperl.com&#xff0c;选择msi安装程序即可 2、安装sed for windows 下载地址&#xff1a;https://sourceforge.net/projects/gnuwin32/files/sed/&#xff0c;执行安装程序结束后&#xff0c;将安装包bin目录配置到…

javaweb学习day1《HTML篇》--新浪微博(前端页面的创建思路及其HTML、css代码详解)

一、前言 本篇章为javaweb的开端&#xff0c;也是第一篇综合案例&#xff0c;小编也是看着黑马程序员的视频对里面的知识点进行理解&#xff0c;然后自己找一个新浪微博网页看着做的&#xff0c;主要还是因为懒&#xff0c;不想去领黑马程序员的资料了。 小编任务javaweb和ja…

MybatisPlus 使用教程

MyBatisPlus使用教程 文章目录 MyBatisPlus使用教程1、使用方式1.1 引入依赖1.2 构建mapper接口 2、常用注解2.1 TableName2.2 TableId2.3 TableField MyBatisPlus顾名思义便是对MyBatis的加强版&#xff0c;但两者本身并不冲突(只做增强不做改变)&#xff1a; 引入它并不会对原…

【Python专栏】搭建Pyhthon运行环境及开发环境 | 安装Python | 安装PyCharm

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Python专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍******文件安装包详见文章末尾****** 搭建Pyhthon运行环境及开发环境…