原理揭秘:为什么HBuilderX可以打开微信开发者工具?

lxf2023-03-12 10:47:01

我们知道uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。uni-app 的开发工具为HBuilderX,在开发阶段我们可以让使用HBuilderX开发的uni-app项目运行到微信开发者工具。

今天我们来探索一下为什么HBuilderX可以打开微信开发者工具并编译和运行项目。通过阅读本文你可以了解到:1. 微信小程序开发者工具提供的开发辅助功能: 命令行和HTTP调用的使用方法 2.了解HBuilderX可以打开微信开发者工具并编译和运行项目的原理。欢迎阅读本文一起学习

1.开发者工具的命令行和HTTP调用

开发者工具提供了命令行与 HTTP 服务两种接口供外部调用,开发者可以通过命令行或 HTTP 请求指示工具进行登录、预览、上传等操作。由于命令行和HTTP二者提供的功能相同,所以本文以命令行为例说明有关功能的使用方法。

1.1 首先要开启服务端口

要使用命令行,注意首先需要在开发者工具的【设置】 ->【 安全设置】中开启服务端口,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

1.2 找到命令行工具

命令行工具所在位置:1.macOS: <安装路径>/Contents/MacOS/cli 2.Windows: <安装路径>/cli.bat

笔者使用的是windows系统,命令行工具在开发者工具安装目录的根目录下面,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

1.3 使用命令行工具

在路径上输入cmd然后按回车键,可快速将windows的cmd切换到微信开发者目录,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

然后我们输入cli 回车 ,可见命令行工具输出了提示信息,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具? 下面我们尝试使用几个命令:

1.3.1 islogin

下面我们使用一下 islogin命令检查一下当前是否已经登录工具,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

1.3.2 upload

下面我们使用upload命令上传小程序代码:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

我们可以登录到小程序开发者后台检查上传结果,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

1.3.3 preview

下面我们使用preview命令进行预览:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

可见preview命令可以在控制台打印出二维码,因为参数--qr-format的默认值为terminal,也可以指定其他值,详见文档

关于其他的命令,读者可以自行尝试,下面说一下open命令和HBuilderX是如何打开开发者工具的。

2.HBuilderX打开开发者工具

2.1 open命令简介

open命令用于启动开发者工具,运行命令时有可选的参数--project。project代表要运行项目的路径,如果指定了project则打开工具的时候还会打开项目,每次执行都会自动编译刷新,并且自动打开模拟器和调试器。要注意两点:

第一,project不能是相对路径;

第二,项目路径所指向的这个小程序项目必须含正确格式的 project.config.json 且其中有 appid 和 projectname 字段。示例:

# 打开工具
cli open
# 打开路径 /Users/username/demo 下的项目
cli open --project /Users/username/demo

除了open命令,微信开发者工具还提供了open-other命令,可以在工具中以「其他」项目的形式打开文件或者文件夹。这个命令的--project参数是必选的,指定打开的文件或者文件夹路径,支持绝对路径和相对路径。示例:

# 打开指定项目,在「其他」项目窗口中打开
cli open-other --project /Users/username/demo

了解了open命令我们来看HBuilderX是如何打开开发者工具的。

2.2 HBuilderX打开开发者工具

在HBuilderX中点击【运行】-【运行到小程序模拟器】-【微信开发者工具】,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

提示需要设置【微信开发者路径】,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

填写微信开发者工具路径,点击【确定】,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

(注意,如上文所述,指定的这个微信小程序根目录就可以找到命令行工具。)

然后重新点击【运行】-【运行到小程序模拟器】-【微信开发者工具】,可以看到HBuilderX成功打开了微信开发者工具,如下图所示:

原理揭秘:为什么HBuilderX可以打开微信开发者工具?

注意上图中的绿色框选部分的端口号:50429和我们在微信开发者工具中【设置】-【安全设置】显示的端口号是一样的。

至此,我们可以知道为什么HBuilderX可以打开微信开发者工具并运行项目的原理了吧?就是使用了微信小程序提供的命令行工具,更具体的说是使用了open命令。HBuilderX要想使用命令行工具那么就要知道命令行工具的路径,所以需要为HBuilderX配置微信开发者工具的安装路径。

参考文章

1.uni-app跨端开发微信小程序之手把手带你写一个用程序自动打开微信开发者工具的小插件

2.uni-app跨端开发微信小程序之HBuilderX项目实现多环境开发