寫在前面

聚沙成塔——每天進(jìn)步一點(diǎn)點(diǎn)，大家好我是幾何心涼，不難發(fā)現(xiàn)越來(lái)越多的前端招聘JD中都加入了uni-app 這一項(xiàng)，它也已經(jīng)成為前端開(kāi)發(fā)者不可或缺的一項(xiàng)技能了，所以涼哥為大家推出 聚沙成塔【45天玩轉(zhuǎn)uni-app】專欄，幫助大家對(duì) uni-app 進(jìn)行學(xué)習(xí)和理解，uni-app可以通過(guò)一套代碼多端發(fā)行，相信你掌握本語(yǔ)言后無(wú)論是畢設(shè)還是求職項(xiàng)目都可以說(shuō)是錦上添花，妥妥加分項(xiàng)；快來(lái)訂閱專欄跟著涼哥一起來(lái)感受 uni-app 為開(kāi)發(fā)者帶來(lái)的勁感吧！

上篇文章 聚沙成塔【45天玩轉(zhuǎn)uni-app】初探uni-app 為大家介紹了，uni-app 的發(fā)行者 DCloud 公司的推出背景，以及當(dāng)下跨端開(kāi)發(fā)存在的三大問(wèn)題，uni-app 對(duì)這些問(wèn)題進(jìn)行了哪些規(guī)避及晚上，也為大家介紹了為什么要選擇 uni-app；今天我們就正式的走進(jìn) uni-app 中去，再去學(xué)習(xí)一門語(yǔ)言的時(shí)候，我們勢(shì)必要先找到最適合這門語(yǔ)言的開(kāi)發(fā)工具，要知道找到最佳的開(kāi)發(fā)工具能夠大大的提高我們的開(kāi)發(fā)效率，那么這篇文章就是帶你認(rèn)識(shí)我們 uni-app 最棒的編碼工具——HBuilderX

HBuilderX

HBuilderX，H是HTML的首字母，Builder是構(gòu)造者，X是HBuilder的下一代版本。我們也簡(jiǎn)稱HX。 HX是輕如編輯器、強(qiáng)如IDE的合體版本。HBuilder 是 DCloud 公司研發(fā)的一款產(chǎn)品，它可以開(kāi)發(fā)普通 web 項(xiàng)目，也可以開(kāi)發(fā) DCloud 出品的 uni-app 項(xiàng)目、5+App 項(xiàng)目、wap2app 項(xiàng)目。目前有 500 萬(wàn)開(kāi)發(fā)者在使用 HBuilder。老版的 HBuilder 是紅色 logo，已于 2018 年停止更新。綠色 logo 的 HBuilderX 上面提到了是HBuilder的下一代版本。除了服務(wù)前端技術(shù)棧，它也可以通過(guò)插件支持 php 等其他語(yǔ)言。

HBuilderX 優(yōu)勢(shì)

1、輕巧 僅10余M的綠色發(fā)行包(不含插件) 2、極速 不管是啟動(dòng)速度、大文檔打開(kāi)速度、編碼提示，都極速響應(yīng) C++的架構(gòu)性能遠(yuǎn)超Java或Electron架構(gòu) 3、vue開(kāi)發(fā)強(qiáng)化 HX對(duì)vue做了大量?jī)?yōu)化投入，開(kāi)發(fā)體驗(yàn)遠(yuǎn)超其他開(kāi)發(fā)工具 4、小程序支持 國(guó)外開(kāi)發(fā)工具沒(méi)有對(duì)中國(guó)的小程序開(kāi)發(fā)優(yōu)化，HX可新建uni-app 小程序等項(xiàng)目，為國(guó)人提供更高效工具 5、markdown利器 HX是唯一一個(gè)新建文件默認(rèn)類型是markdown的編輯器，也是對(duì)md支持最強(qiáng)的編輯器 HX為md強(qiáng)化了眾多功能，請(qǐng)務(wù)必點(diǎn)擊【菜單-幫助-markdown語(yǔ)法示例】，快速掌握md及HX的強(qiáng)化技巧！6、清爽護(hù)眼 HX的界面比其他工具更清爽簡(jiǎn)潔，綠柔主題經(jīng)過(guò)科學(xué)的腦疲勞測(cè)試，是最適合人眼長(zhǎng)期觀看的主題界面 7、強(qiáng)大的語(yǔ)法提示 HX是中國(guó)唯一一家擁有自主IDE語(yǔ)法分析引擎的公司，對(duì)前端語(yǔ)言提供準(zhǔn)確的代碼提示和轉(zhuǎn)到定義(Alt+鼠標(biāo)左鍵) 8、高效極客工具 更強(qiáng)大的多光標(biāo)、智能雙擊…讓字處理的效率大幅提升 9、更強(qiáng)的json支持 現(xiàn)代js開(kāi)發(fā)中大量json結(jié)構(gòu)的寫法，HX提供了比其他工具更高效的操作 10、插件市場(chǎng) HBuilderX插件市場(chǎng)擁有豐富的插件，對(duì)于提升工作效率有極大幫助。

