天天看點

「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

  近年來uni-app發展勢頭迅猛,隻要會vue.js,就可以開發一套代碼,釋出移動應用到iOS、Android、Web(響應式)、以及各種小程式(微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶)、快應用等多個平台。憑借着此跨平台的特性,吸引了大批公司和開發者的青睐,據官網顯示目前其有900萬開發者、數百萬應用、12億手機端月活使用者、數千款uni-app插件。

  正如優秀的軟體設計一樣,uni-app把一些移動端常用的功能做成了獨立的服務或者插件,我們在使用的時候隻需要選擇使用即可。但是在使用這些服務或者插件時一定要區分其提供的各種服務和插件的使用場景,例如其提供的【uni-starter快速開發項目模版】幾乎內建了移動端所需的所有基礎功能,使用非常友善,但是其許可協定隻允許對接其uniCloud的JS開發服務端,不允許對接自己的php、java等其他背景系統。

「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

  然而,我們的背景是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中依次點選:檔案 -> 建立 -> 項目

「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

  在這裡,我們選擇Hello uni-app項目,其中有豐富的示範和接口模闆,如果項目不需要可以進行删除。填寫項目名稱,選擇Vue版本,自己根據項目情況選擇使用Vue2還是Vue3。因為我們不使用uniCloud,使用的是自己的Java背景,是以這裡不需要啟用uniCloud。以上資訊填完之後點選建立項目,就可以在項目清單中看到我們剛剛建立的項目了。

「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

3、配置uni-app基礎資訊:輕按兩下manifest.json檔案可以打開uniapp基礎資訊配置界面,這裡不較長的描述,具體配置及說明請參考官方文檔

「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

  以上配置完成之後,基本可以在手機模拟器中檢視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快捷方式即可。
「SpringCloud」(四十六)uni-app移動端開發架構-環境搭建

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的開發和測試環境。後續将根據需要的基本功能,介紹每個功能的詳細搭建過程和步驟。

源碼位址:

GitEgg: GitEgg 是一款開源免費的企業級微服務應用開發架構,旨在整合目前主流穩定的開源技術架構,內建常用的最佳項目解決方案,實作可直接使用的微服務快速開發架構。

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