1. HTTP3W博客首页
  2. 建站
  3. 公众号

动态生成小程序码(带参数)

需求:

实际开发小程序中,会遇到这样的场景,用户登录,进入个人中心生成一个带当前登录用户userId的小程序码,其他用户再扫描小程序二维码后,将小程序推广者的userId作为推荐用户存储到自己的来自推广者字段中。

经过需求分析,生成一个静态图片小程序二维码,并不能动态的动态传参,于是决定采用动态生成小程序码来实现。

具体操作如下:

通过查阅微信官方平台相关API了解,实现步骤如下

第一步:首先获取access_token

1:接口调用

https请求方式: GET

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

2:参数说明

参数是否必须说明
grant_type获取access_token填写client_credential
appid第三方用户唯一凭证
secret第三方用户唯一凭证密钥,即appsecret

3:返回说明

正常情况下,微信会返回下述JSON数据包给公众号:

1{"access_token":"ACCESS_TOKEN","expires_in":7200}

参数说明

参数说明
access_token获取到的凭证
expires_in凭证有效时间,单位:秒

4:Java代码实现

@Component
public class WeixinTool {

    //配置文件参数
    @Value("${wx.miniapp.appid}")
    private String appId;

    //配置文件参数
    @Value("${wx.miniapp.secret}")
    private String secret;

    public String getAccessToken(){
        String url = "https://api.weixin.qq.com/cgi-bin/token";
        Map<String,String> map = new HashMap<>();
        map.put("grant_type","client_credential");
        map.put("appid",appId);
        map.put("secret",secret);

        try{
            HttpClientUtil httpClientUtil = new HttpClientUtil();
            String ret = httpClientUtil.doGet(url,map);
            JSONObject json = JSONObject.parseObject(ret);
            log.info("获取微信凭证:"+json);
            //获取凭据
            return (String) json.get("access_token");
        } catch (Exception e){
            log.error("调用微信获取凭证接口失败",e);
            return null;
        }

    }
}

第二步:获取小程序码

1:接口调用

https请求方式: POST

https://api.weixin.qq.com/wxa/getwxacode?access_token=” + accessToken

2:返回说明

二维码字节流

3:Java代码实现

//下面在获取小程序码
    public String getQrCode(String accessToken) {
        Integer userId = getUserId();
        RestTemplate rest = new RestTemplate();
        try {
            String url = "https://api.weixin.qq.com/wxa/getwxacode?access_token=" + accessToken;
            Map<String, Object> param = new HashMap<>();
            //param.put("path", "pages/要跳转小程序的路径")//有限
            param.put("path", "pages/index/index?userId="+userId); //无限
            param.put("width", 120);
            param.put("auto_color", false);
            Map<String, Object> line_color = new HashMap<>();
            line_color.put("r", 0);
            line_color.put("g", 0);
            line_color.put("b", 0);
            param.put("line_color", line_color);
            log.info("调用生成微信URL接口传参:" + param);
            MultiValueMap<String, String> headers = new LinkedMultiValueMap<>();
            HttpEntity requestEntity = new HttpEntity(JSON.toJSONString(param), headers);
            ResponseEntity<byte[]> entity = rest.exchange(url, HttpMethod.POST, requestEntity, byte[].class, new Object[0]);
            log.info("调用小程序生成微信永久小程序码URL接口返回结果:" + entity.getBody());
            byte[] result = entity.getBody();
           // log.info(Base64.encodeBase64String(result));
//            inputStream = new ByteArrayInputStream(result);
            return Base64.encodeBase64String(result);
        } catch (Exception e) {
            log.error("调用小程序生成微信永久小程序码URL接口异常", e);
        } finally {
        }
        return null;
    }

最后使用

我由于前端使用的uniapp生成小程序开发,故这里提供uniapp的接收方式:

//后台接口调用方式:
wxqrcode(){
	 const vm = this
	 uni.request({
		url:'/wx/qrcode/pic',
		method:'GET',
		success(res) {

		let base64 = 'data:image/jpeg;base64,' + res.data.data; //不加上这串字符,在页面无法显示的哦
			
		vm.qcCode = base64
			   	
		}
	 }) 
},


//页面显示
<image class="canvas"  :src="qcCode" style="width: 120px;height: 120px;position: absolute;left:36%;top:50%; border-radius:60px;"></image>

到这里,整个生成小程序码的过程全部完成,有疑问的小伙伴们可以给我留言哦,欢迎一起讨论~

1、原创文章,作者:诺米,如若转载,请注明出处:https://www.http3w.com/archives/680

2、本站内容若有雷同从属巧合,若侵犯了您的权益,请联系本站删除,E-mail: wtao219@qq.com

发表评论

您的电子邮箱地址不会被公开。

联系我们

254007489

在线咨询:点击这里给我发消息

邮件:wtao219@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息