俗話說工欲善其事，必先利其器，作為一名程序員互例，開發(fā)軟件和開發(fā)環(huán)境是我們進行軟件開發(fā)的必要條件。但是對于很多新入門的朋友來說筝闹，安裝開發(fā)環(huán)境和配置環(huán)境變量媳叨，通常把大多數人攔在門外，所以這篇博客关顷，咱們先來介紹一下怎么安裝小程序開發(fā)環(huán)境和配置環(huán)境變量糊秆。
1、開發(fā)軟件和環(huán)境
- node.js
Node.js 是一個開源和跨平臺的 JavaScript 運行時環(huán)境解寝。 它幾乎是任何類型項目的流行工具扩然！
Node.js 在瀏覽器之外運行 V8 JavaScript 引擎（Google Chrome 的內核）艘儒。 這使得 Node.js 的性能非常好聋伦。
Node.js 應用程序在單個進程中運行，無需為每個請求創(chuàng)建新的線程界睁。 Node.js 在其標準庫中提供了一組異步的 I/O 原語觉增，以防止 JavaScript 代碼阻塞，通常翻斟，Node.js 中的庫是使用非阻塞范式編寫的逾礁，使得阻塞行為成為異常而不是常態(tài)。
- 微信開發(fā)者工具
在原有的公眾號網頁調試工具的基礎上访惜，推出了全新的 微信開發(fā)者工具嘹履，集成了公眾號網頁調試和小程序調試兩種開發(fā)模式。
使用公眾號網頁調試债热，開發(fā)者可以調試微信網頁授權和微信JS-SDK
使用小程序調試砾嫉，開發(fā)者可以完成小程序的 API
和頁面的開發(fā)調試、代碼查看和編輯窒篱、小程序預覽和發(fā)布等功能焕刮。
- HBuilderX
HBuilderX是國產的一個編輯器，非常好用墙杯，咱們主要是用來編輯代碼和開發(fā)軟件配并。
1、輕巧 僅10余M的綠色發(fā)行包(不含插件)高镐。
2溉旋、極速 不管是啟動速度、大文檔打開速度嫉髓、編碼提示低滩，都極速響應 召夹。
3、 vue開發(fā)強化恕沫，HX對vue做了大量優(yōu)化投入监憎，開發(fā)體驗遠超其他開發(fā)工具 詳見。
對中國的小程序開發(fā)優(yōu)化婶溯，HX可新建uni-app小程序等項目鲸阔，為國人提供更高效工具， markdown利器迄委。
5褐筛、HX是唯一一個新建文件默認類型是markdown的編輯器，也是對md支持最強的編輯器 HX為md強化了眾多功能叙身。
6渔扎、HX的界面比其他工具更清爽簡潔，綠柔主題經過科學的腦疲勞測試信轿，是最適合人眼長期觀看的主題界面晃痴。 強大的語法提示。
7财忽、HX是中國唯一一家擁有自主IDE語法分析引擎的公司倘核，對前端語言提供準確的代碼提示和轉到定義(Alt+鼠標左鍵)。
高效極客工具即彪。更強大的多光標紧唱、智能雙擊...讓字處理的效率大幅提升，更強的json支持隶校。
9漏益、現代js開發(fā)中大量json結構的寫法，HX提供了比其他工具更高效的操作 深胳。
10绰疤、 C++的架構性能遠超Java或Electron架構。
2稠屠、安裝node.js
第一步峦睡，咱們先把node.js的安裝包下載下來
下載地址：node.js
接著按下圖所示，依次點擊next的按鈕
[圖片上傳失敗...(image-6cdd9e-1656236565275)]
[圖片上傳失敗...(image-c53038-1656236565275)]
這一步是選擇安裝目錄权埠，我一般習慣安裝在D盤上榨了，大家可以根據自己的需要選擇安裝路徑
[圖片上傳失敗...(image-e3cd70-1656236565275)]
[圖片上傳失敗...(image-bedd85-1656236565275)]
[圖片上傳失敗...(image-eff337-1656236565275)]
這一步是最后一步，直接點擊installl按鈕即可安裝
[圖片上傳失敗...(image-b0af0-1656236565275)]
當出現這個頁面的時候攘蔽，說明你已經把node.js安裝成功了龙屉，然后點擊finish結束
[圖片上傳失敗...(image-df2b06-1656236565275)]
3、安裝微信開發(fā)者工具
咱們先微信官網把微信開發(fā)者工具安裝包下載下來
下載地址：微信開發(fā)者工具
如下圖所示依次點擊下一步安裝
[圖片上傳失敗...(image-96a9dc-1656236565275)]
[圖片上傳失敗...(image-9a1533-1656236565275)]
這里是選擇微信開發(fā)者工具安裝目錄，我還是習慣了安裝在D盤转捕，大家根據自己的需要選擇
[圖片上傳失敗...(image-2a2d54-1656236565275)]
最后點擊完成即可將微信開發(fā)者工具安裝成功
[圖片上傳失敗...(image-cafe1a-1656236565275)]
4作岖、安裝HBuilderX
HBuilderX的安裝就比較簡單了，直接在官網將他的壓縮包下載下來五芝，然后解壓到對應目錄即可使用
下載地址：HBuilderX
[圖片上傳失敗...(image-40c81d-1656236565275)]
[圖片上傳失敗...(image-811de8-1656236565275)]
5痘儡、驗證以下是否所有軟件都安裝成功
這一步主要是包括一些環(huán)境變量的配置，同時測試咱們的環(huán)境和軟件是否都能正常使用枢步。
咱們的開發(fā)流程主要是在HBuilderX上邊寫代碼沉删，然后通過微信開發(fā)者工具進行調試和上傳代碼到微信公眾平臺，最后進行發(fā)布醉途。
雙擊打開微信開發(fā)者工具和HBuilderX頁面如下矾瑰，然后咱們用自己的微信掃描該二維碼登錄微信開發(fā)者工具
[圖片上傳失敗...(image-96f186-1656236565275)]
登錄成功的界面如下圖所示
[圖片上傳失敗...(image-77d9b6-1656236565275)]
接著咱們配置一下微信開發(fā)者工具的服務端口，主要是給HBuilderX進行調用
[圖片上傳失敗...(image-4cc88f-1656236565275)]
我們可以導入一個測試項目進行測試一下隘擎，點擊下載戀愛話術小程序,然后點擊如下圖所示的運行到小程序
[圖片上傳失敗...(image-c40c69-1656236565275)]
第一次使用的時候需要選擇一下微信開發(fā)者工具的安裝目錄殴穴，咱們正常選擇即可
[圖片上傳失敗...(image-985d50-1656236565275)]
因為是第一次編譯，所以會下載一些必須的插件货葬，只要慢慢等待即可
[圖片上傳失敗...(image-10e5b6-1656236565275)]
當插件下載完成之后采幌，在HBuilderX再次點擊運行到小程序，然后在微信開發(fā)者工具上面即可出現咱們測試項目的頁面宝惰，當到達這一步植榕，就說明咱們的軟件安裝和環(huán)境變量配置已經圓滿結束再沧。
[圖片上傳失敗...(image-58d33f-1656236565275)]
