玩转QrCode

最新推荐文章于 2024-04-25 12:57:16 发布
最新推荐文章于 2024-04-25 12:57:16 发布
阅读量996 收藏 9
点赞数 10
分类专栏： 开发小结 文章标签： java 微信小程序 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ljz66254/article/details/135509867
版权

生成二维码,跳转指定 url

  • 导入模块
 npm install --save qrcode.vue@1.7.0
  • 引入模块
import QrcodeVue from 'qrcode.vue'
  • 编写页面
    • button 触发
<template>
  <el-button type="primary" @click="showQRCode">
    <svg-icon icon-class="code"/>
    二维码
  </el-button>
</template>
  • 弹窗页面
  <el-dialog :title="QRcodeTitle" :visible.sync="showPopup" width="220px">
      <el-form class="auto-size-form" justify="center" :model="qrcode" ref="qrcode" label-position="right" label-width="200px">
        <el-row justify="center">
          <el-form-item label="" class="form-item">
            <el-input style="width: 210px"
                      v-model="qrcode.QRlink"
                      :disabled="true">
            </el-input>
          </el-form-item>
        </el-row>
        <el-row justify="center">
            <el-divider></el-divider>
              <div style="text-align: center">
                <span>提示：扫码访问我的主页。</span>
              </div>
            <el-divider></el-divider>
        </el-row>
        <el-row justify="center">
          <el-form-item label="" class="form-item">
            <template>
              <QrcodeVue ref="Qrcode" :value="qrcode.QRlink" :size="qrcode.size" level="H"/>
            </template>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>
  • 编写方法
