微信获取带参数小程序码（太阳码）到扫码打开小程序指定页面遇到的问题和解决过程记录

小程序码生成与调试指南

最新推荐文章于 2025-08-17 17:53:29 发布

debug time

最新推荐文章于 2025-08-17 17:53:29 发布

阅读量5.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端小程序

本文链接：https://blog.csdn.net/xiehuanqing00/article/details/106873564

前端同时被 2 个专栏收录

16 篇文章

订阅专栏

小程序

3 篇文章

订阅专栏

坑一、小程序需要提交审核，然后发布才能测试扫码

坑二、发布后打开小程序还是旧版本

坑三、开发者工具和手机上看到的效果不一致（大坑）

五、调试小程序技巧

技巧一、通过二维码编译小程序

技巧二、在正式发布的小程序里面打开console面板

一、背景说明

为了推广小程序，就需要作一个小程序海报功能，海报中有小程序码，微信扫码后会打开小程序，并且跳转到指定页面中，还可以带上参数。

二、怎么获取小程序码

获取小程序tx给出来好几个接口，个人觉得没必要，这些接口参数还不太一样，搞的我们这些小白摸不着头脑，遇到问题网上搜一下都不知道大家讨论的是那个接口。

接口总体介绍：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html

下面我用到的是接口 B

这里获取二维码没有遇到什么问题比较顺利，直接上代码：

/**
     * @param accessToken
     * @param page
     * @param scene
     * @param width
     * @return
     */
    public static Map<String, Object> getMiniQrCode(String accessToken, String page, String scene, int width) {
        Map<String, Object> data = new HashMap<String, Object>();
        try {
            // ======================================================================//
            // 拼接调用微信的URL
            // ======================================================================//
            String url = GETWXACODEUNLIMIT+"?access_token=" + accessToken;
            Map<String, Object> paramsMap = new HashMap<>();
            paramsMap.put("page", page);
            paramsMap.put("scene", scene);
            paramsMap.put("width", width <= 0 ? 430 : width);
            paramsMap.put("auto_color", false);
            paramsMap.put("is_hyaline", true);
            Map<String, Object> line_color = new HashMap<String, Object>();
            line_color.put("r", 0);
            line_color.put("g", 0);
            line_color.put("b", 0);
            paramsMap.put("line_color", line_color);
            System.out.println("调用生成微信URL接口传参：" + paramsMap);
            // ======================================================================//
            // 执行URL Post调用
            // ======================================================================//
            CloseableHttpClient httpClient = HttpClients.createDefault();
            HttpPost httpPost = new HttpPost(url);
            httpPost.addHeader("content-type", "application/json");
            // 必须是json模式的 post
            String body = JSON.toJSONString(paramsMap);
            StringEntity entity = new StringEntity(body);
            entity.setContentType("image/png");
            httpPost.setEntity(entity);
            HttpResponse httpResponse = httpClient.execute(httpPost);
            HttpEntity httpEntity = httpResponse.getEntity();

            
            // ======================================================================//
            // 处理HTTP返回结果
            // ======================================================================//
            InputStream contentStream = httpEntity.getContent();

            byte[] bytes = toByteArray(contentStream);
            contentStream.read(bytes);
            // 返回内容
            data.put("qrLength", bytes.length);
            data.put("qrBytes", bytes);
            //data.put("qrBytesEncoder", Base64.getEncoder().encodeToString(bytes));
        } catch (Exception e) {
            e.printStackTrace();
            System.out.println("调用生成微信小程序码URL接口异常"+e);
        }
        return data;
    }

三、前端怎么获取小程序码参数

这里其实没有遇到什么问题，按照官网的来基本是对的

直接上代码

onLoad(query) {
      console.log(query);
      const scene = decodeURIComponent(query.scene);
      console.log("onLoad扫码参数=" + scene);

      if (scene != undefined && scene != "undefined" && scene != null) {
        const uidAndPid = scene.split(",");
        const uid = uidAndPid[0];
        this.setSpreadId(uid);
        setTimeout(() => {
          if (uidAndPid.length == 2) {
            const pId = uidAndPid[1];
            this.$router.push({
              path: "/pages/shop/GoodsCon/main",
              query: { id: pId }
            });
          }
        }, 500);
      }
    }