一、安装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模拟器
运行效果