uniapp微信小程序 生成小程序码scene参数踩坑全指南@杨章隐

这篇具有很好参考价值的文章主要介绍了uniapp微信小程序 生成小程序码scene参数踩坑全指南@杨章隐。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信生成二维码官方文档地址:获取小程序码 | 微信开放文档 (qq.com)

这里采用的是获取不限制的小程序码

注意事项

  • 如果调用成功,会直接返回图片二进制内容,如果请求失败,会返回 JSON 格式的数据。

  • POST 参数需要转成 JSON 字符串,不支持 form 表单提交。

  • 调用分钟频率受限(5000次/分钟),如需大量小程序码,建议预生成

获取 scene 值
  • scene 字段的值会作为 query 参数传递给小程序/小游戏。用户扫描该码进入小程序/小游戏后,开发者可以获取到二维码中的 scene 值,再做处理逻辑。

  • 调试阶段可以使用开发工具的条件编译自定义参数 scene=xxxx 进行模拟,开发工具模拟时的 scene 的参数值需要进行 encodeURIComponent

Page({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
  }
})
POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN //服务端调用

Java服务端代码实例(可以直接复制使用)

//这里返回base64 前端可以通过 <image src = "">直接展示
public byte[] remoteWxApiCreateQrcode(MiniQrCodeParamVo paramVo) throws Exception {
        String accessToken = "";//这里去获取accessToken
        RestTemplate rest = new RestTemplate();
        String url = "";
        Map<String, Object> param = new HashMap<String, Object>();
        url = WxMiniApiServiceConstants.GET_WXA_CODE_UNLIMIT_URL.replace("ACCESS_TOKEN", accessToken);
        // 输入参数 最大32字符
        param.put("scene", paramVo.getScene());
        // 路径 如果没有默认跳转到首页面微信小程序发布后才可以使用不能添加参数
        param.put("page", paramVo.getPage());
        // 二维码尺寸
        param.put("width", paramVo.getWidth());
        param.put("is_hyaline", paramVo.isHyaline()); // 是否需要透明底色, is_hyaline 为true时,生成透明底色的小程序码 参数仅对小程序码生效
        param.put("auto_color", paramVo.isAutoColor()); // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调 参数仅对小程序码生效
        // 颜色 auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"}
        param.put("line_color", paramVo.getLineColor());
        log.info("调用生成微信URL接口传参:" + param);
        MultiValueMap<String, String> headers = new LinkedMultiValueMap<String, String>();
        headers.put(HttpHeaders.CONTENT_TYPE, Collections.singletonList("application/json"));
        org.springframework.http.HttpEntity<Object> requestEntity = new org.springframework.http.HttpEntity<Object>(
                param, headers);
        ResponseEntity<byte[]> response = rest.exchange(url, HttpMethod.POST, requestEntity, byte[].class);

        // 返回的不是图片,则说明接口报错了
        if (!"image".equals(Objects.requireNonNull(response.getHeaders().getContentType()).getType())) {
            String str = new String(Objects.requireNonNull(response.getBody()), StandardCharsets.UTF_8);
            log.error("调用小程序生成微信永久小程序码报错,接口响应内容:{}", str);
            JSONObject resultParams = JSON.parseObject(str);
            String errorCode = resultParams.getString("errcode");
            if (StringUtils.isNotBlank(errorCode)) {
                log.info("errorCode={}" + errorCode);
                if (ObjectUtil.equal("42001", errorCode) || ObjectUtil.equal("40001", errorCode) || ObjectUtil.equal("40014", errorCode)) {
                    // 强制设置wxMpConfigStorage它的access token过期了,这样在下一次请求里就会刷新access token
                    Lock lock = this.wxService.getWxMpConfigStorage().getAccessTokenLock();
                    lock.lock();
                    try {
                        if (StringUtils.equals(this.wxService.getWxMpConfigStorage().getAccessToken(), accessToken)) {
                            this.wxService.getWxMpConfigStorage().expireAccessToken();
                        }
                    } catch (Exception ex) {
                        this.wxService.getWxMpConfigStorage().expireAccessToken();
                    } finally {
                        lock.unlock();
                    }
                    if (this.wxService.getWxMpConfigStorage().autoRefreshToken()) {
                        return this.execute(paramVo);
                    }
                } else if (ObjectUtil.equal("-1", errorCode)) {
                    log.error("\n【请求地址】: {}\n【请求参数】:{}\n【错误信息】:{}", url, JSON.toJSONString(param), str);
                    throw new Exception(errorCode);
                } else {
                    log.error("\n【请求地址】: {}\n【请求参数】:{}\n【错误信息】:{}", url, JSON.toJSONString(param), str);
                    throw new Exception(str);
                }
            }
        }
        return response.getBody();
    }
