HbuilderX如何让项目运行到微信开发者工具完整教程

本人最近在搞微信小程序开发，就碰到运行到微信开发者工具无法启动的问题，上网去查了一些博客，问题得到了解决。
如果有和一些作者的内容有相似的地方请见谅【抱拳】！

工具：
HbuilderX、微信开发者工具

现在正式开始进入我们的正题：
1.点击文件,选择新建下面的项目,如下图所示：
新建一个uni-app项目：

2.接着选择uni-app类型,起个名字即可,如下图所示：

3.然后就建好了小程序的目录,如下图所示：

4.接着点击工具下面的设置,如下图所示:

5.然后在运行配置里面设置微信开发者工具的路径,如下图所示:

6.接着登录微信开发者工具,点击设置下面的安全设置:

7.然后开启服务端口,如下图所示:

8.接着在运行配置中填写web服务调用URL:

9.接着点击运行下面的运行到小程序模拟器,如下图所示:

10.最后HbuilderX就自启动微信开发者工具，如果如下图所示:

最后，如果HbuilderX里面的内容更新了，相应的微信开发者工具的内容和模拟器也会跟着改变