HBuilderX App开发环境搭建

1. Nox 模拟器

1). 无脑式安装
HBuilderX App开发环境搭建
Nox模拟器平板界面.png
2). 屏幕修改

点击右侧上方的设置按钮,在系统设置中选择手机版,点击保存并重启。

HBuilderX App开发环境搭建
Nox设置界面.png
3). 端口设置

Nox模拟器默认端口:62001

2. HBuilderX

1). 点击右侧的Download,并选择对应平台的App开发版下载即可。
HBuilderX App开发环境搭建
HBuilderX.png
HBuilderX App开发环境搭建
HBuilderX下载界面.png
2). 安装

**Windows: ** 解压后双击exe文件打开即可。

**Mac: ** 将图标移入Applications中即可。

HBuilderX App开发环境搭建
HBuilderX_Mac.png
3). 界面
HBuilderX App开发环境搭建
HBuilderX界面.png

3. 使用

1). 文件 -> 新建 -> 项目
HBuilderX App开发环境搭建
新建项目.png
2). 选择5+App,输入项目名,更改项目位置
HBuilderX App开发环境搭建
配置项目信息.png
3). 首页文件内容
HBuilderX App开发环境搭建
index.html文件.png
4). 运行 -> 运行到浏览器 -> Chrome
HBuilderX App开发环境搭建
浏览器预览.png

预览效果:

HBuilderX App开发环境搭建
效果.png

4. 手机运行

1). 端口设置

运行 -> 运行到手机或模拟器 -> Android模拟器端口设置

HBuilderX App开发环境搭建
模拟器端口设置.png

Nox模拟器默认端口为:62001

HBuilderX App开发环境搭建
62001端口.png
2). 运行

如果在【运行到手机或模拟器】中无Nox模拟器,请重启Nox模拟器尝试,或提示下载真机调试基座,请下载后尝试。

HBuilderX App开发环境搭建
运行Android设备.png
3). 效果
HBuilderX App开发环境搭建
效果.png
4). 真机调试

首先用电脑连接一台真实的设备,运行 -> 运行到手机或模拟器,选择刚刚连接的真机,若已连接真机,但此处并未显示,请打开【开发者选项】或下载【豌豆荚】进行连接。

HBuilderX App开发环境搭建
真机.png

5+App入门指南

Html5+ 规范