# 本地开发环境搭建 ``` 本章节讲述怎么搭建本地的测试环境,小程序代码的编译、上传、与推送。 本地环境所需软件: 1:《HBuilderX》下载地址:https://www.dcloud.io/hbuilderx.html 3:《微信开发者工具》下载地址: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编译微信小程序的能力。 在“运行到微信小程序”和“发布微信小程序”的操作中会自动将编译后的代码导入到微信开发者工具中,并自动调起运行,便于在本地调试模板和上传模板。 ``` **《微信开发者工具》开启服务端口** ``` 运行并登录微信开发者工具->设置->安全->开启服务端口 ``` ![](https://img.kancloud.cn/db/7a/db7a658c84dc7877f0d29147a5df5e77_803x393.png)