HbuilderX运行uni-app开发的微信小程序

Posted 2023-04-02 jieyucx

HbuilderX运行uni-app开发的微信小程序

Hbuilder下载地址：https://www.dcloud.io/hbuilderx.html

当咱们创建了个uni-app项目后，将整个项目用HbuilderX打开。记住一定是项目的根目录
如图：

点击manifest.json文件，hbuilder会形成图形化配置。
$一定是uni-app项目根目录，点击manifest.json文件才会有图形化界面，不是根目录不会有$

找到微信小程序配置项，配置appId

当然你也可以手动在json文件中配置

然后在hbuilderX点击运行到微信开发者工具，当然提前咱得打开微信开发者工具的服务终端
微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html


打开之后记得关闭微信开发者工具，然后在HbuilderX上点击运行到微信开发者工具。

至此他会自动打开微信开发者工具并运行。

解决HBuilderX无法启动微信开发者工具来预览uni-app项目 - [微信小程序开发者工具] × initialize - [error] 工具的服务端口已关闭。

报错

11:51:59.426 正在编译中...
11:52:07.939  DONE  Build complete. Watching for changes...
11:52:07.940 项目 'MyNews' 编译成功。前端运行日志，请另行在小程序开发工具的控制台查看。
11:52:07.952 正在启动微信开发者工具...
11:52:08.751 [微信小程序开发者工具] [error] IDE service port disabled. To use CLI Call, please enter y to confirm enabling CLI capability, or manually open IDE -> Settings -> Security Settings, and set Service Port On.
11:52:08.752 [微信小程序开发者工具] For more details see: https://developers.weixin.qq.com/miniprogram/en/dev/devtools/cli.html
11:52:08.759 [微信小程序开发者工具] [error] 工具的服务端口已关闭。要使用命令行调用工具，请在下方输入 y 以确认开启，或手动打开工具 -> 设置 -> 安全设置，将服务端口开启。
11:52:08.760 [微信小程序开发者工具] 详细信息: https://developers.weixin.qq.com/miniprogram/dev/devtools/cli.html
11:52:08.766 [微信小程序开发者工具]
11:52:08.766 [微信小程序开发者工具] ? Enable IDE Service (y/N) [27D[27C
11:52:08.773 [微信小程序开发者工具] - initialize
11:52:08.773 [微信小程序开发者工具]
11:52:08.778 [微信小程序开发者工具] × initialize
11:52:08.779 [微信小程序开发者工具]
11:52:08.784 [微信小程序开发者工具]
 

 

解决步骤

1. 【路径】在HBuilderX中设置好 微信开发者工具的路径。
   HBuilderX > 工具 > 设置 > 运行配置 > 微信开发者路径
   
2. 【对外端口开启】打开微信开发者工具，设置，安全，服务端口 开启
   
3. ok！重新在HBuilder中运行项目在 微信小程序中