??近年來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
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/519330.html
標籤：其他
上一篇：分享幾個關于Camera的坑