HBuilder将uniapp项目运行到微信开发者工具进行小程序调试_uni-app将项目运行在微信开发者工具里面查看效果

HBuilder将uniapp项目运行到微信开发者工具进行小程序调试

前言

• 有时候我们的项目开发是使用uniapp，而最终是要发布到微信小程序的。
• 在开发uniapp项目过程中，我们可以使用HBuilderX运行到微信小程序模拟器（微信开发者工具），一边写代码一边调试、预览效果。

准备

电脑安装以下软件

• HbuilderX（写代码）
• 微信开发者工具（调试，预览）

具体步骤

1. 小程序运行路径配置

• 打开HbuilderX里面的【工具】→【设置】
  
• 在运行配置里面，把微信开发者工具的安装路径填上。
  注意!!：这里路径要选到安装路径的最后一级，把【微信开发者工具】文件夹也选上
  
  如果只配置了这个，运行到小程序模拟器的时候会提示服务端口没有打开，这里的服务端口指的是微信开发工具里面的服务端口

2. 打开服务端口

我们现在只需在微信开发者工具中的设置→安全 里面 把服务器端口打开

我们再进行运行编译

编译成功后，会自动打开微信开发者工具，这时候就能看到我们的uniapp在小程序的运行效果了。在HBuilderX中修改文件并保存，会自动刷新微信模拟器，可以一边写代码一边调试了。