## 环境所需软件 ``` 1.《HBuilderX》下载地址：https://www.dcloud.io/hbuilderx.html 2.《微信开发者工具》下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html ``` ## 安装《HBuilderX》 ``` HBuilderX工具的作用是：把源代码编译转换成微信小程序的代码。 该软件建议使用APP开发版，安装过程略 ``` **安装必须插件 “scss/sass编译”** ``` 步骤： 运行HBuilderX-》工具-》插件安装-》安装新插件-》前往插件市场去安装 （如下图） ```  ``` 搜索找到“scss/sass编译”，并点击打开详情页面，如下图 ```  ``` 安装后重启即可 ``` ## 安装《微信开发者工具》 ``` 下载后进行安装，安装过程略 ``` ## 建立《HBuilderX》与《微信开发者工具》之间的编译关系 ``` 关联的目的是为了建立HBuilderX编译微信小程序的能力 ``` **1.设置微信开发者工具路径** ``` 打开《HBuilderX》，点击菜单中工具->设置->运行配置，如下图，指定正确的路径。 ```  **2.《微信开发者工具》开启服务端口** ``` 打开《微信开发者工具》，点击菜单中的设置->安全->开启服务端口，如下图 ```  ``` 在使用过程中，《HBuilderX》是编译代码，《微信开发者工具》显示效果 ``` **如果您目的是调试** ``` 请使用《HBuilderX》菜单中的“运行”进行调起《微信开发者工具》 这样每次在《HBuilderX》中修改的代码进行保存后会实时同步到《微信开发者工具》中进行显示运行 ``` **如果您目的是发布代码** ``` 请使用《HBuilderX》菜单中的“发行”进行调起《微信开发者工具》 这样《HBuilderX》编译的代码精简，体积小。 ```