俗話說工欲善其事，必先利其器，作為一名程序員，開發(fā)軟件和開發(fā)環(huán)境是我們進(jìn)行軟件開發(fā)的必要條件。但是對于很多新入門的朋友來說，安裝開發(fā)環(huán)境和配置環(huán)境變量，通常把大多數(shù)人攔在門外，所以這篇博客，咱們先來介紹一下怎么安裝小程序開發(fā)環(huán)境和配置環(huán)境變量。
1、開發(fā)軟件和環(huán)境
- node.js
Node.js 是一個開源和跨平臺的 JavaScript 運(yùn)行時環(huán)境。 它幾乎是任何類型項目的流行工具！
Node.js 在瀏覽器之外運(yùn)行 V8 JavaScript 引擎（Google Chrome 的內(nèi)核）。 這使得 Node.js 的性能非常好。
Node.js 應(yīng)用程序在單個進(jìn)程中運(yùn)行，無需為每個請求創(chuàng)建新的線程。 Node.js 在其標(biāo)準(zhǔn)庫中提供了一組異步的 I/O 原語，以防止 JavaScript 代碼阻塞，通常，Node.js 中的庫是使用非阻塞范式編寫的，使得阻塞行為成為異常而不是常態(tài)。
- 微信開發(fā)者工具
在原有的公眾號網(wǎng)頁調(diào)試工具的基礎(chǔ)上，推出了全新的 微信開發(fā)者工具，集成了公眾號網(wǎng)頁調(diào)試和小程序調(diào)試兩種開發(fā)模式。
使用公眾號網(wǎng)頁調(diào)試，開發(fā)者可以調(diào)試微信網(wǎng)頁授權(quán)和微信JS-SDK
使用小程序調(diào)試，開發(fā)者可以完成小程序的 API
和頁面的開發(fā)調(diào)試、代碼查看和編輯、小程序預(yù)覽和發(fā)布等功能。
- HBuilderX
HBuilderX是國產(chǎn)的一個編輯器，非常好用，咱們主要是用來編輯代碼和開發(fā)軟件。
1、輕巧 僅10余M的綠色發(fā)行包(不含插件)。
2、極速 不管是啟動速度、大文檔打開速度、編碼提示，都極速響應(yīng) 。
3、 vue開發(fā)強(qiáng)化，HX對vue做了大量優(yōu)化投入，開發(fā)體驗遠(yuǎn)超其他開發(fā)工具 詳見。
對中國的小程序開發(fā)優(yōu)化，HX可新建uni-app小程序等項目，為國人提供更高效工具， markdown利器。
5、HX是唯一一個新建文件默認(rèn)類型是markdown的編輯器，也是對md支持最強(qiáng)的編輯器 HX為md強(qiáng)化了眾多功能。
6、HX的界面比其他工具更清爽簡潔，綠柔主題經(jīng)過科學(xué)的腦疲勞測試，是最適合人眼長期觀看的主題界面。 強(qiáng)大的語法提示。
7、HX是中國唯一一家擁有自主IDE語法分析引擎的公司，對前端語言提供準(zhǔn)確的代碼提示和轉(zhuǎn)到定義(Alt+鼠標(biāo)左鍵)。
高效極客工具。更強(qiáng)大的多光標(biāo)、智能雙擊...讓字處理的效率大幅提升，更強(qiáng)的json支持。
9、現(xiàn)代js開發(fā)中大量json結(jié)構(gòu)的寫法，HX提供了比其他工具更高效的操作 。
10、 C++的架構(gòu)性能遠(yuǎn)超Java或Electron架構(gòu)。
2、安裝node.js
第一步，咱們先把node.js的安裝包下載下來
下載地址：node.js
接著按下圖所示，依次點(diǎn)擊next的按鈕
[圖片上傳失敗...(image-6cdd9e-1656236565275)]
[圖片上傳失敗...(image-c53038-1656236565275)]
這一步是選擇安裝目錄，我一般習(xí)慣安裝在D盤上，大家可以根據(jù)自己的需要選擇安裝路徑
[圖片上傳失敗...(image-e3cd70-1656236565275)]
[圖片上傳失敗...(image-bedd85-1656236565275)]
[圖片上傳失敗...(image-eff337-1656236565275)]
這一步是最后一步，直接點(diǎn)擊installl按鈕即可安裝
[圖片上傳失敗...(image-b0af0-1656236565275)]
當(dāng)出現(xiàn)這個頁面的時候，說明你已經(jīng)把node.js安裝成功了，然后點(diǎn)擊finish結(jié)束
[圖片上傳失敗...(image-df2b06-1656236565275)]
3、安裝微信開發(fā)者工具
咱們先微信官網(wǎng)把微信開發(fā)者工具安裝包下載下來
下載地址：微信開發(fā)者工具
如下圖所示依次點(diǎn)擊下一步安裝
[圖片上傳失敗...(image-96a9dc-1656236565275)]
[圖片上傳失敗...(image-9a1533-1656236565275)]
這里是選擇微信開發(fā)者工具安裝目錄，我還是習(xí)慣了安裝在D盤，大家根據(jù)自己的需要選擇
[圖片上傳失敗...(image-2a2d54-1656236565275)]
最后點(diǎn)擊完成即可將微信開發(fā)者工具安裝成功
[圖片上傳失敗...(image-cafe1a-1656236565275)]
4、安裝HBuilderX
HBuilderX的安裝就比較簡單了，直接在官網(wǎng)將他的壓縮包下載下來，然后解壓到對應(yīng)目錄即可使用
下載地址：HBuilderX
[圖片上傳失敗...(image-40c81d-1656236565275)]
[圖片上傳失敗...(image-811de8-1656236565275)]
5、驗證以下是否所有軟件都安裝成功
這一步主要是包括一些環(huán)境變量的配置，同時測試咱們的環(huán)境和軟件是否都能正常使用。
咱們的開發(fā)流程主要是在HBuilderX上邊寫代碼，然后通過微信開發(fā)者工具進(jìn)行調(diào)試和上傳代碼到微信公眾平臺，最后進(jìn)行發(fā)布。
雙擊打開微信開發(fā)者工具和HBuilderX頁面如下，然后咱們用自己的微信掃描該二維碼登錄微信開發(fā)者工具
[圖片上傳失敗...(image-96f186-1656236565275)]
登錄成功的界面如下圖所示
[圖片上傳失敗...(image-77d9b6-1656236565275)]
接著咱們配置一下微信開發(fā)者工具的服務(wù)端口，主要是給HBuilderX進(jìn)行調(diào)用
[圖片上傳失敗...(image-4cc88f-1656236565275)]
我們可以導(dǎo)入一個測試項目進(jìn)行測試一下，點(diǎn)擊下載戀愛話術(shù)小程序,然后點(diǎn)擊如下圖所示的運(yùn)行到小程序
[圖片上傳失敗...(image-c40c69-1656236565275)]
第一次使用的時候需要選擇一下微信開發(fā)者工具的安裝目錄，咱們正常選擇即可
[圖片上傳失敗...(image-985d50-1656236565275)]
因為是第一次編譯，所以會下載一些必須的插件，只要慢慢等待即可
[圖片上傳失敗...(image-10e5b6-1656236565275)]
當(dāng)插件下載完成之后，在HBuilderX再次點(diǎn)擊運(yùn)行到小程序，然后在微信開發(fā)者工具上面即可出現(xiàn)咱們測試項目的頁面，當(dāng)?shù)竭_(dá)這一步，就說明咱們的軟件安裝和環(huán)境變量配置已經(jīng)圓滿結(jié)束。
[圖片上傳失敗...(image-58d33f-1656236565275)]
