前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >BlueOS 应用项目结构

BlueOS 应用项目结构

作者头像
徐建国
发布2024-03-11 20:59:25
1010
发布2024-03-11 20:59:25
举报
文章被收录于专栏:个人路线个人路线

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

BlueOS 应用项目结构

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

代码语言:javascript
复制
└── 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/

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-03-06,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 大前端之旅 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • BlueOS 应用项目结构
  • manifest.json
  • app.ux
  • page.ux
    • 页面布局<template>
      • 页面逻辑<script>
        • 页面样式<style>
        • 页面级变量
        • 页面生命周期
        • 数据驱动
        • DevTools界面包含下述模块
        • 云真机预览
        • 技术资料
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档