1. Nox 模拟器
1). 无脑式安装
![3110861-b959e501f3398435.png](https://i-blog.csdnimg.cn/blog_migrate/2748231dc7a026a82deacc6e4a883b82.webp?x-image-process=image/format,png)
Nox模拟器平板界面.png
2). 屏幕修改
点击右侧上方的设置按钮,在系统设置中选择手机版,点击保存并重启。
![3110861-c727f6be6281eb5c.png](https://i-blog.csdnimg.cn/blog_migrate/7b13511b4525ba46bcc8af8f01f92e36.webp?x-image-process=image/format,png)
Nox设置界面.png
3). 端口设置
Nox模拟器默认端口:62001
2. HBuilderX
1). 点击右侧的Download,并选择对应平台的App开发版下载即可。
![3110861-f961a84cf43511dc.png](https://i-blog.csdnimg.cn/blog_migrate/f11ec6a9cc980865fc8dc83882b788e0.webp?x-image-process=image/format,png)
HBuilderX.png
![3110861-f1b06fe7c48bfbb2.png](https://i-blog.csdnimg.cn/blog_migrate/6e37e6c785402bfefe42d6ce5ec333dc.webp?x-image-process=image/format,png)
HBuilderX下载界面.png
2). 安装
**Windows: ** 解压后双击exe文件打开即可。
**Mac: ** 将图标移入Applications中即可。
![3110861-a009b1e858881f46.png](https://i-blog.csdnimg.cn/blog_migrate/c1c27d081dd7e40399ae239acdd0dbd7.webp?x-image-process=image/format,png)
HBuilderX_Mac.png
3). 界面
![3110861-8cfa8dfc666bc009.png](https://i-blog.csdnimg.cn/blog_migrate/f57b4af4ca21ed85976a604e779424ae.webp?x-image-process=image/format,png)
HBuilderX界面.png
3. 使用
1). 文件 -> 新建 -> 项目
![3110861-8143bac679b0e5d7.png](https://i-blog.csdnimg.cn/blog_migrate/028a8362bab5ad9d65d465f7c325ae3c.webp?x-image-process=image/format,png)
新建项目.png
2). 选择5+App,输入项目名,更改项目位置
![3110861-5a354266dd69d63f.png](https://i-blog.csdnimg.cn/blog_migrate/73579a6feb516fc6a06b5d4f54a3ee94.webp?x-image-process=image/format,png)
配置项目信息.png
3). 首页文件内容
![3110861-17794b886e777e87.png](https://i-blog.csdnimg.cn/blog_migrate/26fe3367a3c250fdf1d651334fee1d73.webp?x-image-process=image/format,png)
index.html文件.png
4). 运行 -> 运行到浏览器 -> Chrome
![3110861-726576808bc81af7.png](https://i-blog.csdnimg.cn/blog_migrate/2e1c93466752beb298d99c18d0fc0d81.webp?x-image-process=image/format,png)
浏览器预览.png
预览效果:
![3110861-a41efe4a81bd4d9d.png](https://i-blog.csdnimg.cn/blog_migrate/ed5060b6170012b47919711a391e8e9c.webp?x-image-process=image/format,png)
效果.png
4. 手机运行
1). 端口设置
运行 -> 运行到手机或模拟器 -> Android模拟器端口设置
![3110861-d91d201929932bc8.png](https://i-blog.csdnimg.cn/blog_migrate/8beb123adf5eac8f659265ca028b2031.webp?x-image-process=image/format,png)
模拟器端口设置.png
Nox模拟器默认端口为:62001
![3110861-05afea9355da76ba.png](https://i-blog.csdnimg.cn/blog_migrate/4a4ea232bc368e5ee0bf440ac524bda7.webp?x-image-process=image/format,png)
62001端口.png
2). 运行
如果在【运行到手机或模拟器】中无Nox模拟器,请重启Nox模拟器尝试,或提示下载真机调试基座,请下载后尝试。
![3110861-452c7b40e3640472.png](https://i-blog.csdnimg.cn/blog_migrate/9f8b9069045b5e06f8720d01ae63941d.webp?x-image-process=image/format,png)
运行Android设备.png
3). 效果
![3110861-7e1bd9cf0253e1d9.png](https://i-blog.csdnimg.cn/blog_migrate/bce0966230305316408ec187d4af088a.webp?x-image-process=image/format,png)
效果.png
4). 真机调试
首先用电脑连接一台真实的设备,运行 -> 运行到手机或模拟器,选择刚刚连接的真机,若已连接真机,但此处并未显示,请打开【开发者选项】或下载【豌豆荚】进行连接。
![3110861-9566de2e339e7ca1.png](https://i-blog.csdnimg.cn/blog_migrate/e419e6e5fe2bec4378dea33f9d5b48f9.webp?x-image-process=image/format,png)
真机.png