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、开发者技术支持
如需更多技术支持，可加入钉钉开发者群，或者关注微信公众号
转载：https://blog.csdn.net/cpongo8/article/details/112863123