1.軟件安裝
開(kāi)始之前，開(kāi)發(fā)者需先下載安裝如下工具：
- HBuilderX：官方IDE下載地址
下面開(kāi)發(fā)工具根據(jù)需求進(jìn)行安裝： - 微信小程序開(kāi)發(fā)工具安裝 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
- 支付寶小程序開(kāi)發(fā)工具安裝 https://docs.alipay.com/mini/ide/download
- 百度小程序開(kāi)發(fā)工具安裝 https://smartprogram.baidu.com/docs/develop/devtools/show_sur/
- 字節(jié)跳動(dòng)小程序開(kāi)發(fā)工具 https://developer.toutiao.com/docs/devtool/versionUpdate.html
2.HBuilderX 運(yùn)行環(huán)境配置
點(diǎn)擊工具欄里的工具 -> 設(shè)置->運(yùn)行配置：
關(guān)于運(yùn)行配置下面分別有手機(jī)/模擬器運(yùn)行配置、瀏覽器運(yùn)行配置、小程序運(yùn)行配置三部分，這里對(duì)瀏覽器運(yùn)行配置與小程序運(yùn)行配置做個(gè)簡(jiǎn)單說(shuō)明，至于手機(jī)/模擬器運(yùn)行配置后期更新。
2.1瀏覽器運(yùn)行配置
前提：你安裝了對(duì)應(yīng)的Firefox瀏覽器、Chrome瀏覽器。
-1：在Chrome瀏覽器安裝路徑：填寫(xiě)你Chrome瀏覽器的安裝路徑（到chrome.exe所在 文件夾即可）
-2：在Firefox瀏覽器安裝路徑：填寫(xiě)你Firefox瀏覽器的安裝路徑（到firefox.exe所在 文件夾即可）
配置好之后就可以點(diǎn)擊工具欄里的運(yùn)行 -> 運(yùn)行到瀏覽器，然后選擇對(duì)應(yīng)的瀏覽器即可，如圖所示：
2.2小程序運(yùn)行配置
uni-app是依賴小程序開(kāi)發(fā)工具的，在配置時(shí)需指定小程序開(kāi)發(fā)工具的安裝目錄。
比如此時(shí)我的微信小程序開(kāi)發(fā)工具安裝路徑為：
HBuilderX 中配置為：
同理，百度開(kāi)發(fā)工具路徑、支付寶小程序開(kāi)發(fā)工具、字節(jié)跳動(dòng)小程序開(kāi)發(fā)工具路徑的配置與微信小程序配置方式相同，參照其即可。
3. 編輯器設(shè)置
點(diǎn)擊工具欄里的工具 -> 設(shè)置->編輯器配置：
然后在打開(kāi)的編輯器設(shè)置右側(cè)中，找到【啟用px轉(zhuǎn)upx提示】（uni-app項(xiàng)目生效）,填寫(xiě)px轉(zhuǎn)upx比例。
轉(zhuǎn)換公式：設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1upx / 750upx
（1）：若設(shè)計(jì)稿寬度為640px，元素 A 在設(shè)計(jì)稿上的寬度為100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117upx。
（2）：若設(shè)計(jì)稿寬度為 375px，元素 B 在設(shè)計(jì)稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400upx。
點(diǎn)贊是最好的支持，關(guān)注是最大的鼓勵(lì)。親愛(ài)的朋友，很榮幸在簡(jiǎn)書(shū)遇到您。
