如果还没有安装好 HBuilderX开发工具 的话,就点击下面的链接地址先安装
[https://www.dcloud.io/hbuilderx.html](https://www.dcloud.io/hbuilderx.html)
使用 HBuilderX开发工具 前,请确认你打开了小程序开发工具的服务器端口,如下图所示。只需要设置一次即可。
![](https://img.kancloud.cn/00/9b/009b67c5acb68cebdb5fab7f24c084f8_1225x607.png)
安装好HBuilderX开发工具后,就选择导入你下载回来的源代码
![](https://img.kancloud.cn/e7/f5/e7f5447f643c1b809f455d49e66f6dc4_1476x848.png)
导入后,可以先本机调试预览一下效果。如下图所示
![](https://img.kancloud.cn/ae/4b/ae4b6583393f863a7ada7a1136de6c8b_1146x720.png)
调序预览没问题后,就按下图选中你的项目,发行成小程序代码,如果H5代码
![](https://img.kancloud.cn/9e/bf/9ebf2d20d9e20ea504cc855252ebfab2_761x778.png)
生成的小程序代码,
![](https://img.kancloud.cn/98/19/981944a127a6022e8bc72af1ba863b1f_1774x839.png)
![](https://img.kancloud.cn/92/ac/92ac288a0c6c156a1c2e13d94d7fa633_1579x985.png)