为什么要使用SpringBoot+Uniapp开发

威❤ itspcool 一起交流学习

相信一个Java后端开发来说，后端和管理平台前端的技术栈的选取应当毋庸置疑，当前主流。
至于基于vue的微信小程序开发为什么选择Uniapp而非像微信原生、mpvue、vant等框架，个人观点不能说不好，只能说组件不丰富的问题对于一个前端半吊子的自己来说是不太友好，更别说快速开发了，直到迷茫的时候遇见了了uni-app这么个神玩意儿，可以说是相见恨晚，后文将通过实践证明Uniapp绝非是浪的虚名。

其实微信小程序开发也没必要纠结使用具体某一个框架，觉得哪个组件好用直接引入就好，也可谓是“集天下之大成”，总之适合自己的就好。

剖析Uniapp多端开发的底层原理

其实uni-app底层大概整合了三个技术，分别是mpvue框架、vue语法以及原生小程序的语法，所以它的底层原理也是基于以上三个框架来实现的。

vue文件与小程序目录结构文件不同，因此uni-app将原先的vue文件拆分成了四个用于小程序开发的文件，在数据绑定上面兼容了vue的优势，因为原声小程序的语法是不支持双向数据绑定的，因此，uni-app借助于vue通过一个runtime方法实现了双向数据绑定的应用。

在数据渲染和处理方面也进行了相应的优化，原生的小程序在更新数据的时候更新频次太频繁，方法调用次数太多，因此对性能损失比较高，因此uni-app底层也运用了vue的机制，一次调用就可以实现页面的更新。

SpringBoot+Uniapp实战开发项目"仿抖音短视频App"

SpringBoot微信授权登录接入认证中心

private Result handleForWxAppAuth(Principal principal, Map<String, String> parameters) throws WxErrorException, HttpRequestMethodNotSupportedException {

        String code = parameters.get("code");
        if (StrUtil.isBlank(code)) {
            throw new BizException("code不能为空");
        }

        WxMaJscode2SessionResult session = wxService.getUserService().getSessionInfo(code);
        String openid = session.getOpenid();
        String sessionKey = session.getSessionKey();

        Result<MemberDTO> result = remoteUmsMemberService.loadMemberByOpenid(openid);
        if (!ResultCode.SUCCESS.getCode().equals(result.getCode())) {
            throw new BizException("获取会员信息失败");
        }
        MemberDTO memberDTO = result.getData();
        String username;
        if (memberDTO == null) { // 微信授权登录 会员信息不存在时 注册会员
            String encryptedData = parameters.get("encryptedData");
            String iv = parameters.get("iv");

            WxMaUserInfo userInfo = wxService.getUserService().getUserInfo(sessionKey, encryptedData, iv);
            if (userInfo == null) {
                throw new BizException("获取用户信息失败");
            }
            UmsMember member = new UmsMember()
                    .setNickname(userInfo.getNickName())
                    .setAvatar(userInfo.getAvatarUrl())
                    .setGender(Integer.valueOf(userInfo.getGender()))
                    .setOpenid(openid)
                    .setUsername(openid) 
                    .setPassword(passwordEncoder.encode(openid).replace(AuthConstants.BCRYPT, Strings.EMPTY)) // 加密密码移除前缀加密方式 {bcrypt}
                    .setStatus(Constants.STATUS_NORMAL_VALUE);

            Result res = remoteUmsMemberService.add(member);
            if (!ResultCode.SUCCESS.getCode().equals(res.getCode())) {
                throw new BizException("注册会员失败");
            }
            username = openid;
        } else {
            username = memberDTO.getUsername();
        }

        // oauth2认证参数对应授权登录时注册会员的username、password信息，模拟通过oauth2的密码模式认证
        parameters.put("username", username);
        parameters.put("password", username);

        OAuth2AccessToken oAuth2AccessToken = tokenEndpoint.postAccessToken(principal, parameters).getBody();
        Oauth2Token oauth2Token = Oauth2Token.builder()
                .token(oAuth2AccessToken.getValue())
                .refreshToken(oAuth2AccessToken.getRefreshToken().getValue())
                .expiresIn(oAuth2AccessToken.getExpiresIn())
                .build();
        return Result.success(oauth2Token);

    }

。。。