HBuilderX 安裝

HBuilderX 開(kāi)發(fā)工具的安裝很簡(jiǎn)單，我們直接訪問(wèn) 點(diǎn)擊這里進(jìn)入官網(wǎng)進(jìn) 行下載安裝，大家要按照自己的系統(tǒng)和配置選擇對(duì)應(yīng)的包進(jìn)行下載即可；博主的電腦是蘋果的，安裝起來(lái)更是非常絲滑，直接下載下來(lái)一個(gè)拖拽就搞定了，windowns 的伙伴可能需要選中下載的zip包，點(diǎn)擊右鍵菜單，點(diǎn)擊解壓到當(dāng)前文件夾進(jìn)入解壓后的文件夾，找到HBuilderX.exe，直接點(diǎn)擊打開(kāi)。也不是很麻煩哈；

整體就是流水式安裝，安裝過(guò)程中非常順暢沒(méi)有特別的點(diǎn)，如果大家在安裝中遇到任何問(wèn)題可以在文末找到我進(jìn)行咨詢；HBuilderX，首次啟動(dòng)后，您會(huì)看到一個(gè)選擇窗口，您可以在此選擇您喜歡的主題、快捷鍵。點(diǎn)擊【開(kāi)始體驗(yàn)】按鈕后，您會(huì)看到一個(gè)《HBuilderX自述文件》，簡(jiǎn)單介紹了HBuilderX的特性，點(diǎn)擊標(biāo)簽卡上的x可以關(guān)閉此文件。這款編程軟件的功能比較多，這里博主就不展開(kāi)為大家一一介紹了，我們后面用到哪些功能，在給大家單獨(dú)介紹，下面就跟著博主跑起來(lái)第一個(gè)項(xiàng)目體驗(yàn)一下吧，

uni-app 初體驗(yàn)

上面我們將工具安裝好了，就讓我們來(lái)新建并啟動(dòng)我們的第一個(gè)項(xiàng)目吧！打開(kāi)我們的編輯器=》點(diǎn)擊右上角的文件=》新建=》項(xiàng)目 會(huì)彈出框讓我們配置進(jìn)行項(xiàng)目創(chuàng)建；

我們可以看出這些配置還是滿全面的，我們可以從左側(cè)選擇自己要?jiǎng)?chuàng)建的項(xiàng)目類型，為首的就是我們的 uni-app ，第二個(gè)是 wap2app 這個(gè)大概就是類似于套殼的感覺(jué)，就是我們可以將一個(gè)上線的項(xiàng)目 也就是放在服務(wù)器上的項(xiàng)目 然后將首頁(yè)地址通過(guò) wap2app 打包成 apk，這樣一來(lái)我們看似是一個(gè)app，實(shí)則我們的資源都是在服務(wù)器上的；第三個(gè) H5+app 比較經(jīng)典的前端可以開(kāi)發(fā) ios、安卓的技術(shù)棧，可以通過(guò) js 來(lái)調(diào)用手機(jī)原生內(nèi)容；下面我們還可以通過(guò)代碼倉(cāng)庫(kù)直接導(dǎo)入項(xiàng)目；

在這里我們就直接選擇 uni-app 右面需要我們填寫項(xiàng)目名稱，選擇模板，我們可以任意選擇比較適合自己的，或者自己比較嘗試的，下面還會(huì)讓我們選擇Vue 的版本，這里也是根據(jù)自己的掌握情況來(lái)，是否啟用 uniCloud 這個(gè)就類似于微信小程序的云函數(shù)、云存儲(chǔ)，在這里我們就先不選中，等后面我會(huì)為大家介紹到；那再這里我就起名叫 JHXL_demo 模版我就選擇第一個(gè)默認(rèn)模板 vue2版本 然后不啟用 uniCloud 進(jìn)行創(chuàng)建；

