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

需求:

实际开发小程序中,会遇到这样的场景,用户登录,进入个人中心生成一个带当前登录用户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、所有文章未经授权禁止转载、摘编、复制或建立镜像,如有违反,追究法律责任。
2、本站文章部分来源注册用户发布或互联网收集而来,若有侵权,请邮件联系作者。
邮箱地址:wtao219@qq.com
THE END
分享
二维码
< <上一篇
下一篇>>