HBuilderX App开发环境搭建

  • Post author:
  • Post category:其他


1.

Nox 模拟器

1). 无脑式安装
3110861-b959e501f3398435.png

Nox模拟器平板界面.png

2). 屏幕修改

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

3110861-c727f6be6281eb5c.png

Nox设置界面.png

3). 端口设置


Nox模拟器默认端口:62001

2.

HBuilderX

1). 点击右侧的Download,并选择对应平台的App开发版下载即可。
3110861-f961a84cf43511dc.png

HBuilderX.png

3110861-f1b06fe7c48bfbb2.png

HBuilderX下载界面.png

2). 安装

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

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

3110861-a009b1e858881f46.png

HBuilderX_Mac.png

3). 界面
3110861-8cfa8dfc666bc009.png

HBuilderX界面.png

3. 使用

1). 文件 -> 新建 -> 项目
3110861-8143bac679b0e5d7.png

新建项目.png

2). 选择5+App,输入项目名,更改项目位置
3110861-5a354266dd69d63f.png

配置项目信息.png

3). 首页文件内容
3110861-17794b886e777e87.png

index.html文件.png

4). 运行 -> 运行到浏览器 -> Chrome
3110861-726576808bc81af7.png

浏览器预览.png

预览效果:

3110861-a41efe4a81bd4d9d.png

效果.png

4. 手机运行

1). 端口设置

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

3110861-d91d201929932bc8.png

模拟器端口设置.png


Nox模拟器默认端口为:62001

3110861-05afea9355da76ba.png

62001端口.png

2). 运行

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

3110861-452c7b40e3640472.png

运行Android设备.png

3). 效果
3110861-7e1bd9cf0253e1d9.png

效果.png

4). 真机调试

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

3110861-9566de2e339e7ca1.png

真机.png


5+App入门指南


Html5+ 规范



版权声明:本文为mazaiting原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。