MiniQrCodeParamVo

import java.util.HashMap;
import java.util.Map;

public class MiniQrCodeParamVo {

    private String flag;   //默认为伊店通  2伊美通
    private String scene;   // 输入参数 最大32字符
    private String page;    // 路径 如果没有默认跳转到首页面微信小程序发布后才可以使用不能添加参数
    private String width = "430"; // 二维码尺寸
    private String path;
    private boolean isHyaline = true; // 是否需要透明底色, is_hyaline 为true时,生成透明底色的小程序码 参数仅对小程序码生效
    private boolean autoColor = false;  // 自动配置线条颜色,如果颜色依然是黑色,则说明不建议配置主色调 参数仅对小程序码生效
    private Map<String, Object> lineColor;  // 颜色 auto_color 为 false 时生效,使用 rgb 设置颜色 例如 {"r":"xxx","g":"xxx","b":"xxx"}

    public String getFlag() {
        return flag;
    }

    public void setFlag(String flag) {
        this.flag = flag;
    }

    public String getPath() {
        return path;
    }

    public void setPath(String path) {
        this.path = path;
    }

    public String getScene() {
        return scene;
    }

    public void setScene(String scene) {
        this.scene = scene;
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

    public String getWidth() {
        return width;
    }

    public void setWidth(String width) {
        this.width = width;
    }

    public boolean isHyaline() {
        return isHyaline;
    }

    public void setHyaline(boolean isHyaline) {
        this.isHyaline = isHyaline;
    }

    public boolean isAutoColor() {
        return autoColor;
    }

    public void setAutoColor(boolean autoColor) {
        this.autoColor = autoColor;
    }

    public Map<String, Object> getLineColor() {
        if (null == lineColor) {
            lineColor = new HashMap<String, Object>();
            lineColor.put("r", 0);
            lineColor.put("g", 0);
            lineColor.put("b", 0);
        }
        return lineColor;
    }

    public void setLineColor(Map<String, Object> lineColor) {
        this.lineColor = lineColor;
    }

}
  1. 坑1:参数长度

异常信息:

uniapp微信小程序 生成小程序码scene参数踩坑全指南@杨章隐

这是因为scene长度仅仅有32发挥的空间,所以最好的话参数用分割

例如:orderID=123456789&userId=123456789简化为123456789-123456789

为什么要用横杠?参考第二个坑

  1. 坑2:转码异常

首先onload解析参数的时候需要url转码,

但是如果生命周期二次刷新,我们使用&符号会被自动拼接上%25这时候url转码就会失败

解决方法1:用横杠代替URL常用字符

解决方法2:用点心,把所有URL字符全部特殊处理一次参考如下

Java开发笔记之%被转码为%25导致url无法请求 - 腾讯云开发者社区-腾讯云 (tencent.com)文章来源地址https://www.toymoban.com/news/detail-464352.html

到了这里,关于uniapp微信小程序 生成小程序码scene参数踩坑全指南@杨章隐的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp微信小程序接入echarts(踩坑无数)

    因为本次小程序开发使用到了echarts 发现接入有点麻烦,记录一下 使用了uniapp插件市场的 echarts-for-wx插件 导入到自己的项目会多出以下文件夹,真正有用的是红框内的三个文件,可以将其移入到components下,具体哪个页面/组件使用了就引入 这里我是把uni-ec-canvas移入到compone

