1.
Nox 模拟器
1). 无脑式安装
![3110861-b959e501f3398435.png](https://upload-images.jianshu.io/upload_images/3110861-b959e501f3398435.png)
Nox模拟器平板界面.png
2). 屏幕修改
点击右侧上方的设置按钮,在系统设置中选择手机版,点击保存并重启。
![3110861-c727f6be6281eb5c.png](https://upload-images.jianshu.io/upload_images/3110861-c727f6be6281eb5c.png)
Nox设置界面.png
3). 端口设置
Nox模拟器默认端口:62001
2.
HBuilderX
1). 点击右侧的Download,并选择对应平台的App开发版下载即可。
![3110861-f961a84cf43511dc.png](https://upload-images.jianshu.io/upload_images/3110861-f961a84cf43511dc.png)
HBuilderX.png
![3110861-f1b06fe7c48bfbb2.png](https://upload-images.jianshu.io/upload_images/3110861-f1b06fe7c48bfbb2.png)
HBuilderX下载界面.png
2). 安装
**Windows: ** 解压后双击exe文件打开即可。
**Mac: ** 将图标移入Applications中即可。
![3110861-a009b1e858881f46.png](https://upload-images.jianshu.io/upload_images/3110861-a009b1e858881f46.png)
HBuilderX_Mac.png
3). 界面
![3110861-8cfa8dfc666bc009.png](https://upload-images.jianshu.io/upload_images/3110861-8cfa8dfc666bc009.png)
HBuilderX界面.png
3. 使用
1). 文件 -> 新建 -> 项目
![3110861-8143bac679b0e5d7.png](https://upload-images.jianshu.io/upload_images/3110861-8143bac679b0e5d7.png)
新建项目.png
2). 选择5+App,输入项目名,更改项目位置
![3110861-5a354266dd69d63f.png](https://upload-images.jianshu.io/upload_images/3110861-5a354266dd69d63f.png)
配置项目信息.png
3). 首页文件内容
![3110861-17794b886e777e87.png](https://upload-images.jianshu.io/upload_images/3110861-17794b886e777e87.png)
index.html文件.png
4). 运行 -> 运行到浏览器 -> Chrome
![3110861-726576808bc81af7.png](https://upload-images.jianshu.io/upload_images/3110861-726576808bc81af7.png)
浏览器预览.png
预览效果:
![3110861-a41efe4a81bd4d9d.png](https://upload-images.jianshu.io/upload_images/3110861-a41efe4a81bd4d9d.png)
效果.png
4. 手机运行
1). 端口设置
运行 -> 运行到手机或模拟器 -> Android模拟器端口设置
![3110861-d91d201929932bc8.png](https://upload-images.jianshu.io/upload_images/3110861-d91d201929932bc8.png)
模拟器端口设置.png
Nox模拟器默认端口为:62001
![3110861-05afea9355da76ba.png](https://upload-images.jianshu.io/upload_images/3110861-05afea9355da76ba.png)
62001端口.png
2). 运行
如果在【运行到手机或模拟器】中无Nox模拟器,请重启Nox模拟器尝试,或提示下载真机调试基座,请下载后尝试。
![3110861-452c7b40e3640472.png](https://upload-images.jianshu.io/upload_images/3110861-452c7b40e3640472.png)
运行Android设备.png
3). 效果
![3110861-7e1bd9cf0253e1d9.png](https://upload-images.jianshu.io/upload_images/3110861-7e1bd9cf0253e1d9.png)
效果.png
4). 真机调试
首先用电脑连接一台真实的设备,运行 -> 运行到手机或模拟器,选择刚刚连接的真机,若已连接真机,但此处并未显示,请打开【开发者选项】或下载【豌豆荚】进行连接。
![3110861-9566de2e339e7ca1.png](https://upload-images.jianshu.io/upload_images/3110861-9566de2e339e7ca1.png)
真机.png
5+App入门指南
Html5+ 规范
版权声明:本文为mazaiting原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。