一. 前言
本篇通過實戰來講述如何使用uni-app快速進行商城微信小程序的開發以及小程序如何接入後臺Spring Cloud微服務。
有來商城 youlai-mall 項目是一套全棧商城系統，技術棧是分佈式微服務加上前後端分離模式，所以在本篇項目實戰開始之前需要一些往期文章作爲基礎。
後端
- Spring Cloud實戰 | 第一篇：Windows搭建Nacos服務
- Spring Cloud實戰 | 第二篇：Spring Cloud整合Nacos實現註冊中心
- Spring Cloud實戰 | 第三篇：Spring Cloud整合Nacos實現配置中心
- Spring Cloud實戰 | 第四篇：Spring Cloud整合Gateway實現API網關
- Spring Cloud實戰 | 第五篇：Spring Cloud整合OpenFeign實現微服務之間的調用
- Spring Cloud實戰 | 第六篇：Spring Cloud Gateway+Spring Security OAuth2+JWT實現微服務統一認證授權
- Spring Cloud實戰 | 最終篇：Spring Cloud Gateway+Spring Security OAuth2集成統一認證授權平臺下實現註銷使JWT失效方案
管理前端
- vue-element-admin實戰 | 第一篇： 移除mock接入後臺，搭建有來商城youlai-mall前後端分離管理平臺
- vue-element-admin實戰 | 第二篇： 最小改動接入後臺實現根據權限動態加載菜單
微信小程序
二. 項目介紹
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
3. 項目演示
- 項目概覽
- 後臺微服務
- 管理前端
- 微信小程序端
- 移動APP端
APP介紹：vant實戰 | 第一篇：有來商城移動端APP項目介紹
三. 項目實戰
1. 開發工具
作爲一位Java Developer來說，日常開發來說IDEA基本完全夠用了，但是微信小程序開發必須要有微信開發者工具，除此之外因爲使用的是uni-app框架，官方推薦使用的是HBuilderX，點擊以下名稱即可跳轉官方地址下載。
PS: 習慣了IDEA的快捷鍵童靴們在使用HBuilderX開發之前，建議預先切換下快捷鍵方案，是不是很人性化的一個開發工具。
2. 個人微信小程序開發申請
進入微信公衆平臺申請小程序開發，創建小程序後在開發一欄的開發設置得到對應的AppID(小程序ID)，下文需要。
PS: 有來商城項目是基於個人小程序開發，個人相較於企業少了很多接口權限，例如獲取用戶手機號、調用微信支付接口等。相信大多數童鞋沒有條件得到企業號，也捨不得在沒有必要的情況花幾千塊錢註冊個公司。不過個人號基本夠用了，也可以通過“曲線救國”的方式彌補個人號的不足，舉個栗子，可以使用XorPay、Payjs等第三方支付平臺彌補個人號無法調用支付接口的問題。
3. 創建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）