vue+uni-app商城實戰 | 第一篇：【有來小店】微信小程式快速開發接入Spring Cloud OAuth2認證中心完成授權登入

你好，舊時光發表於2020-10-27
VueAPP微信小程式SpringCloudOAuth

一. 前言

本篇通過實戰來講述如何使用uni-app快速進行商城微信小程式的開發以及小程式如何接入後臺Spring Cloud微服務。

有來商城 youlai-mall 專案是一套全棧商城系統，技術棧是分散式微服務加上前後端分離模式，所以在本篇專案實戰開始之前需要一些往期文章作為基礎。

後端

  1. Spring Cloud實戰 | 第一篇：Windows搭建Nacos服務
  2. Spring Cloud實戰 | 第二篇：Spring Cloud整合Nacos實現註冊中心
  3. Spring Cloud實戰 | 第三篇：Spring Cloud整合Nacos實現配置中心
  4. Spring Cloud實戰 | 第四篇：Spring Cloud整合Gateway實現API閘道器
  5. Spring Cloud實戰 | 第五篇：Spring Cloud整合OpenFeign實現微服務之間的呼叫
  6. Spring Cloud實戰 | 第六篇：Spring Cloud Gateway+Spring Security OAuth2+JWT實現微服務統一認證授權
  7. Spring Cloud實戰 | 最終篇：Spring Cloud Gateway+Spring Security OAuth2整合統一認證授權平臺下實現登出使JWT失效方案

管理前端

  1. vue-element-admin實戰 | 第一篇： 移除mock接入後臺，搭建有來商城youlai-mall前後端分離管理平臺
  2. vue-element-admin實戰 | 第二篇： 最小改動接入後臺實現根據許可權動態載入選單

微信小程式

  1. vue+uniapp商城實戰 | 第一篇：【有來小店】微信小程式快速開發接入Spring Cloud OAuth2認證中心完成授權登入

二. 專案介紹

1. 專案簡介

有來商城youlai-mall一套全棧的商城系統。整個系統採用微服務架構，前後端分離互動模式。後端採用Spring Boot + Spring Cloud 並使用Spring Cloud Alibaba對微服務進行擴充套件。管理平臺前端採用Vue + Element-UI，基於成熟的後臺前端解決方案vue-element-admin。微信小程式端使用uni-app。

2. 技術選型

相信一個Java後端開發來說，後端和管理平臺前端的技術棧的選取應當毋庸置疑，當前主流。

至於基於vue的微信小程式開發為什麼選擇uni-app而非像微信原生、mpvue、vant等框架，個人觀點不能說不好，只能說元件不豐富的問題對於一個前端半吊子的自己來說是不太友好，更別說快速開發了，直到迷茫的時候遇見了了uni-app這麼個神玩意兒，可以說是相見恨晚，後文將通過實踐證明uni-app絕非是浪的虛名。

其實微信小程式開發也沒必要糾結使用具體某一個框架，覺得哪個元件好用直接引入就好，也可謂是“集天下之大成”，總之適合自己的就好。

如果還在糾結微信小程式的框架選型不妨多看看多瞭解下，不然後面會浪費更多的時間成本和精力，可參考以下文章。

跨端框架深度評測：微信原生、wepy、mpvue、uni-app、taro、chameleon

2. 專案演示

  • 專案概覽

  • 後臺微服務

  • 管理前端

  • 微信小程式端

  • 移動APP端

APP介紹：vant實戰 | 第一篇：有來商城移動端APP專案介紹

三. 專案實戰

1. 開發工具

作為一位Java Developer來說，日常開發來說IDEA基本完全夠用了，但是微信小程式開發必須要有微信開發者工具，除此之外因為使用的是uni-app框架，官方推薦使用的是HBuilderX，點選以下名稱即可跳轉官方地址下載。

微信開發者工具

HBuilderX

PS: 習慣了IDEA的快捷鍵童靴們在使用HBuilderX開發之前，建議預先切換下快捷鍵方案，是不是很人性化的一個開發工具。

2. 個人微信小程式開發申請

進入微信公眾平臺申請小程式開發，建立小程式後在開發一欄的開發設定得到對應的AppID(小程式ID)，下文需要。

PS: 有來商城專案是基於個人小程式開發，個人相較於企業少了很多介面許可權，例如獲取使用者手機號、呼叫微信支付介面等。相信大多數童鞋沒有條件得到企業號，也捨不得在沒有必要的情況花幾千塊錢註冊個公司。不過個人號基本夠用了，也可以通過“曲線救國”的方式彌補個人號的不足，舉個例子，可以使用XorPay、Payjs等第三方支付平臺彌補個人號無法呼叫支付介面的問題。

3. 建立uni-app商城模板

後端開發人員一般來說不太擅長前端頁面的設計開發，那該怎麼快速開發微信商城小程式頁面呢？

還記得上面說的很神奇的uni-app框架嗎？它提供了外掛市場，裡面有很多基於uni-app開發的元件和模板。

uni-app外掛市場

搜尋關鍵詞“mall”，選擇下載量最多的專案模板點選進入

點選“使用HBuilderX匯入外掛”，便可自動啟動應用和載入專案至工作空間。

4. 配置微信小程式接入Spring Cloud OAuth2認證中心

4.1 微信小程式

匯入的商城模板預設的是本地JSON資料，那麼接入後臺微服務需要封裝axios請求，此外還需新增vuex來對狀態進行管理，這兩項引自vue-element-admin，細節請參考原始碼 youlai-mall-weapp，微信小程式調整步驟如下：

4.1.1 修改匯入模板專案名稱為youlai-mall-weapp，並在manifest.json配置AppID

4.1.2 封裝請求axios

4.1.3 新增狀態管理vuex

4.1.4. 登入頁面以及授權登入程式碼邏輯調整

4.1.5. 微信小程式啟動

4.2 後臺微服務

4.2.1 微信授權登入接入認證中心

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);

    }

宣告： 這裡的微信登入是基於微信授權快捷登入的方式而非表單，所以在第一次授權登入時註冊的會員資訊使用者名稱和密碼通過自定義方式生成，此後在OAuth2認證時攜帶這兩個引數完成密碼模式認證並生成token返回給微信小程式端。如果使用表單註冊/登入，替換username和password即可。

四. 結語

最後分享一些個人心得吧(倚老賣老)，其實學好一門技術的我們心裡都知道最有效的辦法就是能夠在實際場景運用它。自己雖然做了6年的開發，可惜現在還是在小公司做CRUD，不甘心又無奈，根本原因呢就是自己技術太菜。所以利用平時空閒時間建立了youlai-mall專案，並且為此買了三臺雲主機，雖然都是活動買的最便宜的那種，但至少對技術的態度是認證的。

初衷就是想把像分散式、高併發等技術引入整合到這個專案，通過實戰來加深對技術的理解，就是挺無奈的沒有環境那就自己建立環境吧。對專案有興趣小夥伴歡迎聯絡我（微訊號：haoxianrui）一起加入開發唄。最後覺得對你多多少少有幫助的話可以給個專案關注，也算是對我的一種鼓勵認可，謝謝了~

專案名稱 地址
後臺 youlai-mall
管理前端 youlai-mall-admin
微信小程式 youlai-mall-weapp

期待你的加入和建議，有問題隨時聯絡我~（微訊號：haoxianrui）

相關文章