1.3 HBuilderX

HBuilderX是通用的前端開發工具，且為uni-app做了特別強化，是uni-app官方推薦的開發工具。本節介紹HBuilderX編輯器的安裝和使用方法。

1.3.1 下載和安裝HBuilderX

HBuilderX采用可視化的安裝方式，安裝比較簡單。HBuilderX內置相關開發所需環境，無須配置Node.js等相關開發環境，可以直接使用。官方IDE下載地址見“資源文件\網址索引.docx”。

如果下載的是App開發版的HBuilderX，則不需要安裝其他插件，可以直接使用；如果下載的是標準版的HBuilderX，在運行或發行uni-app時會提示安裝uni-app插件，插件安裝完成后才能使用。

1.3.2 創建uni-app項目

創建項目是開發的第一步，使用HBuilderX創建uni-app項目很容易，具體步驟如下。

步驟01 選擇【文件】→【新建】→【項目】選項，如圖1-7所示。

溫馨提示

uni-app自帶的模板有Hello uni-app ，是官方的組件和API示例；還有一個重要模板是uni-ui，內置大量常用組件，日常開發推薦使用該模板。

步驟02 在彈出的【新建項目】對話框中選擇【uni-app】類型，并在輸入欄中輸入工程名【hello-uniapp】；單擊【瀏覽】按鈕，選擇工程存放地址；選擇模板【uni-ui項目】，單擊【創建】按鈕，即可成功創建項目，如圖1-8所示。

1.3.3 多端運行程序

項目創建完成后即可運行。uni-app項目可以在多個平臺上運行，這里稱為多端運行。多端運行主要有以下幾種類型。

（1）瀏覽器運行：進入hello-uniapp項目，選擇【運行】→【運行到瀏覽器】選項，在彈出的子菜單中選擇需要運行的瀏覽器，這里選擇Chrome瀏覽器，如圖1-9所示，即可在瀏覽器中體驗uni-app的H5版。

（2）真機運行：通過USB將手機連接到計算機，開啟手機USB調試模式，進入hello-uniapp項目。選擇【運行】→【運行到手機或模擬器】選項，在彈出的子菜單中選擇運行的設備，即可在該設備中體驗uni-app，如圖1-10所示。

如果無法識別手機，可以選擇【運行】→【運行到手機或模擬器】→【真機運行常見故障排除指南】選項進行故障排查。

（3）在微信開發者工具里運行：進入hello-uniapp項目，選擇【運行】→【運行到小程序模擬器】→【微信開發者工具】選項，即可在微信開發者工具中體驗uni-app，如圖1-11所示。

溫馨提示

如果是第一次使用微信開發者工具，需要先配置小程序IDE的相關路徑，才能成功運行。圖1-12所示為在輸入框中輸入微信開發者工具的安裝路徑。若HBuilderX不能正常啟動微信開發者工具，則需要開發者手動啟動，然后將uni-app生成小程序工程的路徑復制到微信開發者工具中，再在HBuilderX中開發，在微信開發者工具中即可看到實時效果。

（4）在支付寶、百度、字節跳動、360、快應用等其他開發者工具里運行hello-uniapp項目與在微信開發者工具里運行的方法相似，此處不再贅述。

溫馨提示

如果是第一次進行小程序開發，需要配置開發者工具的相關路徑。選擇【運行】→【運行到小程序模擬器】→【運行設置】選項，在彈出的對話框中即可配置相應小程序開發者工具的路徑。

支付寶、百度、字節跳動、360小程序開發者工具不支持直接啟動指定項目并運行，因此開發者工具啟動后，應將HBuilderX控制臺中提示的項目路徑在相應小程序開發者工具中打開。

如果小程序開發者工具自動啟動失敗，應手動啟動小程序開發者工具，將HBuilderX控制臺提示的項目路徑在小程序開發者工具中打開。

運行項目的快捷鍵是【Ctrl+R】。HBuilderX還提供了快捷運行菜單，可以按對應數字鍵快速選擇要運行的設備，如圖1-13所示。

1.3.4 打包發布

項目開發的最后一步是對項目進行打包發布。打包發布包括以下幾種類型。

1. 打包為原生App（云端）

打包為原生App（云端）的操作方便，不需要煩瑣的打包步驟，其打包流程如下。

步驟01 在HBuilderX工具欄中選擇【發行】→【原生App-云打包】選項，如圖1-14所示。

步驟02 出現圖1-15所示的界面，直接單擊右下角的【打包】按鈕即可。

2. 打包為原生App（離線）

如果希望使用xcode或Android studio進行離線打包，則在HBuilderX發行菜單里找到本地打包菜單，生成離線打包資源，然后參考離線打包文檔進行操作（文檔網址見“資源文件\網址索引.docx”）。

在HBuilderX工具欄中選擇【發行】→【原生App-本地打包】→【生成本地打包App資源】選項，如圖1-16所示，即可生成離線打包資源。

3. 發布為H5

如果項目需要在H5端運行，則可以選擇發布為H5，其操作流程如下。

步驟01 在manifest.json可視化界面中進行如圖1-17所示的配置（若發行在網站根目錄，可不配置應用基礎路徑），此時發行網站路徑是“www.***.com/h5”。

步驟02 在HBuilderX工具欄中選擇【發行】→【網站-H5手機版（僅適用于uni-app）】選項，如圖1-18所示，即可生成H5的相關資源文件，文件保存于unpackage目錄。

溫馨提示

以history模式發行需要后臺配置支持。若使用傳統服務器部署，建議在服務器端開啟gzip壓縮。

4. 發布為微信小程序

如果想在微信小程序上運行uni-app項目，將項目發布為微信小程序即可，uni-app會將代碼自動轉換成小程序項目代碼，其操作流程如下。

步驟01 申請微信小程序AppID，具體步驟參考微信小程序官方教程。

步驟02 在HBuilderX工具欄中選擇【發行】→【小程序-微信（僅適用于uni-app）】選項，在彈出的【微信小程序發行】對話框中對應的文本框內輸入小程序名稱和AppID，單擊【發行】按鈕，即可在工程目錄unpackage/dist/build/mp-weixin中生成微信小程序項目代碼，如圖1-19所示。

步驟03 在微信開發者工具中導入生成的微信小程序項目，測試項目代碼運行正常后，單擊【上傳】按鈕，依次單擊【提交審核】→【提交發布】按鈕，即可完成項目發布，如圖1-20所示。

5. 其他發布

發布為支付寶、百度、字節跳動、360、快應用、QQ小程序等操作和發布為微信小程序類似，此處不再贅述。

溫馨提示

發布的快捷鍵是【Ctrl+U】，按下快捷鍵后會顯示快速發布菜單，按數字鍵選擇對應的發布方式。