芯片开放社区
直播中

七上八下

8年用户 845经验值
私信 关注
[技术讨论]

【RISC-V 生态软件系列】 HaaS UI基础教学一:快速开始

环境准备

检查安装是否成功:node -v 显示版本号即成功.

sudo npm install -g cnpm --registry=https://registry.npm.taobao.org


aiot-vue-cli工具安装

aiot-vue-cli是一个npm模块,用于HaaS UI应用开发的工具,包括初始化,构建,预编译等功能.同时正在开发中的HaaS UI模拟器未来也会集成进这个工具.

安装命令:sudo npm install aiot-vue-cli -g


应用创建与初始化

应用可通过以下命令创建与初始化:

aiot-cli create [name] #创建工程
cd [name]
npm install #安装依赖
注意:如果出现如下npm更新提示,请暂时不要更新.否则会导致版本兼容问题.


好了现在我们已经创建好了一个Haas UI应用,并且安装好了依赖.我们可以通过命令npm run start在浏览器上对应用进行预览.新创建的应用带有两个页面和一个组件,可以在web预览中看到如下界面:



应用工程文件结构

完整的工程文件结构.工程代码存放于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预览相关,无需修改构建命令说明

命令

说明

其他

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中显示的效果.

模拟器

HaaS UI提供了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

实际运行效果如下:


文章转载自:平头哥芯片开放社区 作者:sucool

更多回帖

发帖
×
20
完善资料,
赚取积分