一、環境配置
1.下載HBuilderX
通過HBuilderX可視化界面，HBuilderX內置相關環境，開箱即用，無需配置nodejs
開始之前，開發者需先下載安裝如下工具：
- HBuilderX：官方IDE下載地址
下載App開發版，可開箱即用；如下載標準版，在運行或發行uni-app時，會提示安裝uni-app插件，插件下載完成后方可使用，
如使用cli方式創建專案，可直接下載標準版，因為uni-app編譯插件被安裝到專案下了
2.創建uni-app
在點擊工具列里的檔案->新建->專案：
選擇uni-app型別，輸入專案名，選擇模板，點擊創建，即可成功創建，
uni-app自帶的模板有，Hello uni-app，是官方的組件和API示例，還有一個重要模板是uni ui專案模板，日常開發推薦使用該模板，已內置大量常用組件，
3.運行uni-app
- 瀏覽器運行：進入hello-uniapp專案，點擊工具列的運行->運行到瀏覽器->選擇瀏覽器，即可在瀏覽器里面體驗uni-app的H5版，
- 真機運行：連接手機，開啟USB除錯，進入hello-uniapp專案，點擊工具列的運行->真機運行->選擇運行的設備，即可在該設備里面體驗uni-app，
如手機無法識別，請點擊選單運行-運行到手機或模擬器-真機運行常見故障排查指南，注意當前開發App也需要安裝微信開發者工具， - 在微信開發者工具里運行：進入hello-uniapp專案，點擊工具列的運行->運行到小程式模擬器->微信開發者工具，即可在微信開發者工具里面體驗uni-app，
注意：如果是第一次使用，需要先配置小程式ide的相關路徑，才能運行成功，如下圖，需在輸入框輸入微信開發者工具的安裝路徑，若HBuilderX不能正常啟動微信開發者工具，需要開發者手動啟動，然后將uni-app生成小程式工程的路徑復制到微信開發者工具里面，在HBuilderX里面開發，在微信開發者工具里面就可以看到實時的效果，uni-app或將專案編譯到根目錄的unpackage目錄，
- 在支付寶小程式開發者工具里運行：進入hello-uniapp專案，點擊工具列的運行->運行到小程式模擬器->支付寶小程式開發者工具，即可在支付寶小程式開發者工具里面體驗uni -app，
- 在百度開發者工具里運行：進入hello-uniapp專案，點擊工具列的運行->運行到小程式模擬器->百度開發者工具，即可在百度開發者工具里面體驗uni-app，
- 在位元組跳動開發者工具里運行：進入hello-uniapp專案，點擊工具列的運行->運行到小程式模擬器->位元組跳動開發者工具，即可在位元組跳動開發者工具里面體驗uni -app，
提示
- 如果是第一次使用，需要配置開發工具的相關路徑，請點擊工具列的運行->運行到小程式模擬器->運行設定，配置相應的小程式開發者工具的路徑，
- 支付寶/百度/位元組跳動小程式工具，不支持直接指定專案啟動并運行，因此開發工具啟動后，替換HBuilderX控制臺中提示的專案路徑，在相應的小程式開發者工具中打開，
- 如果自動啟動小程式22
- 】 發工具失敗，請手動啟動小程式開發工具放入HBuilderX控制臺提示的專案路徑，打開專案，
運行的快捷鍵是Ctrl+r，HBuilderX還提供了快捷運行選單，可以按數字快速選擇要運行的設備：
4.目錄結構
一個 uni-app 工程，默認包含如下目錄及檔案：
┌─components uni-app組件目錄
│ └─comp-a.vue 可復用的a組件
├─hybrid 存放本地網頁的目錄，詳見
├─platforms 存放各平臺專用頁面的目錄，詳見
├─pages 業務頁面檔案存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應用參考靜態資源（如圖片、視頻等）的目錄，注意：靜態資源只能存放于此
├─wxcomponents 存放小程式組件的目錄，詳見
├─main.js Vue初始化入口檔案
├─App.vue 應用配置，用來配置App全域樣式以及監聽 應用生命周期
├─manifest.json 配置應用名稱、appid、logo、版本等打包資訊，詳見
└─pages.json 配置頁面路由、導航條、選項卡等頁面類資訊，詳見
5.手機模擬器
下載手機模擬器
MUMU模擬器：https://mumu.163.com/
模擬器埠：
| 手機模擬器的名稱 | 默認埠號 |
| Genymotion模擬器 | 5555 |
| 夜神模擬器 | 62001/52001 |
| 海馬玩模擬器 | 26944 |
| mumu模擬器 | 7555 |
| 天天模擬器 | 6555 |
| 逍遙安卓模擬器 | 21503 |
| BlueStacks 藍疊3模擬器 | 5555 |
| 雷神安卓模擬器 | 5555 |
| 騰訊手游助手 | 5555 |
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/291608.html
標籤：其他
上一篇：CNN入門mnist資料集運行環境搭建（安裝Python，Pycharm,Anaconda,Tensorflow,CNN代碼）