export default {
  name: "qrcodeDemo",
    components: {QrcodeVue},
  data() {
    return {
      showPopup: false,//触发二维码
      QRcodeTitle: '生成二维码',
      qrcode: {
        QRImgUrl: '',
        QRlink: 'https://blog.csdn.net/ljz66254',
        size: 200
      },
    }
  },
  mothod:{
    showQRCode() {
      this.QRcodeTitle = 'qrcoder of java porter';
      this.showPopup = true;
    }
  }
  • 效果展示

image.png

修改前端代码获取后端连接

  • 置空初始连接

image.png

  • 页面初始化时请求数据

image.png

  • 通过请求后端获取小程序的连接

生成小程序码

    public String getAccessToken() throws IOException {
        String accessToken ="";
        String tokenUrl ="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+secret;
        String tokenJson =requestUtils.sendGet(tokenUrl);

        ObjectMapper objectMapper = new ObjectMapper();
        JsonNode tokenJsonNode = objectMapper.readTree(tokenJson);
        accessToken = tokenJsonNode.get("access_token").asText();
        return accessToken;
    }

package top.ljzstudy.controller;

import cn.hutool.json.JSONUtil;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;


import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import top.ljzstudy.utils.RequestUtils;
import top.ljzstudy.utils.Result;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.attribute.UserDefinedFileAttributeView;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;


/**
 * ProjectName:    mini
 * ClassName:    ScanQrCodeJumpController
 * Package:    top.ljzstudy.controller
 * Description:     生成二维码
 * Datetime:    2023/12/29   9:22
 * Author:   LJZ
 * @author LJZ
 */
@Slf4j
@RestController("qrCodeJump/ScanQrCodeJumpController")
@RequestMapping("qrCodeJump/ScanQrCodeJump")
public class ScanQrCodeJumpController {

    @Autowired
    private RequestUtils requestUtils;

    @Value("${wechatMini.appId}")
    private  String appid;

    @Value("${wechatMini.appSecret}")
    private String secret;

    @PostMapping("createQrCode")
    public Result createQrCode(@RequestParam Map<String,Object> params){

        ByteArrayOutputStream os = null;

        InputStream swapStream = null;
        try {
            //效验数据.....
            //获取页面路径
            String page = "pages/index/index";

            String access_token =getAccessToken();
            //组装参数
            Map<String, Object> paraMap = new HashMap<>();
            //二维码携带参数 不超过32位 参数类型必须是字符串
            paraMap.put("scene", "1");
            paraMap.put("page",page);
            //二维码的宽度
            paraMap.put("width", 1280);
            //自动配置线条颜色，如果颜色依然是黑色，则说明不建议配置主色调
            paraMap.put("auto_color", false);
            //是否需要透明底色， is_hyaline 为true时，生成透明底色的小程序码
            paraMap.put("is_hyaline", false);
            //默认是true，检查page 是否存在，为 true 时 page 必须是已经发布的
            paraMap.put("check_path", false);
            //正式版为 "release"，体验版为 "trial"，开发版为 "develop"
            paraMap.put("env_version", "trial");
            //发送请求
            byte[] bytes = requestUtils.doImgPost("https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token="+access_token, paraMap);

            String url = OSSFactory.build().uploadSuffix(bytes, "jpg");
            System.out.println("url = " + url);
            if(StringUtils.isNotBlank(url)){
                return Result.success(url);
            }else{
                return Result.error("生成项目二维码失败");
            }
        } catch (Exception e) {
            log.error("QrCodeApi productQR error:", e);
            return Result.error("生成项目二维码失败");
        }
    }
}

1704874423414.png

二维码与小程序码的下载

  • 新增 button
      <div slot="footer" class="dialog-footer">
          <el-button size="small" icon="el-icon-download" @click="downloadQRcode">下载二维码</el-button>
          <el-button type="info" size="small" @click="showPopup = false">取 消</el-button>
      </div>
  • 下载方法
mothod:{
    downloadQRcode() {
      const canvas = this.$refs.Qrcode
      const dataURL = canvas.$el.childNodes[0].toDataURL('image/png');
      // 创建一个链接元素
      const link = document.createElement('a');
      link.href = dataURL;
      link.download = 'javaport的二维码.png';
      // 模拟用户点击下载
      link.click();
      this.showPopup = false;
    },
}
  • 效果展示

1704771232502(1).png
1704871134248.png
1704871204694.png
1704871180177.png

生成二维码,跳转指定的小程序的页面

package top.ljzstudy.controller;

import cn.hutool.json.JSONUtil;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;


import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import top.ljzstudy.utils.RequestUtils;
import top.ljzstudy.utils.Result;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.attribute.UserDefinedFileAttributeView;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;


/**
 * ProjectName:    mini
 * ClassName:    ScanQrCodeJumpController
 * Package:    top.ljzstudy.controller
 * Description:     扫码跳转小程序指定页面(体验版)
 * Datetime:    2023/12/29   9:22
 * Author:   LJZ
 * @author LJZ
 */
@Slf4j
@RestController("qrCodeJump/ScanQrCodeJumpController")
@RequestMapping("qrCodeJump/ScanQrCodeJump")
public class ScanQrCodeJumpController {

    @Autowired
    private RequestUtils requestUtils;

    @Value("${wechatMini.appId}")
    private  String appid;

    @Value("${wechatMini.appSecret}")
    private String secret;

    @PostMapping("createQrCode")
    public Result createQrCode(@RequestParam Map<String,Object> params){

        ByteArrayOutputStream os = null;

        InputStream swapStream = null;
        try {
            //效验数据.....
            //获取页面路径
            String page = "pages/index/index.html";

            //获取access_token
            String accessToken =getAccessToken();
            //跳转正式版
            //String targetUrl = requestUtils.sendPost("https://api.weixin.qq.com/wxa/generate_urllink?access_token=" + getAccessToken(), JSONUtil.toJsonStr(paraMap));

            //跳转体验版
            String sendUrl = "https://open.weixin.qq.com/sns/getexpappinfo?appid=" + appid + "&path=" + page;
            log.info("sendUrl = " + sendUrl);

            if(StringUtils.isNotEmpty(sendUrl)){
                return Result.success("operation successful",sendUrl);
            }else{
                new Result();
                return Result.error("operation fail");
            }
        } catch (Exception e) {
            log.error("QrCodeApi productQR error:", e);
            return Result.error("生成项目二维码失败");
        }
    }
}
  • 效果展示

1704874719017.png

获取小程序的二维码

package top.ljzstudy.controller;

import cn.hutool.json.JSONUtil;
import com.fasterxml.jackson.core.JsonProcessingException;
import com.fasterxml.jackson.databind.JsonNode;
import com.fasterxml.jackson.databind.ObjectMapper;


import lombok.extern.slf4j.Slf4j;
import org.apache.commons.lang3.StringUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.*;
import top.ljzstudy.utils.RequestUtils;
import top.ljzstudy.utils.Result;

import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.nio.file.attribute.UserDefinedFileAttributeView;
import java.util.HashMap;
import java.util.Map;
import java.util.Objects;


/**
 * ProjectName:    mini
 * ClassName:    ScanQrCodeJumpController
 * Package:    top.ljzstudy.controller
 * Description:     获取小程序二维码
 * Datetime:    2023/12/29   9:22
 * Author:   LJZ
 * @author LJZ
 */
@Slf4j
@RestController("qrCodeJump/ScanQrCodeJumpController")
@RequestMapping("qrCodeJump/ScanQrCodeJump")
public class ScanQrCodeJumpController {

    @Autowired
    private RequestUtils requestUtils;

    @Value("${wechatMini.appId}")
    private  String appid;

    @Value("${wechatMini.appSecret}")
    private String secret;

    @PostMapping("createQrCode")
    public Result createQrCode(@RequestParam Map<String,Object> params){

        ByteArrayOutputStream os = null;

        InputStream swapStream = null;
        try {
            //效验数据.....
            //获取页面路径
//            String sceneJson = "id="+dto.getId();
            String page = "pages/index/index";

            String access_token =getAccessToken();
            //组装参数
            Map<String, Object> paraMap = new HashMap<>();
            //二维码携带参数 不超过32位 参数类型必须是字符串

            paraMap.put("path",page);
            //二维码的宽度
            paraMap.put("width", 600);
            //正式版为 "release"，体验版为 "trial"，开发版为 "develop"
            paraMap.put("env_version", "trial");

            //二维码地址
            byte[] bytes = requestUtils.doImgPost("https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token="+access_token, paraMap);
            String qrCodeUrl = OSSFactory.build().uploadSuffix(bytes, "jpg");
            System.out.println("qrCodeUrl = " + qrCodeUrl);
            if(StringUtils.isNotEmpty(sendUrl)){

                return Result.success("operation successful",sendUrl);
            }else{
                new Result();
                return Result.error("operation fail");
            }
        } catch (Exception e) {
            log.error("QrCodeApi productQR error:", e);
            return Result.error("生成项目二维码失败");
        }
    }
}
  • 效果展示

1704879613230.png

涉及的微信开放接口

  • 获取接口调用凭据
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

1704876071170.png

  • 获取小程序码
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN

1704875800141.png

  • 跳转至小程序体验版的指定页面
GET https://open.weixin.qq.com/sns/getexpappinfo?appid=" + appid + "&path=" + path
  • 获取小程序的二维码
POST https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN
  • 请求参数

1704879430507.png

在这里插入图片描述

芝士君（Java 版）
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
QRCode.js 转成 QRCode.ts
06-09
qrcode.js 二维码库TS版本 因为在TS 使用还得 加 d.ts 文件 想着直接编译成TS 多好。 就做了一个TS 版本的库
npm引入QRCode生成器
cainiao1412的博客
04-26 2434
1. 安装QRCode库 控制台输入： npm install --save qrcodejs2-fix 2.在vue文件引入 import QRCode from 'qrcodejs2-fix' 3.编写代码 html: <div ref="qrcode"> </div> js: new QRCode(this.$refs.qrcode, { text: qrCodeUrl, //URL地址 width: 300, hei
踩坑npm install qrcodejs2和crypto-js
最新发布
hay23455的博客
04-25 314
去node-modules查看，安装qrcodejs2依赖的时候会删除crypto-js，而安装crypto-js依赖的时候会删除qrcodejs2，总之这两个依赖貌似不能同时存在，所以安装完一个之后再安装另一个就会报错缺失依赖。执行上面的命令后，在node-modules里面同时找到了这两个依赖，这次终于安装好这两个依赖了。再次运行启动命令继续报错，这次报错显示找不到crypto-js依赖。通过以下命令安装crypto-js依赖。报错找不到crypto-js依赖。
QRCode库使用教程
qq_47993287的博客
10-06 4477
JavaScript二维码生成/渲染库QRCode.js的使用教程。
【vue】npm引进 QRCode 二维码生成器
weixin_43394840的博客
12-24 3175
1.安装qrcodejs2 控制台输入： npm install --save qrcodejs2 2.在vue文件引入 import QRCode from ‘qrcodejs2’ 3.编写代码 前端 <div class="qrcode" ref="qrCodeUrl" :style="qrcodeSS != null? 'opacity:1':'opacity:0.5'"></div> js代码 new QRCode(this.$refs.qrCodeUrl, {
利用npm下载qrcode生成二维码出现的问题[verbose stack Error: unable to resolve dependency tree]
m0_69644606的博客
11-15 980
npm
Vue使用QrcodeVue生成二维码并下载
weixin_61769998的博客
08-01 2219
Vue使用QrcodeVue生成二维码并下载
最新QRCODE核心
12-25
java二维码所需jar包，免费 qrcode.jar 需要的小伙伴就下载吧
html5Qrcode.zip
06-22
html手机扫码DOM 已经实现拍照扫码与上传扫码 内包含qrcode.js qrcode.lib.min.js quagga.min.js zepto.js等相关js文件
QRcode.rar
02-02
微信小程序自动生成二维码
QRCode.zip
07-30
QRCode.jar包，用于支撑开发扫描二维码进行登录验证的功能。需要的自行下载。qrcode.jar免费版是QRCode二维码开发必备的一款jar文件。如果您还没有qrcode.jar免费版包将无法正常的进行二维码的开发运行，马上下载...
Vue内动态生二维码
weixin_42845571的博客
06-04 336
1、引入qrcode--------npm install qrcode 2、在main.js中引入 import QRCode from 'qrcode' //定义生成二维码组件 3、在需要使用到生成二维码的组件中引入 import QRCode from 'qrcode' //引入生成二维码组件 4、在HTML中定义生成的位置，注意添加样式 <template> <div id="query"> <h1>二维码：</h1>
vue生成二维码与识别，vue扫一扫功能实现
“ 春风若有怜花意，能否许我再少年。”
08-30 2272
【代码】二维码的生成与识别，扫一扫功能实现。
js生成二维码——QRCode.js中文文档
qq_44710145的博客
09-11 7029
摘要CSDN博主「仿生人会梦到敲代码么」的原创文章
Vue中qrcode的使用方法（生成二维码插件） / 前端页面根据URL链接生成二维码
wwyxjjz的博客
11-24 8655
1.下载 npm install qrcode --save-dev 2.引入(在所需要的页面中引入) import QRCode from “qrcode”; //引入生成二维码插件 3.生成二维码 <canvas id="QRCode_header" style="width: 280px; height: 280px"></canvas> <script...
vue3.2使用QrCode生成二维码
猫玖云
04-06 786
vue3使用QrCode生成二维码
在Vue3中使用qrcode库实现二维码生成
一起学习
12-26 1983
本文主要介绍在Vue3中使用qrcode库实现二维码生成的方法。
使用qrcode生成二维码
qq_43740491的博客
08-31 1104
本文记录在项目中使用qrcode插件生成二维码
c++ string 转 qrcode
05-31
QRcode* qr = QRcode_encodeString(str.c_str(), 0, QR_ECLEVEL_L, QR_MODE_8, 1); // 将 QR Code 内容输出为 ASCII 码 for (int y = 0; y < qr->width; y++) { for (int x = 0; x < qr->width; x++) { std::...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝士君（Java 版）

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值