uni-app開發小程序准備階段

1.軟件安裝

開始之前，開發者需先下載安裝如下工具：

HBuilderX：官方IDE下載地址

下面開發工具根據需求進行安裝：

 

• 微信小程序開發工具安裝 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
• 支付寶小程序開發工具安裝 https://docs.alipay.com/mini/ide/download
• 百度小程序開發工具安裝 https://smartprogram.baidu.com/docs/develop/devtools/show_sur/
• 字節跳動小程序開發工具 https://developer.toutiao.com/docs/devtool/versionUpdate.html

 

2.HBuilderX 運行環境配置

點擊工具欄里的工具 -> 設置->運行配置：
關於運行配置下面分別有手機/模擬器運行配置、瀏覽器運行配置、小程序運行配置三部分，這里對瀏覽器運行配置與小程序運行配置做個簡單說明，至於手機/模擬器運行配置后期更新。

2.1瀏覽器運行配置

前提：你安裝了對應的Firefox瀏覽器、Chrome瀏覽器。
-1：在Chrome瀏覽器安裝路徑：填寫你Chrome瀏覽器的安裝路徑（到chrome.exe所在 文件夾即可）
-2：在Firefox瀏覽器安裝路徑：填寫你Firefox瀏覽器的安裝路徑（到firefox.exe所在 文件夾即可）
配置好之后就可以點擊工具欄里的運行 -> 運行到瀏覽器，然后選擇對應的瀏覽器即可，如圖所示：

2.2小程序運行配置

uni-app是依賴小程序開發工具的，在配置時需指定小程序開發工具的安裝目錄。
比如此時我的微信小程序開發工具安裝路徑為：

HBuilderX 中配置為：

同理，百度開發工具路徑、支付寶小程序開發工具、字節跳動小程序開發工具路徑的配置與微信小程序配置方式相同，參照其即可。

3. 編輯器設置

 

點擊工具欄里的工具 -> 設置->編輯器配置：
然后在打開的編輯器設置右側中，找到【啟用px轉upx提示】（uni-app項目生效）,填寫px轉upx比例。
轉換公式： 設計稿 1px / 設計稿基准寬度 = 框架樣式 1upx / 750upx
（1）：若設計稿寬度為 640px，元素 A 在設計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應該設為： 750 * 100 / 640，結果為： 117upx。
（2）：若設計稿寬度為 375px，元素 B 在設計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應該設為： 750 * 200 / 375，結果為： 400upx。

推薦是最好的支持，關注是最大的鼓勵。親愛的朋友，很榮幸在園子里遇到您。