一. 前言
本篇通過實戰來講述如何使用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失效方案
- Spring Cloud實戰 | 最八篇：Spring Cloud +Spring Security OAuth2+ Vue前后端分離模式下無感知刷新實現JWT續期
- Spring Cloud實戰 | 最九篇：Spring Security OAuth2認證服務器統一認證自定義異常處理
- Spring Cloud實戰 | 第十篇 ：Spring Cloud + Nacos整合Seata 1.4.1最新版本實現微服務架構中的分布式事務，進階之路必須要邁過的檻
- Spring Cloud實戰 | 第十一篇 ：Spring Cloud Gateway網關實現對RESTful接口權限和按鈕權限細粒度控制
后台管理前端
- vue-element-admin實戰 | 第一篇： 移除mock接入微服務接口，搭建SpringCloud+Vue前后端分離管理平台
- vue-element-admin實戰 | 第二篇： 最小改動接入后台實現根據權限動態加載菜單
微信小程序
應用部署
- Docker實戰 | 第一篇：Linux 安裝 Docker
- Docker實戰 | 第二篇：Docker部署nacos-server:1.4.0
- Docker實戰 | 第三篇：IDEA集成Docker插件實現一鍵自動打包部署微服務項目，一勞永逸的技術手段值得一試
- Docker實戰 | 第四篇：Docker安裝Nginx，實現基於vue-element-admin框架構建的項目線上部署
- Docker實戰 | 第五篇：Docker啟用TLS加密解決暴露2375端口引發的安全漏洞，被黑掉三台雲主機的教訓總結
二. 項目介紹
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）一起加入開發唄。最后覺得對你多多少少有幫助的話可以給個項目star唄，謝謝了~
| 項目名稱 | 地址 |
|---|---|
| 后台 | youlai-mall |
| 管理前端 | youlai-mall-admin |
| 微信小程序 | youlai-mall-weapp |
期待你的加入和建議，有問題隨時聯系我~（微信號：haoxianrui）