技術文章 » SpringCloud微服務實戰——搭建企業級開發框架（四十六）：【移動開發】整合uni-app搭建行動端快速開發框架-環境搭建

SpringCloud微服務實戰——搭建企業級開發框架（四十六）：【移動開發】整合uni-app搭建行動端快速開發框架-環境搭建

2022-10-25 15:01:55

  近年來uni-app發展勢頭迅猛，只要會vue.js，就可以開發一套程式碼，釋出移動應用到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。憑藉著此跨平臺的特性，吸引了大批公司和開發者的青睞，據官網顯示目前其有900萬開發者、數百萬應用、12億手機端月活使用者、數千款uni-app外掛。
  正如優秀的軟體設計一樣，uni-app把一些行動端常用的功能做成了獨立的服務或者外掛，我們在使用的時候只需要選擇使用即可。但是在使用這些服務或者外掛時一定要區分其提供的各種服務和外掛的使用場景，例如其提供的【uni-starter快速開發專案模版】幾乎整合了行動端所需的所有基礎功能，使用非常方便，但是其許可協定只允許對接其uniCloud的JS開發伺服器端，不允許對接自己的php、java等其他後臺系統。

  然而，我們的後臺是java，因此，只能自己做一個類似於【uni-starter快速開發專案模版】的快速開發專案模板。好在【uni-starter快速開發專案模板】也是將uni-app提供的一些外掛組合在一起的，儘管不能直接使用uni-starter，但是我們可以使用相同的外掛來實現對應的功能。參考日常行動端開發及uni-starter提供的功能，我們要實現的行動端快速開發專案模板應包含以下基本功能：

  • 許可權認證，獲取token，token過期自動重新整理
  • 登入註冊（使用者名稱密碼登入、手機號驗證碼登入、APP一鍵登入、微信登入、微信小程式登入、微信公眾號內登入）
  • 退出登入、賬號登出
  • 個人資訊修改（修改密碼、忘記密碼、頭像更換、暱稱修改）
  • App升級
  • 訊息推播開關（app）、清除快取（app）
  • 指紋解鎖（app）、人臉解鎖（app）
  • 多語言切換
  • 隱私許可權 授權彈框
  • 許可權引導

一、新建uni-app專案

  原則上你可以使用任何編寫vue的程式碼編輯器來編寫uni-app專案程式碼，但是為了使用uni-app官方提供的便捷性，這裡我們選擇使用官方開發工具HBuilderX來進行uni-app專案的開發。

1、下載HBuilderX並安裝
2、在HBuilderX中依次點選：檔案 -> 新建 -> 專案

  在這裡，我們選擇Hello uni-app專案，其中有豐富的演示和介面模板，如果專案不需要可以進行刪除。填寫專案名稱，選擇Vue版本，自己根據專案情況選擇使用Vue2還是Vue3。因為我們不使用uniCloud，使用的是自己的Java後臺，所以這裡不需要啟用uniCloud。以上資訊填完之後點選建立專案，就可以在專案列表中看到我們剛剛新建的專案了。

3、設定uni-app基礎資訊：雙擊manifest.json檔案可以開啟uniapp基礎資訊設定介面，這裡不詳細描述，具體設定及說明請參考官方檔案


  以上設定完成之後，基本可以在手機模擬器中檢視uni-app的官方範例了。

二、安裝手機模擬器

  在開發過程中，我們需要對介面進行偵錯預覽，這時候需要用到手機模擬器（當然也可以直接插上傳輸線執行到手機預覽），IOS和Android都有對應的手機模擬器，IOS手機模擬器目前只有官方版本，並且需要執行在MAC系統；Android有官方版手機模擬器也有非官方版，但是在之前使用過程中，官方版用著非常卡，需要調整優化很多引數，非常麻煩，反而非官方版，很多是針對手遊做過優化的，使用很方便，這裡使用夜神模擬器為例，介紹HBuilder如何連線手機模擬器預覽偵錯。

1、下載安裝手機模擬器 (到官網下載，這裡不能直接放地址)
2、正常按照步驟安裝模擬器，安裝成功後，啟動並開啟「開發者選項」選單，開啟USB偵錯模式。
  • 開啟模擬器中的設定
  • 「開發者選項」選單 預設不展示，需點選最下面的版本號5次，就會顯示「開發者選項」選單
  • 點選「開發者選項」，開啟「USB偵錯」
3、設定HbuilderX連線手機模擬器

  adb(Android Debug Bridge)是Android SDK中的工具，使用此工具，您可以直接操作和管理Android模擬器或真實的Android裝置。要連線夜神模擬器，我們需要用到夜神模擬器安裝目錄下的nox_adb.exe檔案。

  • 在HbuilderX的選單欄中依次點選：執行 -> 執行到手機或模擬器 -> ADB路徑設定，將adb路徑修改為夜神模擬器安裝目錄下的路徑，我這裡是 D:/Program Files/Nox/bin/nox_adb.exe ，同時修改Android模擬器埠為62001。

  • 設定好之後，連線到模擬器需要執行命令 ./nox_adb.exe connect 127.0.0.1:62001，我們可以在 ./nox_adb.exe檔案所在的目錄建立一個.bat命令的快捷方式，放在桌面，每次使用的時候，雙機此.bat快捷方式即可。


nox_adb.bat內容：

.\nox_adb.exe connect 127.0.0.1:62001
  • 執行了nox_adb.bat命令之後，就可以通過HbuilderX將我們前面新建的uni-app專案執行到手機模擬器中預覽了。依次點選 執行 -> 執行到手機或模擬器 -> 執行到Android App基座。
  • 此時彈出框會顯示我們已連線的模擬器，點選執行，HBuilderX就可以自動打包app釋出到模擬器中執行，並可以在HBuilderX控制檯檢視執行紀錄檔。
  • 點選執行之後，在夜神模擬器中就可以看到uni-app自動安裝並開啟，我們就可以在裡面預覽偵錯我們的移動應用了。

此篇介紹了為何需要自己搭建uni-app快速開發框架、快速開發框架需要包含哪些基本功能、以及如何從零搭建uni-app的開發和測試環境。後續將根據需要的基本功能，介紹每個功能的詳細搭建過程和步驟。

原始碼地址:

Gitee: https://gitee.com/wmz1930/GitEgg

GitHub: https://github.com/wmz1930/GitEgg