為什麼要使用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);

    }
 

。。。