HaaS UI小程序

4.2、应用工程文件结构

完整的工程文件结构.工程代码存放于src/目录下.各目录和文件说明如下:

 
  1. ├── configs 打包和和预览相关配置信息,应用开发时一般不需要修改

  2. ├── package.json 项目描述和依赖

  3. ├── src 源码目录

  4. │ ├── app.json 应用描述信息

  5. │ ├── app.js 应用入口,应用生命周期回调处理

  6. │ ├── bootstrap.web.js web预览时的入口,不要修改

  7. │ ├── components 组件目录,可自定义

  8. │ │ └── HelloWorld.vue //组件文件

  9. │ ├── images 图片目录,可自定义

  10. │ │ └── image1.png 图片文件

  11. │ └── pages 页面目录,可自定义

  12. │ ├── index

  13. │ │ ├── index.js //页面生命周期文件

  14. │ │ └── index.vue //页面根组件

  15. │ └── page

  16. │ └── page.vue //页面根组件

  17. ├── web web预览相关资源,开发中无需修改

  18. └── 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下类似):

 
  1. ├── bin 可执行程序目录

  2. │   └── appx

  3. └── resources 资源目录

  4. ├── cfg.json 配置信息,可配置模拟器分辨率

  5. ├── fonts 字体目录

  6. │   └── Roboto-Regular.ttf

  7. ├── framework JS运行环境

  8. │   └── js-framework.min.bin

  9. ├── local_packages.json 本地预置应用的配置信息

  10. └── presetpkgs 本地预置应用包

  11. ├── 8180000000000020.amr

运行模拟器需要先cd到模拟器所在路径,再执行./bin/appx,(因为模拟器是根据相对路径来加载资源目录的)

运行方法:

  • 1、./bin/appx                (运行模拟器预置的应用包)
  • 2、./bin/appx  {appPath}  {page}   (传入应用构建出来的目录绝对路径来运行,page可选)

示例效果:./bin/appx {工程构建的绝对路径}/.falcon_/index

实际运行效果如下:

image.png

 

6、开发者技术支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号

已标记关键词 清除标记
相关推荐
实付 29.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值