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

实际运行效果如下：

 

6、开发者技术支持

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