一、 HBuildX的介紹

HBuildX也是DCloud開發(fā)的一款編輯器，和uni-app是同一個(gè)公司開發(fā)的。可想而知，HBuildX對(duì)uni-appa支持程度極高，因此我們也就選用HbuildX作為uni-app開發(fā)的主編輯器。

二、安裝HbuildX

• 官網(wǎng)下載：HBuilderX-高效極客技巧?選擇APP開發(fā)版
• 解壓后即可使用
• 安裝插件：工具=>插件安裝（uni-app(vue2)編譯、uni-app(vue3)編譯、scss/sass編譯）

三、創(chuàng)建第一個(gè)uni-app

• 啟動(dòng)HbuildX，文件=>新建=>項(xiàng)目=>選擇uni-app=>填寫項(xiàng)目名，項(xiàng)目路徑=>選擇項(xiàng)目模板：uni-ui項(xiàng)目=>點(diǎn)擊創(chuàng)建

• 項(xiàng)目結(jié)構(gòu)

  |-- components uni-app組件目錄 |-- pages 頁面目錄 |-- static 存放應(yīng)用引用的本地靜態(tài)資源（如圖片、視頻等）的目錄，注意：靜態(tài)資源只能存放于此 |-- main.js Vue入口文件 |-- App.vue 應(yīng)用全局配置文件 |-- manifest.json 配置應(yīng)用名，打包版本，appid,logo等打包信息的配置文件 |-- pages.json 配置路由，導(dǎo)航條，選項(xiàng)卡等頁面信息文件 |-- index.html 適配vue3 |-- uni.scss uni-app內(nèi)置的常用樣式變量

四、運(yùn)行

1、運(yùn)行到瀏覽器

• 運(yùn)行到chrome瀏覽器：進(jìn)入到uni-app=>運(yùn)行=>運(yùn)行到瀏覽器=>運(yùn)行到chrome瀏覽器
• 運(yùn)行到內(nèi)置瀏覽器：安裝“內(nèi)置瀏覽器插件”=>運(yùn)行=>運(yùn)行到內(nèi)置瀏覽器

2、運(yùn)行到微信小程序

• 安裝微信開發(fā)者工具，地址：穩(wěn)定版 Stable Build | 微信開放文檔
• 打開服務(wù)端口：啟動(dòng)微信開發(fā)者工具，點(diǎn)擊設(shè)置圖標(biāo)=>安全=>打開服務(wù)端口
• 配置微信小程序路徑：打開HbuildX，點(diǎn)擊運(yùn)行=>運(yùn)行到小程序模擬器=>運(yùn)行設(shè)置=>找到小程序運(yùn)行配置下的微信開發(fā)者工具路徑進(jìn)行配置
• 運(yùn)行：打開HbuildX，進(jìn)入項(xiàng)目，點(diǎn)擊運(yùn)行=>運(yùn)行到小程序模擬器=>微信開發(fā)者工具=>微信小程序會(huì)自動(dòng)打開并運(yùn)行項(xiàng)目

3、運(yùn)行到安卓手機(jī)

• 將手機(jī)通過數(shù)據(jù)線連接到計(jì)算機(jī)
• 將手機(jī)設(shè)置為USB調(diào)試模式，不同型號(hào)手機(jī)設(shè)置方式不同，大家可以去搜索一下
• 運(yùn)行：打開HBuildX，進(jìn)入項(xiàng)目，單擊運(yùn)行=>運(yùn)行到手機(jī)或模擬器=>運(yùn)行-設(shè)備:Android-*****
• 運(yùn)行后，手機(jī)會(huì)安裝HBuilder應(yīng)用，安裝完成后，就可以預(yù)覽了。

4、運(yùn)行到蘋果手機(jī)

• Windows電腦連接蘋果手機(jī)，要先安裝iTunes，地址：Apple - Support - Downloads
• 將手機(jī)用數(shù)據(jù)線連接到電腦=>選擇“信任“。
• 打開HBuildX，進(jìn)入項(xiàng)目，單擊運(yùn)行=>手機(jī)運(yùn)行=>選擇iphone設(shè)備，等待編譯完成，就可以預(yù)覽了。

總結(jié)

以上是生活随笔為你收集整理的uni-app开发环境配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。