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

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

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

效果图:

第一步先下载对应的包:

javascript 复制代码
npm install weapp-qrcode --save

第二步: wxml

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

javascript 复制代码
<canvas class="pf canvas" style="width:260rpx;height:260rpx;" canvas-id="myQrcode" id="myQrcode"></canvas>

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

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

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

html 复制代码
<image show-menu-by-longpress="true" src="{{qrcodeUrl}}" mode="aspectFit"></image>

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

第三步:JS

先导入weapp-qrcode包

javascript 复制代码
import drawQrcode from 'weapp-qrcode'

data中定义需要用到的变量

javascript 复制代码
data: {
    showCodeFn:false,
    qrcodeUrl:''
  },

开始生成二维码

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

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

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

javascript 复制代码
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 节点');
      }
    });
  },

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

相关推荐
2501_915909062 小时前
原生 iOS 开发全流程实战,Swift 技术栈、工程结构、自动化上传与上架发布指南
android·ios·小程序·uni-app·自动化·iphone·swift
2501_915106322 小时前
Comodo HTTPS 在工程中的部署与排查实战(证书链、兼容性与真机抓包策略)
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915909062 小时前
苹果软件混淆与 iOS 代码加固趋势,IPA 加密、应用防反编译与无源码保护的工程化演进
android·ios·小程序·https·uni-app·iphone·webview
2501_916007472 小时前
苹果软件混淆与 iOS 应用加固实录,从被逆向到 IPA 文件防反编译与无源码混淆解决方案
android·ios·小程序·https·uni-app·iphone·webview
CRMEB系统商城2 小时前
CRMEB多商户系统(PHP)v3.3正式发布,同城配送上线[特殊字符]
java·开发语言·小程序·php
尘似鹤6 小时前
微信小程序学习(六)--多媒体操作
学习·微信小程序·小程序
2501_916008898 小时前
iOS 26 性能分析深度指南 包含帧率、渲染、资源瓶颈与 KeyMob 协助策略
android·macos·ios·小程序·uni-app·cocoa·iphone
流***陌8 小时前
线上教学小程序:构建高效互动的云端学习空间
学习·小程序
源码_V_saaskw8 小时前
JAVA校园跑腿校园外卖源码校园外卖小程序校园代买帮忙外卖源码社区外卖源码小程序+公众号+h5
java·开发语言·微信小程序·小程序
源码哥_博纳软云8 小时前
JAVA同城预约服务家政服务美容美发洗车保洁搬家维修家装系统源码小程序+公众号+h5
java·开发语言·微信小程序·小程序