2000元阿里云代金券免费领取，2核4G云服务器仅664元/3年，新老用户都有优惠，立即抢购>>>
阿里云采购季（云主机223元/3年）活动入口：请点击进入>>>，
阿里云学生服务器（9.5元/月）购买入口：请点击进入>>>，
1、前言
本文介绍如何快速创建一个HaaS UI应用, 并对基本环境和应用结构进行简单的说明.
2、名词解释
AliOS Things： 阿里云智能IoT团队自研的物联网操作系统
HaaS：全称是Hardware as a Service，阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务
HaaS UI：全称是Hardware as a Service User Interface，是源自AliOS Things操作系统上的一套应用&图形解决方案，支持C/C++和 JS两种开发语言
3、环境准备
- Nodejs:从Nodejs官网下载最新稳定版安装,下载地址:https://nodejs.org/zh-cn/download/
检查安装是否成功:node -v 显示版本号即成功.
- 国内可切换到淘宝npm镜像,详细使用说明:/mirror/NPM
npm install -g cnpm --registry=https://registry.npm.taobao.org
aiot-vue-cli工具安装
aiot-vue-cli是一个npm模块,用于HaaS UI应用开发的工具,包括初始化,构建,预编译等功能.同时正在开发中的HaaS UI模拟器未来也会集成进这个工具.
安装命令:npm install aiot-vue-cli -g
4、HaaS UI应用
4.1、应用创建与初始化
应用可通过以下命令创建与初始化:
aiot-cli create [name] #创建工程
cd [name]
npm install #安装依赖注意:如果出现如下npm更新提示,请暂时不要更新.否则会导致版本兼容问题.
好了现在我们已经创建好了一个Haas UI应用,并且安装好了依赖.我们可以通过命令npm run start在浏览器上对应用进行预览.新创建的应用带有两个页面和一个组件,可以在web预览中看到如下界面:
4.2、应用工程文件结构
完整的工程文件结构.工程代码存放于src/目录下.各目录和文件说明如下:
├── configs 打包和和预览相关配置信息,应用开发时一般不需要修改
├── package.json 项目描述和依赖
├── src 源码目录
│ ├── app.json 应用描述信息
│ ├── app.js 应用入口,应用生命周期回调处理
│ ├── bootstrap.web.js web预览时的入口,不要修改
│ ├── components 组件目录,可自定义
│ │ └── HelloWorld.vue //组件文件
│ ├── images 图片目录,可自定义
│ │ └── image1.png 图片文件
│ └── pages 页面目录,可自定义
│ ├── index
│ │ ├── index.js //页面生命周期文件
│ │ └── index.vue //页面根组件
│ └── page
│ └── page.vue //页面根组件
├── web web预览相关资源,开发中无需修改
└── webpack.config.js web预览相关,无需修改4.3、构建命令说明
| 命令 | 说明 | 其他 |
|---|---|---|
| npm run start | 基于浏览器开发/调试/预览 | |
| npm run build | 构建&打包 | 不对生成的js进行处理,打成一个开发包 |
| npm run build:dev | 构建 | 只生成js,不打包 |
| npm run build:bin(可选) | 构建&预编译&打包 | 将js预编译后打包(mac,windows) |
| npm run build:prod(可选) | 打正式包 | 将js混淆后转成bin并打包(mac,windows) |
以上就是快速创建一个Haas UI应用的步骤.目前可基于web开发,然后通过build命令构建应用包(amr后缀文件),拷贝到Haas板子上对应目录执行即可看到前面web中显示的效果.
5、模拟器
HaaS UI提供了Mac和Windows上的模拟器，可以用于没有设备时，快速验证开发页面。
Mac模拟器：下载地址
Windows模拟器：下载地址
模拟器目录结构说明(Mac环境，Windows下类似)：
├── bin 可执行程序目录
│ └── appx
└── resources 资源目录
├── cfg.json 配置信息，可配置模拟器分辨率
├── fonts 字体目录
│ └── Roboto-Regular.ttf
├── framework JS运行环境
│ └── js-framework.min.bin
├── local_packages.json 本地预置应用的配置信息
└── presetpkgs 本地预置应用包
├── 8180000000000020.amr运行模拟器需要先cd到模拟器所在路径，再执行./bin/appx，（因为模拟器是根据相对路径来加载资源目录的）
运行方法：
1、./bin/appx （运行模拟器预置的应用包）
2、./bin/appx {appPath} {page} (传入应用构建出来的目录绝对路径来运行，page可选)
示例效果：./bin/appx {工程构建的绝对路径}/.falcon_/index
实际运行效果如下：
6、开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
更多技术与解决方案介绍，请访问阿里云AIoT首页https://iot.aliyun.com/
