uni-app项目运行在浏览器、微信开发者工具、mumu模拟器

一、安装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模拟器

运行效果