BlueOS 应用项目结构

作者：坚果 团队：坚果派 团队介绍：坚果派由坚果创建，团队拥有12个华为HDE，以及若干其他领域的三十余位万粉博主运营。 专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，团队成员聚集在北京，上海，南京，深圳，广州，宁夏等地，欢迎合作。

BlueOS 应用项目结构

BlueOS 应用项目，主要包括配置文件 manifest.json、应用入口文件 app.ux，以及页面代码；完整的项目还需要图片、样式等资源文件，也需要将共用代码抽离为组件，官方推荐的项目结构包括如下内容：

└── src

│   ├── assets          # 公用的资源(images/styles/字体...)

│   │   ├──images       # 存储 png/jpg/svg 等公共图片资源

│   │   └──styles       # 存放 less/css/sass 等公共样式资源

│   │   └──js           # 存储公共 javaScript 代码资源

│   │   └──iconfont     # 存放图标字体文件

│   ├── helper          # 项目自定义辅助各类工具

│   │   ├──ajax.js      # 对系统提供的 fetch api 进行链式封装

│   │   └──utils        # 存放项目所封装的工具类方法

│   ├── pages           # 统一存放项目页面级代码目录

│   ├── app.ux          # 应用程序代码的入口

│   ├── manifest.json   # 配置应用基本信息

│   └── components      # 存放应用公共组件

└── package.json        # 定义项目需要的各种模块及配置信息

manifest.json

manifest.json为应用配置文件，主要配置字段介绍如下。更多详细介绍参考：

https://doc.quickapp.cn/framework/manifest.html

app.ux

在app.ux中写应用相关的逻辑，包括应用全局方法，应用生命周期等等。更多应用生命周期方法，参考：https://doc.quickapp.cn/tutorial/framework/lifecycle.html

page.ux

在xxx.ux编写页面代码，包括页面布局<template>，页面逻辑<script>，页面样式<style>等。下面分别介绍：

页面布局<template>

在<template>中使用官方支持的组件进行页面UI的开发，官方组件可以参考：https://doc.quickapp.cn/widgets/div.html

页面逻辑<script>

在<script>中写JS逻辑。需要注意的是，蓝河应用开发支持常见的JS特性，另外如果需要调用系统额外提供的能力，可以调用接口完成。支持的接口可以参考：https://doc.quickapp.cn/features/

页面样式<style>

在<script>中写CSS样式。需要注意的是，必须使用系统支持的样式列表完成应用开发，支持的样式列表可以参考：https://doc.quickapp.cn/widgets/common-styles.html

页面级变量

页面中用到的页面级全局变量都声明在private中，除private外，还有public/protected/data等字段，可以参考：

https://doc.quickapp.cn/framework/script.html

页面生命周期

在页面对应的生命节点触发，可以参考：

https://doc.quickapp.cn/tutorial/framework/lifecycle.html

数据驱动

蓝河应用开发是数据驱动的，也就是说通过为UI组件绑定数据，当数据变化时，UI自动变化，无需做额外的更新UI的逻辑。

DevTools界面包含下述模块

lElements：查看页面DOM节点

lConsole：查看应用输出的日志

lSources：查看应用源码，进行断点调试

lNetwork：查看应用发起的网络请求

lMemory：查看应用快照

lAuxillary Tools：辅助工具，可用于调试应用数据

lApplication：查看应用存储

云真机预览

1.登录云真机：https://dev-cloud.vivo.com.cn/#/remote/device/list

2.选择空闲的云真机，开始调试

3.通过adb连接远程云真机：复制adb命令，在本机终端shell中执行。此处可能会提示failed to authenticate to xxx，无需理会，通过adb devices查看是否连接成功。

4.在蓝河Studio打开项目工程后，修改代码即可触发云真机更新。

5.注意：

（1）云真机仅做预览包体之用，不具备调试应用的能力，如需使用DevTools调试应用，请使用vivo手机真机。

（2）云真机预览包体连接adb后，只需要修改代码即可触发云真机更新，无需额外操作（不需要在蓝河Studio上点击“USB调试”或在手机上打开调试器App）。

（3）注意云真机WiFi可能被关闭，如果关闭，请手动打开。

技术资料

可参考下面的开发文档和示例代码，学习蓝河应用开发标准：1.开发文档：https://doc.quickapp.cn

2.开发课程入门：https://www.quickapp.cn/course

3.示例源码：https://github.com/quickappcn/sample

4.官方组件库：https://github.com/quickappcn/qaui

5.IDE下载地址：https://studio.blueos.com.cn/install

6.框架API：https://doc.quickapp.cn/framework/

7.组件：https://doc.quickapp.cn/widgets/common-events.html

8.接口：https://doc.quickapp.cn/features/