微信开发者工具的安装使用

进入官网安装微信开发者工具 根据自己的电脑🖥️下载稳定版本：

双击下载好的安装包：

接下来，就照着下面框出来的内容进行安装即可。

选择安装目录，点击“安装”按钮：

如下图所示，就表示安装完成了。

双击微信开发者的桌面快捷方式，就可以进入页面了，可以新建小程序实验一下。新建项目需要用到自己的AppId。AppId可以到微信公众平台中获取到；登录微信公众平台，登录以后，找到左侧的“设置”，里面的“基本设置”中往下拉，就有“账号信息”板块，第一个就是自己的AppId。

创建好项目，进入项目，页面如下所示：

HBuilder的安装使用

进入官网www.dcloud.io/，点击HBuilderX：

我下载的是windows版本：

下载好的安装包如下所示：

解压到自己新建的存放HBuilder的文件夹中，可以看到里面有HBuilderX.exe，然后右键HBuilder.exe---发送到---桌面快捷方式。

双击桌面快捷方式启动HBuilderX即可，启动进入页面，会弹出一个选择主题和快捷键的界面，选择自己喜欢的界面即可。也可以点击“主题切换”进行更换主题。以后想更换主题，可以在菜单栏中点击“工具”--->“主题”来重新设置主题样式。

创建项目：菜单栏点击“文件”---“新建项目”，会弹出如下界面，根据自己的需求填写项目名称、选择项目存放路径、选择模板、选择Vue版本即可，编辑完成点击“创建”按钮，项目就创建好了。

创建好的项目如下所示：

配置浏览器文件路径

这里以Chrome浏览器为例子。找到Chrome浏览器，右键“打开文件所在的位置”：

就进入了Chrome浏览器的安装路径了，复制路径即可。

选中项目，点击菜单栏“运行”--->“配置web服务器”。

将刚才复制的路径粘贴进来即可，当然也可以直接浏览选择路径。

接下来，选中项目，选择运行到Chrome浏览器，项目就会开始编译了。

如果终端不显示，那么我们可以点击菜单栏的“视图”勾选上“显示终端”。

可以看到，uniApp项目就在Chrome浏览器上启动成功啦✌️。

配置微信小程序文件路径

菜单栏点击“工具”，选择“设置”：

进入Settings.json配置中，选择“运行配置”，找到“小程序运行配置”中的微信开发者工具路径。

选中项目，点击菜单栏的“运行”，选择“运行到小程序模拟器”。

但是没有成功，出现了如下报错：

根据错误提示，到微信开发者工具中，点击菜单栏的“设置”--“安全设置”，打开服务端口：

重新到HBuiderX中运行到微信小程序，可以看到编译成功了。

看下微信开发者工具，可以看到uniApp项目运行成功了。