四十六 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調試模式 。
  • 打開模擬器中的設置
    四十六 SpringCloud微服務實戰——搭建企業級開發框架:【移動開發】整合uni-app搭建移動端快速開發框架-環境搭建

    文章插圖
  • “開發者選項”菜單 默認不展示,需點擊最下面的版本號5次,就會顯示“開發者選項”菜單
    四十六 SpringCloud微服務實戰——搭建企業級開發框架:【移動開發】整合uni-app搭建移動端快速開發框架-環境搭建

    文章插圖
  • 點擊“開發者選項”,開啟“USB調試”
    四十六 SpringCloud微服務實戰——搭建企業級開發框架:【移動開發】整合uni-app搭建移動端快速開發框架-環境搭建

    文章插圖
3、配置HbuilderX連接手機模擬器

推薦閱讀