## 本地小程序开发环境搭建 ``` 以编译运行微信小程序为例 ``` **环境所需软件** 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-》工具-》插件安装-》安装新插件-》前往插件市场去安装 (如下图) ``` ![](https://img.kancloud.cn/dc/c6/dcc6d8033299dd88355a0da6823b5eda_1393x933.png) ``` 搜索找到“scss/sass编译”,并点击打开详情页面,如下图 ``` ![](https://img.kancloud.cn/a2/01/a201f54c2c1a1a23172bab826ef6c5d0_1149x433.png) ``` 安装后重启即可 ``` ## 安装《微信开发者工具》 ``` 下载后进行安装,安装过程略 ``` ## 建立《HBuilderX》与《微信开发者工具》之间的编译关系 ``` 关联的目的是为了建立HBuilderX编译微信小程序的能力 ``` **1.设置微信开发者工具路径** ``` 打开《HBuilderX》,点击菜单中工具->设置->运行配置,如下图,指定正确的路径。 ``` ![](https://img.kancloud.cn/d6/26/d626b40536ef5eb006482ae71f652912_1106x533.png) **2.《微信开发者工具》开启服务端口** ``` 打开《微信开发者工具》,点击菜单中的设置->安全->开启服务端口,如下图 ``` ![](https://img.kancloud.cn/db/7a/db7a658c84dc7877f0d29147a5df5e77_803x393.png) ``` 在使用过程中,《HBuilderX》是编译代码,《微信开发者工具》显示效果 ``` **如果您目的是调试** ``` 请使用《HBuilderX》菜单中的“运行”进行调起《微信开发者工具》 这样每次在《HBuilderX》中修改的代码进行保存后会实时同步到《微信开发者工具》中进行显示运行 ``` **如果您目的是发布代码** ``` 请使用《HBuilderX》菜单中的“发行”进行调起《微信开发者工具》 这样《HBuilderX》编译的代码精简,体积小。 ```