我們的一個(gè)項(xiàng)目就創(chuàng)建好了，大家可以點(diǎn)開(kāi)目錄看一看你對(duì)里面的目錄結(jié)構(gòu)是否熟悉呢，可能接觸過(guò)Vue 或者 小程序的朋友并不陌生，也可能里面有些你是沒(méi)有見(jiàn)過(guò)的，不管你認(rèn)識(shí)多少都沒(méi)有關(guān)系，我們下一篇會(huì)為大家介紹每個(gè)文件是做什么的；我們既然已經(jīng)創(chuàng)建好的項(xiàng)目，那我們下一步就先將它跑起來(lái)吧！如下圖我們點(diǎn)擊運(yùn)行=》運(yùn)行到瀏覽器=》我們選擇Chrome

點(diǎn)擊后我們會(huì)發(fā)現(xiàn)下面多了一個(gè)終端，顯示正在編譯，如果你跟博主一樣是第一次編譯，那你也會(huì)出現(xiàn)下面這種情況，這樣我們重復(fù)一下上面的運(yùn)行步驟即可，這是說(shuō)明我們的 HBuilderX 剛剛安裝好編譯器

我們發(fā)現(xiàn)上面我們的項(xiàng)目就順利的跑在了瀏覽器上；下面呢來(lái)為大家展示一下我們將項(xiàng)目跑到微信小程序端；這里有個(gè)點(diǎn)哈，如果你想跑到小程序端需要你有小程序開(kāi)發(fā)工具，當(dāng)然這些都是不收費(fèi)了而且涼哥之前寫過(guò)一篇簡(jiǎn)單的教程 點(diǎn)擊這里 安裝微信小程序開(kāi)發(fā)工具，只需要你按照文檔幾分鐘安裝好即可；下面呢 展示我們的 uni-app 如何運(yùn)行到小程序上非常簡(jiǎn)單；點(diǎn)擊運(yùn)行=》運(yùn)行到小程序模擬器=》微信開(kāi)發(fā)者工具點(diǎn)擊即可；當(dāng)然這里展示的是微信小程序，其他的小程序你就選擇對(duì)應(yīng)的開(kāi)發(fā)工具即可

點(diǎn)擊后你會(huì)發(fā)現(xiàn)下面除了剛才的 H5 終端，現(xiàn)在又多了一個(gè)小程序終端，隨后編譯成功后，微信開(kāi)發(fā)者工具也自動(dòng)被彈出來(lái)了；

上面為大家展示了 uni-app 項(xiàng)目分別跑在 瀏覽器、微信小程序中，我們運(yùn)行到真機(jī)中 也是一樣的效果大家可以，首先大家用數(shù)據(jù)線連接手機(jī)和電腦；點(diǎn)擊運(yùn)行=》運(yùn)行到手機(jī)或模擬器=》選擇蘋果或者安卓設(shè)備即可；

點(diǎn)擊后會(huì)出現(xiàn)上面的彈窗如果你的彈窗中沒(méi)有你的設(shè)備，可以去排查安卓手機(jī)收否開(kāi)啟了開(kāi)發(fā)者模式；開(kāi)發(fā)者模式如何開(kāi)啟？很簡(jiǎn)單 百度一下就出來(lái)了，如果出現(xiàn)下面的窗口我們就點(diǎn)擊運(yùn)行即可，一切都是默認(rèn)的選項(xiàng)就行；運(yùn)行后下面的終端又會(huì)多了你的真機(jī)設(shè)備；那么如果你的手機(jī)是首次運(yùn)行，他需要在你手機(jī)上安裝一個(gè)基座，其實(shí)就是一個(gè)app，那么他的運(yùn)行是基于這個(gè) app 來(lái)的，基座安裝成功后他會(huì)提示重新運(yùn)行一下真機(jī)即可；

寫在最后

到這里你是否感受到了 uni-app 的一套代碼多端發(fā)行的勁爆感呢？大家可以自行嘗試更多的端設(shè)備的效果，我們可以看出 uni-app 在跨端上確實(shí)做的非常棒，目前的幾款設(shè)備的運(yùn)行都是完全一致的，沒(méi)有出現(xiàn)任何設(shè)備差異；如果你覺(jué)得本篇文章對(duì)你有幫助你可以訂閱本專欄；相信你掌握本語(yǔ)言后無(wú)論是畢設(shè)還是求職項(xiàng)目都可以說(shuō)是錦上添花，妥妥加分項(xiàng)；快來(lái)訂閱專欄跟著涼哥一起來(lái)感受 uni-app 為開(kāi)發(fā)者帶來(lái)的勁感吧！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-422155.html

到了這里，關(guān)于【第二趴】uni-app開(kāi)發(fā)工具（手把手帶你安裝HBuilderX、搭建第一個(gè)多端項(xiàng)目初體驗(yàn)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！