uniapp的H5页面使用微信登录

此篇仅为个人的学习记录。参考地址：https://blog.csdn.net/weixin_42236466/article/details/107225625
我在uniapp的H5页面使用微信登录需要前后端配合，项目目录结构为：

image.png

image.png

image.png

image.png

image.png

后端接口（springboot项目）：

    @GetMapping("/openid")
    @ApiOperation("获取微信用户信息")
    //以下仅为demo，实际开发中请再做优化
    public ResponseBean getOpenId(String code) {
        System.out.println("2333");
        if (code == null) {
            return ResponseBean.error("code为空");
        }
        String wxAuthPath = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=你的appID&secret=你的appsecret&code=%s&grant_type=authorization_code";
        String url = String.format(wxAuthPath, code);//拼接链接
        RestTemplate restTemplate = new RestTemplate();//发送请求类
        String res = restTemplate.getForObject(url, String.class);//  openid  access_token
        JSONObject jsonObject = new JSONObject(res);
        String openid = jsonObject.getStr("openid");
        if (openid == null) {
            return ResponseBean.error("openid为空");
        }
        String accessToken = jsonObject.getStr("access_token");
        String obtainHeadImage = "https://api.weixin.qq.com/sns/userinfo?access_token=%s&openid=%s";
        String newUrl = String.format(obtainHeadImage, accessToken, openid);
        String result = restTemplate.getForObject(newUrl, String.class);
        result = toUTF8(result);
        Map<String, Object> map = new HashMap<>();
        map.put("openid", openid);
        map.put("user", result);
        return ResponseBean.success(map);
    }

这是我的测试号

image.png

image.png

image.png