??近年來uni-app發(fā)展勢(shì)頭迅猛，只要會(huì)vue.js环壤，就可以開發(fā)一套代碼，發(fā)布移動(dòng)應(yīng)用到iOS钞诡、Android郑现、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）荧降、快應(yīng)用等多個(gè)平臺(tái)接箫。憑借著此跨平臺(tái)的特性，吸引了大批公司和開發(fā)者的青睞朵诫，據(jù)官網(wǎng)顯示目前其有900萬開發(fā)者辛友、數(shù)百萬應(yīng)用、12億手機(jī)端月活用戶剪返、數(shù)千款uni-app插件废累。
??正如優(yōu)秀的軟件設(shè)計(jì)一樣，uni-app把一些移動(dòng)端常用的功能做成了獨(dú)立的服務(wù)或者插件随夸，我們?cè)谑褂玫臅r(shí)候只需要選擇使用即可九默。但是在使用這些服務(wù)或者插件時(shí)一定要區(qū)分其提供的各種服務(wù)和插件的使用場(chǎng)景，例如其提供的【uni-starter快速開發(fā)項(xiàng)目模版】幾乎集成了移動(dòng)端所需的所有基礎(chǔ)功能宾毒，使用非常方便驼修，但是其許可協(xié)議只允許對(duì)接其uniCloud的JS開發(fā)服務(wù)端殿遂，不允許對(duì)接自己的php、java等其他后臺(tái)系統(tǒng)乙各。
??然而墨礁，我們的后臺(tái)是java，因此耳峦，只能自己做一個(gè)類似于【uni-starter快速開發(fā)項(xiàng)目模板】的快速開發(fā)項(xiàng)目模板恩静。好在【uni-starter快速開發(fā)項(xiàng)目模版】也是將uni-app提供的一些插件組合在一起的，盡管不能直接使用uni-starter蹲坷，但是我們可以使用相同的插件來實(shí)現(xiàn)對(duì)應(yīng)的功能驶乾。參考日常移動(dòng)端開發(fā)及uni-starter提供的功能，我們要實(shí)現(xiàn)的移動(dòng)端快速開發(fā)項(xiàng)目模板應(yīng)包含以下基本功能：
- 權(quán)限認(rèn)證循签，獲取token级乐，token過期自動(dòng)刷新
- 登錄注冊(cè)（用戶名密碼登錄、手機(jī)號(hào)驗(yàn)證碼登錄县匠、APP一鍵登錄风科、微信登錄、微信小程序登錄乞旦、微信公眾號(hào)內(nèi)登錄）
- 退出登錄贼穆、賬號(hào)注銷
- 個(gè)人信息修改（修改密碼、忘記密碼兰粉、頭像更換故痊、昵稱修改）
- App升級(jí)
- 消息推送開關(guān)（app）、清除緩存（app）
- 指紋解鎖（app）亲桦、人臉解鎖（app）
- 多語言切換
- 隱私權(quán)限 授權(quán)彈框
- 權(quán)限引導(dǎo)
一崖蜜、新建uni-app項(xiàng)目
??原則上你可以使用任何編寫vue的代碼編輯器來編寫uni-app項(xiàng)目代碼，但是為了使用uni-app官方提供的便捷性客峭，這里我們選擇使用官方開發(fā)工具HBuilderX來進(jìn)行uni-app項(xiàng)目的開發(fā)豫领。
1、下載HBuilderX并安裝
2舔琅、在HBuilderX中依次點(diǎn)擊：文件 -> 新建 -> 項(xiàng)目
??在這里等恐，我們選擇Hello uni-app項(xiàng)目，其中有豐富的演示和接口模板备蚓，如果項(xiàng)目不需要可以進(jìn)行刪除课蔬。填寫項(xiàng)目名稱，選擇Vue版本郊尝，自己根據(jù)項(xiàng)目情況選擇使用Vue2還是Vue3二跋。因?yàn)槲覀儾皇褂胾niCloud，使用的是自己的Java后臺(tái)流昏，所以這里不需要啟用uniCloud扎即。以上信息填完之后點(diǎn)擊創(chuàng)建項(xiàng)目吞获，就可以在項(xiàng)目列表中看到我們剛剛新建的項(xiàng)目了。
3谚鄙、配置uni-app基礎(chǔ)信息：雙擊manifest.json文件可以打開uniapp基礎(chǔ)信息配置界面各拷，這里不詳細(xì)描述，具體配置及說明請(qǐng)參考官方文檔
??以上配置完成之后闷营，基本可以在手機(jī)模擬器中查看uni-app的官方示例了烤黍。
二、安裝手機(jī)模擬器
??在開發(fā)過程中傻盟，我們需要對(duì)界面進(jìn)行調(diào)試預(yù)覽速蕊，這時(shí)候需要用到手機(jī)模擬器（當(dāng)然也可以直接插上數(shù)據(jù)線運(yùn)行到手機(jī)預(yù)覽），IOS和Android都有對(duì)應(yīng)的手機(jī)模擬器莫杈，IOS手機(jī)模擬器目前只有官方版本互例，并且需要運(yùn)行在MAC系統(tǒng)；Android有官方版手機(jī)模擬器也有非官方版筝闹，但是在之前使用過程中，官方版用著非承裙猓卡关顷，需要調(diào)整優(yōu)化很多參數(shù)，非常麻煩武福，反而非官方版议双，很多是針對(duì)手游做過優(yōu)化的，使用很方便捉片，這里使用夜神模擬器為例平痰，介紹HBuilder如何連接手機(jī)模擬器預(yù)覽調(diào)試。
1伍纫、下載安裝手機(jī)模擬器 (到官網(wǎng)下載宗雇，這里不能直接放地址)
2、正常按照步驟安裝模擬器莹规，安裝成功后赔蒲，啟動(dòng)并開啟“開發(fā)者選項(xiàng)”菜單，打開USB調(diào)試模式良漱。
-
打開模擬器中的設(shè)置
image.png -
“開發(fā)者選項(xiàng)”菜單 默認(rèn)不展示舞虱，需點(diǎn)擊最下面的版本號(hào)5次，就會(huì)顯示“開發(fā)者選項(xiàng)”菜單
image.png -
點(diǎn)擊“開發(fā)者選項(xiàng)”母市，開啟“USB調(diào)試”
image.png
3矾兜、配置HbuilderX連接手機(jī)模擬器
??adb(Android Debug Bridge)是Android SDK中的工具，使用此工具患久，您可以直接操作和管理Android模擬器或真實(shí)的Android設(shè)備椅寺。要連接夜神模擬器浑槽，我們需要用到夜神模擬器安裝目錄下的nox_adb.exe文件。
-
在HbuilderX的菜單欄中依次點(diǎn)擊：運(yùn)行 -> 運(yùn)行到手機(jī)或模擬器 -> ADB路徑設(shè)置配并，將adb路徑修改為夜神模擬器安裝目錄下的路徑括荡，我這里是 D:/Program Files/Nox/bin/nox_adb.exe ，同時(shí)修改Android模擬器端口為62001溉旋。
image.png
image.png - 配置好之后畸冲，連接到模擬器需要執(zhí)行命令 ./nox_adb.exe connect 127.0.0.1:62001，我們可以在 ./nox_adb.exe文件所在的目錄建立一個(gè).bat命令的快捷方式观腊，放在桌面邑闲，每次使用的時(shí)候，雙機(jī)此.bat快捷方式即可梧油。
nox_adb.bat內(nèi)容：
.\nox_adb.exe connect 127.0.0.1:62001
-
運(yùn)行了nox_adb.bat命令之后苫耸，就可以通過HbuilderX將我們前面新建的uni-app項(xiàng)目運(yùn)行到手機(jī)模擬器中預(yù)覽了。依次點(diǎn)擊 運(yùn)行 -> 運(yùn)行到手機(jī)或模擬器 -> 運(yùn)行到Android App基座儡陨。
image.png -
此時(shí)彈出框會(huì)顯示我們已連接的模擬器褪子，點(diǎn)擊運(yùn)行，HBuilderX就可以自動(dòng)打包app發(fā)布到模擬器中運(yùn)行骗村，并可以在HBuilderX控制臺(tái)查看運(yùn)行日志嫌褪。
image.png -
點(diǎn)擊運(yùn)行之后，在夜神模擬器中就可以看到uni-app自動(dòng)安裝并打開胚股，我們就可以在里面預(yù)覽調(diào)試我們的移動(dòng)應(yīng)用了笼痛。
image.png
??此篇介紹了為何需要自己搭建uni-app快速開發(fā)框架、快速開發(fā)框架需要包含哪些基本功能琅拌、以及如何從零搭建uni-app的開發(fā)和測(cè)試環(huán)境缨伊。后續(xù)將根據(jù)需要的基本功能，介紹每個(gè)功能的詳細(xì)搭建過程和步驟进宝。
GitEgg-Cloud是一款基于SpringCloud整合搭建的企業(yè)級(jí)微服務(wù)應(yīng)用開發(fā)框架刻坊，開源項(xiàng)目地址:
Gitee: https://gitee.com/wmz1930/GitEgg
GitHub: https://github.com/wmz1930/GitEgg
歡迎感興趣的小伙伴Star支持一下。
