一、安装HBuilder X
1、下载HBuilder X
官网网址:https://dcloud.io/hbuilderx.html
根据电脑系统下载对应的版本(我的电脑是Windows 10)

2.安装HBuilder X
直接将HBuilderX.4.61.2025040322-alpha.zip解压到自己想要存放的文件夹中
![]()

双击HBuiderX.exe,即可打开HBuilder X

3、选择自己喜欢的主题

也可以在工具->主题,选择自己喜欢的主题

4、创建桌面快捷方式

二、创建uni-app项目
创建一个简单的uni-app项目

项目创建成功

三、运行在浏览器端
运行->运行到浏览器->Chrome

HBuilder X 自动下载插件


四、运行在微信小程序端
1.注册小程序开发账号
1.1 点击注册按钮
使用浏览器打开https://mp.weixin.qq.com/网址,点击右上角的“立即注册”即可进入到小程序开发账号的注册流程,主要流程截图如下:

1.2 选择注册账号的类型

1.3 填写账号信息


1.4 提示邮箱激活

1.5 点击链接激活账号

1.6 选择主体类型

1.7 主体信息登记,填入自己的信息


1.8 获取小程序的AppID

2 安装微信开发者工具
2.1 下载
官方网址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

2.2 安装
双击文件,开始安装
![]()
点击下一步

点击我接受

更改安装位置,点击安装

点击完成

3 关于微信开发者工具配置
双击桌面上的微信开发者工具图标

微信扫码登录

点击小齿轮,进入设置页面

点击安全选项,并把服务端口打开

4. 关于HBuilder X 配置
打开设置

选择运行配置部分,找到微信开发者工具路径,把安装的微信开发者工具安装路径放进去

扫码登录微信公众平台:https://mp.weixin.qq.com/

进入开发管理,复制小程序ID

将复制的开发者ID,粘贴到manifest.json->微信小程序配置->微信小程序AppID

5.运行项目


自动跳转的微信开发者工具

运行效果

五、运行在手机模拟器上
1.下载mumu模拟器
官方网址:https://mumu.163.com/

2.安装mumu模拟器
双击文件,开始安装
![]()
选择自定义安装

更改到自己想要安装的目录下

3.设置
3.1 将显示设置为手机模式


3.2 打开USB调试
点击系统应用->设置

点击“关于手机”

连续点击“版本号”多次(通常为7次)以激活开发者选项


设置->系统->开发者选项->



4.配置adb调试桥
adb调试桥命令工具(用于HBuilder X和Android模拟器建立连接,来实时调试和热重载。HBuilder X是有内置adb的)
4.1下载插件[App真机运行]的依赖


4.2 在HBulider X设置ADB路径


4.3 adb环境变量配置

4.4 HBuilder X开发工具连接mumu模拟器,使用adb调试桥来连接
端口是固定的,启动mumu模拟器默认是运行在7555端口
Win+R


5.运行到mumu模拟器



运行效果



















