# 小程序開發環境搭建 ## 前言 小程序前端開發和調試，需要用到以下軟件： | 名稱 | 版本 | 說明 | | --- | --- | --- | | WebStorm | 2018.1.3 | JavaScript即WEB前端開發工具 | | Nodejs | 7.7.1 | JavaScript運行環境，此處使用到它的包管理器npm | | 微信web開發者工具 | 1.02 | 微信官方提供，小程序調試工具 | 開發工具打包下載：[https://pan.baidu.com/s/1ojF\_aqKtf3ooQ15FNdtTJQ](https://pan.baidu.com/s/1ojF_aqKtf3ooQ15FNdtTJQ)密碼：0wa5 ### 一、WebStorm安裝 #### 1\. 安裝 從網站下載WebStorm安裝包，執行WebStorm-2018.1.3.exe，一路next。安裝目錄如下（例）： ~~~ C:\Program Files\JetBrains\WebStorm 2018.1.3\ ~~~  #### 2\. 激活 啟動WebStorm，在License彈窗中選擇License Server，輸入網址[http://idea.codebeta.cn](http://idea.codebeta.cn/)，點擊Acitivate即可激活。  ### 二、Nodejs安裝 #### 1\. 安裝Nodejs 安裝node-v7.7.1-x64.msi，一路next，安裝目錄（例）： ~~~ C:\Program Files\nodejs ~~~  打開CMD，輸入命令node -v以及npm -v檢測，顯示版本信息說明安裝成功。  #### 2\. 安裝cnpm 安裝淘寶的鏡像cnpm，打開cmd，在命令行中輸入 ~~~ npm install -g cnpm --registry=https://registry.npm.taobao.org ~~~  #### 3\. 環境變量配置 在\[系統變量\]中,設置 NODE\_PATH ，新建 NODE\_PATH ,值為（例） ~~~ C:\Program Files\nodejs\node_global\node_modules ~~~  在\[用戶變量\]中,修改用戶變量中的path，添加（例） ~~~ C:\Program Files\nodejs\node_global\ ~~~  打開cmd，輸入命令cnpm -v來查看cnpm安裝的版本和結果，提示如下即為成功。  ### 三、微信web開發者工具安裝 #### 1\. 下載安裝包 從微信小程序官方下載安裝文件，此處選擇windows 64版本。 ~~~ https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018510 ~~~ #### 2\. 安裝 執行wechat\_devtools\_1.02.1803210\_x64.exe，一路next。