动态生成小程序码（带参数）

需求：

实际开发小程序中，会遇到这样的场景，用户登录，进入个人中心生成一个带当前登录用户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：参数说明

3：返回说明

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

参数说明

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>

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