大家好，我是黑馬騰雲。
這是一個原創系列連載文章，基於企業真實項目案例分享經驗，帶你快速入門uni-app開發！歡迎點擊頭像關注，避免迷路！
前幾天，不少讀者私信諮詢前文中項目案例的種種實現細節，本文先揭曉使用的開發工具。
特別說明：系列文章定位是幫助初學者從入門到實戰，適合零基礎或基礎較差uni-apper。爲了節約時間，高手勿進，可關注後續的實戰部分。
一、項目演示
前文提到的項目是真實上線的商業項目，如果還沒體驗的可以找前一篇文章的入口進入體驗。
貼心的小編也爲你錄好了屏，方便各位看官兒查看。
1、商城項目APP
2、外賣項目小程序
ps：不支持視頻上傳，先不上傳了。
以上項目都包含APP（IOS、Android）、小程序和H5。
看到這個演示，相信大家腦海裏一定有不同的實現方式。那麼，你想到了哪些實現方式呢？
我們考慮的實現方案有很多，對比分析後，最終選擇uni-app多端開發（至於原因前文有提到）。
採取不同的開放方案，對應的開發環境和工具也有所不同。既然選擇了 uni-app 開發，工具自然是採用官方的HBuilderX。
下邊來看看它和其它前端開發工具的一些對比
二、前端工具對比選擇
1、VSCode
微軟發佈的免費跨平臺編輯器，使用的人也是非常多。
VSCode 全稱 Visual Studio Code，現代化輕量級的代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、Git 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢。
2、HBuilderX
HBuilderX（簡稱：HX）是輕量編輯器和強大IDE的完美結合體，是HBuilder的升級版。敏捷的性能，清爽的界面，強大的功能。
國產編輯器，且擁有世界級語法分析引擎，與uni-app出自同一家公司，有很多本地化的天然支持優勢。
HBuilder最大的優勢就是速度比較快，強大的代碼提示和代碼輸入，大大增加了開發者的開發效率。
3、webStorm
對js支持非常好，用的人也非常多（雖然收費，但相信聰明的你一定有辦法，懂得）。
4、Sublime Text
一款代碼編輯器，擁有漂亮的用戶頁面和實用功能，以及多功能插件。功能很多，包括多選擇和多窗口和python api等功能。
5、Bracket
免費、開源且跨平臺的 HTML/CSS/JavaScript 前端WEB集成開發環境IDE。由 Adobe 創建和維護，根據 MIT 許可證發佈，支持 Windows、Linux 以及 OS X 平臺。
當然除了這些，還有一些其它的工具（DreamWeaver等等）也非常優秀。工具本質都是爲開發服務的，因此選擇適合的即可。
接下來演示如何利用HBuilderX來創建一個uni-app項目：
三、HBuilderX創建項目
1、下載安裝
直接去官網下載安裝即可，截至寫文時最新版本爲：3.0.7，本系列開發也是採用此版本。
注意：官方版本更新比較快，如果你的版本不一致，可能軟件界面和功能有些區別。
此係列文章我的開發環境爲windows，如果你用的mac環境，快捷鍵和界面也有一定區別。
安裝過程就不再贅述，按提示一路點擊下一步即可。
如果網速較慢或不方便下載，也可以私信我發你。
2、創建項目
HBuilderX可以創建多種類型的項目，此處以創建基於HTML的Web項目爲例，演示項目創建過程。
- 新建項目
通過菜單欄：文件-新建-項目，或者直接主界面點擊“新建項目”都會彈出如下：“新建項目”界面
如上選擇“普通項目”，輸入項目名稱，選擇存儲位置，點擊“創建”，就會成功創建項目。
- 新建文件
在創建的“test”項目上右鍵-新建-html文件，就可以爲項目添加文件
輸入文件名稱：getstart.html
文件創建成功後，預覽文件
在文件中輸入內容並保存，點擊右上角的“預覽”按鈕，就可以實時預覽修改的內容。
創建項目和添加文件的過程，和其它編輯器或IDE並沒有太大的區別。
3、軟件界面
主界面如上圖，界面比較簡潔，右下角還可以選擇文件的編碼。
4、打開、關閉項目
- 打開項目
菜單：文件-打開目錄，彈出框中選擇對應項目所在的文件夾即可。
- 關閉項目
在項目上右鍵-移除項目或關閉項目。
移除項目會從本地電腦刪除。
關閉項目僅僅是不會展示在項目區，會展示在“已關閉項目”區，右擊已關閉的項目，可以再次打開。
基於以上的Web項目，我們來演示一下HBuilderX的騷操作。
四、HBuilderX初體驗
以下操作，強烈建議對照着打開HBuilderX親自操作一遍，才能達到事半功倍的效果。
1、強大的代碼塊
使用代碼塊，可以減少重複代碼工作量。
打開剛纔的getstart.html文件，刪除裏邊的內容，在英文狀態輸入h字符
根據提示，alt+前邊的數字可以快速插入對應的代碼塊。
alt+9，快速輸入html代碼塊。
怎麼樣？只需要一個鍵就能把html的基礎結構寫好，你還在一個個字符挨着敲嗎？
2、強大的快捷鍵
熟練使用快捷鍵，碼字就像飛一般的感覺。不信你看！！！
一定要跟着敲噢！步驟如下：
-
接着上邊的例子，新建html文件後，當前光標處於title標籤內，此時我們給HTML設置title:hellohbuilder,完成後使用Ctrl+回車在當前的下一行插入空行,並將光標移動到下一行。
-
使用sc代碼塊生成一個script塊來編寫js代碼(輸入sc,回車)
-
使用funn代碼塊編寫一個JS方法helloworld(輸入funn,回車)。此時生成的方法的方法名是選中狀態,我們只需要直接輸入新的方法名helloworld即可，敲擊回車光標會直接跳轉至函數體中。
-
按向下、向下,Ctrl+回車,輸入style回車,生成css代碼區域。定義一個Css類classA：輸入.classA{ 然後回車，輸入font 選擇對應的字體後回車即可。
-
向下鍵跳轉至下一個編輯區域
-
輸入<div 回車，輸入i回車，輸入d1，空格，c回車，回車。
-
ctrl+回車，添加空行
-
divc回車，回車，輸入hellworld。
全程不用鼠標，感覺就像在linux上敲命令。
當然，初次使用肯定記不住這麼多，多敲幾遍就形成條件反射了，實在記不住，可以查看對應的菜單。菜單上都有快捷鍵的提示。
3、強大的js解析引擎提示
js提示html的id
js提示html的tagname
js提示css類名
4、跳轉到class、id、js方法定義處
只需要“alt+左鍵點擊”引用的方法名、ID、CSS類、文件(鏈接、圖片),均可跳轉到引用的地方,跨文件的引用也可以。
演示完畢，接下來再看看具體的一些技巧
五、HBuilderX高效率技巧
1、文件保存
HX默認30秒保存一次文件。
不管是關閉hx，還是斷電、崩潰，臨時文件始終會自動保存，不用擔心丟失。
默認的自動保存不會觸發編譯，只有手動保存（ctrl+s）時纔會。
前端預編譯型語言越來越多，每次保存都觸發編譯比較消耗資源，有了hx，可以專注寫代碼而不需要隔一會按一下ctrl+s，需要編譯時再保存。
2、語法提示
世界級語法分析引擎一直是HBuilder系列產品最大特點。
前端框架衆多，框架的語法提示需要加載單獨的語法提示庫，框架語法提示庫是在頁面的右下角選擇。
框架語法庫是掛在項目下的，一個項目加載了一個框架語法庫後，這個項目下所有js文件或HTML文件都會在代碼助手提示這個框架的語法。
但如果一個文件是單獨從硬盤打開，沒有整項目拖入hx，那麼此時無法加載框架語法庫。
3、代碼助手
hx的代碼助手，可以按alt+數字選擇直接選擇某個項目，類似中文輸入法數字選詞
4、語法幫助
標放到某api處，按下F1，就可跳轉到這個api的官方手冊。目前支持vue、uni-app、5+等api
5、多光標批處理
hx支持多光標，按 ctrl+鼠標左鍵 就可增加一個光標，ctrl+鼠標右鍵 可取消一個光標或選區。
還可以選擇相同詞，ctrl+e 可選中相同的詞做批處理。
6、列選擇
hx的列選擇，是alt+鼠標拖選
7、選擇編碼
當打開一個不認識的文檔時，即hx的無法高亮着色，可以在右下角選擇使用其他編輯器打開。
當打開一個文件編碼錯亂，產生亂碼時，也可以在右下角選擇編碼重新打開。
8、轉到定義
快捷鍵是Alt+d，鼠標操作是alt+左鍵單擊
HBuilderX還有一個特色是轉到定義到分欄，ctrl+alt+左鍵，可以把一個定義處的代碼打開在另一側，方便共同查看
支持切換【Ctrl+鼠標左鍵】或【Alt+鼠標左鍵】進行轉到定義 （菜單【選擇】，最後一個菜單）
當然，快捷鍵可以進行個性化設置，可以修改，因此自己根據個人習慣設置即可，不一定和我的一樣。
9、返回上一次光標位置
在HBuilderX中，Alt+Left或點擊工具欄上的<, 即可回到上一個光標位置。
10、快速打開文件
在頂部工具欄直接搜索工程下的文件名並打開，或者使用快捷鍵ctrl+p。
比較常用的文件，可以在工具欄裏添加到收藏夾。
11、目錄內搜索
項目管理器點右鍵，選：查找字符串(當前目錄)，可在該目錄下所有文件中搜索字符串
以上快捷功能熟悉後，日常開發就可以大大提高效率。
還有一些功能：
比如語法校驗插件、svn/git項目管理插件、預編譯器（less/sass）等，篇幅所限就不展開了，以後有時間再繼續寫。
另外如果有興趣，以後高級篇講講HbuilderX插件的開發，隨心所欲定製擴展你的編輯器功能。
下一篇文章，我們討論下uni-app的MVVM框架思想。
討論時間：
你認爲哪個開發工具最牛X？
600萬開發者的選擇，HBuilderX憑啥？
咱們留言區見！
作者介紹：
黑馬騰雲，碼農、創業者、終身學習者！
樂於分享技術、創業、人生思考。關注我，一起爲人生喝彩！