# 小程序开发环境搭建 ## 前言 小程序前端开发和调试,需要用到以下软件: | 名称 | 版本 | 说明 | | --- | --- | --- | | 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\ ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11142928_unEv.png "在这里输入图片标题") #### 2\. 激活 启动WebStorm,在License弹窗中选择License Server,输入网址[http://idea.codebeta.cn](http://idea.codebeta.cn/),点击Acitivate即可激活。![输入图片说明](https://static.oschina.net/uploads/img/201805/11142907_cTG6.png "在这里输入图片标题") ### 二、Nodejs安装 #### 1\. 安装Nodejs 安装node-v7.7.1-x64.msi,一路next,安装目录(例): ~~~ C:\Program Files\nodejs ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11151131_jBQp.png "在这里输入图片标题") 打开CMD,输入命令node -v以及npm -v检测,显示版本信息说明安装成功。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/11151508_mQQf.png "在这里输入图片标题") #### 2\. 安装cnpm 安装淘宝的镜像cnpm,打开cmd,在命令行中输入 ~~~ npm install -g cnpm --registry=https://registry.npm.taobao.org ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11152647_7fG2.png "在这里输入图片标题") #### 3\. 环境变量配置 在\[系统变量\]中,设置 NODE\_PATH ,新建 NODE\_PATH ,值为(例) ~~~ C:\Program Files\nodejs\node_global\node_modules ~~~ ![](https://static.oschina.net/uploads/img/201805/11151835_utlu.png) 在\[用户变量\]中,修改用户变量中的path,添加(例) ~~~ C:\Program Files\nodejs\node_global\ ~~~ ![输入图片说明](https://static.oschina.net/uploads/img/201805/11152033_8BW8.png "在这里输入图片标题") 打开cmd,输入命令cnpm -v来查看cnpm安装的版本和结果,提示如下即为成功。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/11152808_rCxp.png "在这里输入图片标题") ### 三、微信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。 ![输入图片说明](https://static.oschina.net/uploads/img/201805/11163033_y1xr.png "在这里输入图片标题")