    2024年02月12日
    浏览(50)
  • uniapp运行到微信小程序踩坑记录

    提示TypeError: Property value expected type of string but got undefined 打包时提示以下报错 因为标签绑定绑定一个函数的参数中传入一个函数时,不能直接加入括号传承,不支持方法中套方法的操作, 错误: 正确 应该把参数传入函数中以回调的形式去调用,不能直接在标签上嵌套 Error

    2024年02月16日
    浏览(71)
  • 【uniapp&微信小程序】跨平台使用echarts的方案选择&踩坑

    使用Uniapp(vue)开发微信小程序,想用echarts图表实现类似github热力图的效果。 简要列一些可行或不可行的方案。 有echarts官网提供的跨平台方案:在微信小程序中使用 ECharts 简单易用,图表齐全 renderjs-echarts-demo 可参考的使用总结 render.js+echarts echarts图表在移动端的应用 支持

    2024年02月13日
    浏览(138)
  • uniapp 微信小程序 动态分享 带参数

    uniapp 微信小程序 有动态参数的那种 微信小程序分享有两种分享。 第一种:就是右上角自带的菜单分享 第二种: button按钮通过open-type=\\\"share\\\" 点击分享 通常我们分享默认都是分享本页面 然后带一些分享参数比如说id uid等 直接放在url地址后面就可以了, 那如果我们使用 按钮

    2024年02月11日
    浏览(73)
  • 23年9月最新微信小程序 手机号授权 (uniapp+盛派SDK) 帮你踩坑

    一、背景 微信小程序手机号授权接口,从23年8月开始实行付费验证。 文档地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getRealtimePhoneNumber.html   新版手机号授权说明如下: 自2023年8月28日起 【手机号实时验证组件】将需要付费使用。标准单价为:每次组件调用

    2024年02月08日
    浏览(49)
  • Uniapp微信小程序实现简易生成表单生成器

    在开发一些填报小程序,一些小型办公小程序的时候,难免会遇到 较多的需要填写的表单信息 ,纯手撸表单耗时耗力。 下面将分为三个部分 一、创建对应类型表单的结构体 下面是新建商机的表单结构体 字段详情看注释 二、对应的表单生成器模板 formProps就是上面的表单结

    2024年02月09日
    浏览(43)
  • 微信小程序生成携带参数的二维码

    当对需求的时候发现 要完成一个永久二维码直接进入微信小程序的对应页面+对应IID参数 不要慌 这篇文章解决 满足生成需要 微信官方提供生成微信二维码 可满足大部分功能 获取不限制的小程序码 | 微信开放文档 可以看到官方文档有3种二维码的样式 我们这里以第一种的小

    2024年02月09日
    浏览(62)
  • 微信小程序生成带动态参数二维码

    首先说一下我的使用场景,用户可根据id生成这一条记录的二维码,其他人扫码直接跳转到小程序,显示这条记录的具体信息。 分两步:第一在微信公众号后台配置,第二利用canvas前端实现二维码展示,并接收参数做下一步处理。 登录微信公众平台,依次点击开发管理 - 开发

    2024年02月11日
    浏览(53)
  • uniapp,转微信小程序,获取当前页面的 路由、路由参数

    uniapp 获取当前路由信息跟 vue 不同,它没有 route 对象。 uniapp 转成小程序后是这样的 当前页面展示的路由信息就是上一条中获取到的 pages 的最后一条路由,即 它的内容是: 当前路由的参数 在 currentRoute.options 中 比如 index?type=diarydiaryid=123 的 options 就是 而 当前页面的完整路

    2024年02月14日
    浏览(89)
  • uniapp微信小程序生成分享海报(模板自取)

    uniapp微信小程序生成分享海报模板 1、模板自取 2、可自行按需求更改调整 3、效果图如下: 生成前  ----- 生成后的图 需知: 博主的实现效果是先把需要生成的图片排版成静态页面,再点击生成海报-----通过canvas生成海报!!!            不需要这样效果话可以省略第一步

    2024年02月14日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包