跟着坚果构建首个蓝河应用(BlueOS)

作者：坚果 团队：坚果派 团队介绍：坚果派由坚果创建，团队拥有8个华为HDE，3个HSD，以及若干其他领域的三十余位万粉博主运营。 本人为华为HDE、中国计算机学会CCF专业会员、OpenHarmony布道师、开发者联盟优秀讲师、2023年开源之夏导师、2023年OpenHarmony应用创新赛导师、RISC-V+OpenHarmony应用创意赛导师、OpenHarmony三方库贡献者、开放原子开源基金会技术+生态贡献者第一批开放原子开源讲师、OpenHarmony校源行开源大使、InfoQ签约作者、CSDN博客专家、电子发烧友MVP、51CTO博客专家博主、阿里云博客专家、曾受邀参加2022，2023HDC大会。专注于分享的技术包括HarmonyOS/OpenHarmony，ArkUI-X，元服务，服务卡片，华为自研语言，在2022年战码活动中，带领100余人完成pr的提交，配合孵化三个小队长。也在此活动中累计完成1.5W行代码提交，以及在2023年OpenHarmony创新赛中。累计辅导60+队伍，完成作品的提交,在相关社区累计发布OpenHarmony相关技术文章/视频50+，获得20w+浏览量。

今天我们来使用蓝河 Studio完成蓝河应用开发

一、概述

大家都知道我是做鸿蒙应用开发的，其实我对别的操作系统也比较感兴趣。自从前段时间雷军官宣了小米澎湃 OS 后，如今又有第三家国产手机品牌迈上了自研操作系统的道路：那就是vivo 开发者大会上，蓝河操作系统 BlueOS 正式亮相。

值得一提的是，不同于 vivo 旗下基于安卓系统深度定制的 OriginOS，BlueOS 的系统框架由 Rust 语言编写，并已有一些配套的开发工具和相关文档。不仅如此，vivo 副总裁周围也明确表示：vivo 自研的蓝河操作系统不兼容安卓应用，未来同样不会兼容，目前也没有跨端搭载的计划。

我这里主要 给大家介绍的是蓝河应用开发采用类 web 开发范式，使用 UI 组件来搭建页面布局，使用样式来描述组件和页面的效果，使用 Javascript 来进行业务逻辑的开发。蓝河应用支持 MVVM（Model-View-ViewModel）的架构，通过数据绑定视图的方式，数据发生变化时，会自动触发 UI 的更新。

二、系统架构

系统架构

三、核心特征

3.1天生更智慧

蓝河操作系统，从系统、应用、到工具链全面突破，基于 AI 大模型能力实现 AI 服务引擎和多模输入子系统，带来了多模态输入输出，模拟人与人的交互方式。基于 AI 能力探索出应用开发新范式，打造了诸多智慧操作系统的新型应用。未来将开放 Copilot 工具，提供代码生成、图文生成等能力，带来应用开发的全新生产力工具

3.2天生更流畅

蓝河操作系统从全栈技术视角出发，对多个技术方向进行探索，例如编程语言、运行时 Runtime、系统调度、显示和内存。充分发挥软硬件资源的利用效率，高性能系统架构实现了一系列关键技术，虚拟显卡框架、超级协程机制、Runtime 等，提升了计算、存储、显示的资源效率。

3.3天生更安全

蓝河操作系统从性能和安全两个维度选择了 Rust 语言作为系统开发语言，Rust 语言的所有权模型、生命周期等一系列安全特性，保障了在编译阶段就可以发现内存使用不当导致的安全漏洞。蓝河操作系统是行业首个系统框架由 Rust 语言编写的操作系统，从源头保障了内存安全和并发安全。

四、蓝河应用系统能力开放概览

4.1十二大系统能力

4.2两套 API

为了兼顾高效开发和高性能，蓝河应用提供了两套 API，Javascript API 和 Native API

1. Javascript API 提供了完整的开放能力， 支持开发者高效率地完成应用的开发。
2. Native API 主要聚焦高性能场景，以及方便开发者对原有代码的复用。

4.3三种应用形态

蓝河应用支持应用、表盘、快捷卡片三种应用形态。

1. 应用：它具有完整的功能，可以支持多页面，支持复杂的 UI 交互，支持应用间的跳转和数据交换。它可以在后台运行，在特定场景可以长期运行。
2. 表盘：它具备装饰属性， 也代表了用户的个性化选择。支持普通和 AOD 两种显示模式，支持动态交互和 20 多种数据展示。支持三种开发方案：AI 生成、表盘设计工具制作、代码编程实现。
3. 快捷卡片：是一种高效的信息展示方式，用户无需进入应用，在表盘界面只需左滑，即可查看信息和控制操作。

五、开发尝鲜

5.1准备开发环境

BlueOS Studio 是面向蓝河应用开发推出的一款全新的一站式集成开发环境。开发者可以使用 BlueOS Studio 开发、调试和打包蓝河应用。BlueOS Studio 提供了丰富的功能和工具，可以极大地提高开发效率和代码质量。

下载链接：点击链接进入工具下载页面[1]，安装 BlueOS Studio。

然后拖动安装就可以。

image-20231229171147399

如果您想了解更多关于 BlueOS Studio 的功能和使用方法，请移步BlueOS Studio[2]的详细教程。同时，

5.2检测开发环境

只有所有的都打勾才可以。

我的这个问题解决参考：https://blog.csdn.net/a805492851b/article/details/115301918

首先打开终端，在终端中输入vi ~/.zshrc

会在用户目录下创建一个.zshrc文件

终端界面会进入Vim的普通模式，普通模式下无法编辑，需要按 i 键然后会进入编辑模式

这个时候可以直接在终端中编辑，输入需要设置的内容，输入完了按esc退出编辑模式回到普通模式

然后再分别按 :wq （英文冒号）

MAC bookPro出现zsh: command not found: xxx解决方法：把 bash shell 中.bash_profile 全部环境变量加入zsh shell里就好

step1:

Term执行

open .zshrc

step2:

在弹出的编辑器最下面

加入

source ~/.bash_profile

或者

source .bash_profile

看哪个奏效，这一步就在zshrc执行时将 .bash_profile 全部环境变量加入zsh shell了

保存

step3:

terminal执行

source .zshrc              更新配置

如果到此你已经解决了问题，那恭喜你了，可题主我就没这么幸运，我在terminal执行source .zshrc时报找不到bash_profile，坑爹的有些mac就是没有bash_profile这个文件，需要手动新建，如果你也是这样请继续跟我操作

step:1

terminal执行

touch .bash_profile         创建.bash_profile 
这时候就有了bash_profile这个文件，当然是没有内容的空文件，这里又需要你写入path，我接下来是这么操作的

step:2

创建global安装任务的目录

mkdir ~/.npm-global

step:3

配置npm全局下载时，下载到新的地址目录

npm config set prefix '~/.npm-global'

至此你再npm i xxx -g就会存储到npm-global的地址下了

step:4

open .bash_profile

在弹出的编辑器中增加配置

export PATH=~/.npm-global/bin:${PATH}

保存

step:5

terminal执行

source .bash_profile    更新配置

5.3开发 UI

新建工程

image-20231229173433289

蓝河应用主要使用 UI 组件和样式进行界面的开发。UI 组件是蓝河应用 UI 开发的最小单元，蓝河应用提供了基础、表单，布局/容器、画布、导航、动画、系统风格等类型的一系列组件。组件、样式、js 代码大部分都是写在.ux的文件中。

比如导航实现

  onDetailBtnClick() {
    // 跳转到应用内的某个页面，router 用法详见：文档 -> 接口 -> 页面路由
    router.push({
      uri: '/pages/DemoDetail'
    })
  }

在组件开发基础之上，蓝河应用还提供了丰富的样式支持，因此开发者可以开发出包含自己独特风格的蓝河应用。样式可以声明在style标签内也可以通过 style 属性以内联样式的形式声明在组件标签上。

image-20231229172111596

当然如果你想进一步了解组件、样式、js 代码是如何组织的，可以移步ux 文件[3]进行更详细的了解。

如果您想了解更多关于样式的详细信息，请移步style 样式[4]。

蓝河应用支持的通用样式情况的详细信息，可以移步了解通用样式支持[5]

5.4开发业务功能

蓝河应用提供了 JS API 和 Native API 两种接口，以支撑高效和高性能的开发场景。开发者可以根据需要选择不同的接口进行开发，以获得更好的开发体验和应用性能。

1.JS API 提供了完整的开放能力， 支持开发者高效率地完成应用的开发。开发者可以实现应用生命周期监听、系统弹窗、多设备互联等操作，如果您需要了解更多关于这些开放能力的信息，请移步JS 功能接口[6]进行了解。

2.Native API 主要聚焦高性能场景，支持 Posix API 以及部分系统能力如连接能力、数据存储能力、通信能力等。

现阶段，.Native API 以定向合作的形式向合作方提供 Native 开发能力，合作方通过调用 Native API，作为系统能力的一部分提供给 JS 侧开发使用。

5.5开发调试

在开发的过程中，可以首先使用 BlueOS Studio 的模拟器[7]查看开发的界面效果。

image-20231229172746329

此外，开发者经常会遇到到 UI 问题、网络问题、内存问题等，BlueOS Studio 也提供了对应的分析面板，例如：UI 调试[8]、网络调试[9]、内存调试[10]、日志[11]，助力开发者更高效地定位问题。

开发完成后，开发人员需要对应用进行测试。BlueOS Studio 提供了自动化测试的功能[12]，助力开发者提高测试效率。

5.6发布

开发测试完成后，就来到了最后的发布环节，开发者可以使用 BlueOS Studio 的打包功能[13]，将开发的应用打成 rpk 包，如果是第一次打包，需要先生成证书[14]。

image-20231229173157258

打包完成后，前往发布平台发布[15]后，蓝河操作系统的用户即可使用到对应的蓝河应用。

到此你的蓝河 Studio vivo应用开发之旅就正式的开始了，坚果也只能陪你到这了，如果需要坚果派的一直陪伴，可以关注“大前端之旅”这个公众号。

六、总结

本次开发体验到此结束。这里想吐惨的就是为啥用的是pnpm这个包管理工具，既然都要检测npm的环境，难道就是因为 pnpm是速度快、节省磁盘空间的软件包管理器吗？对于应用开发的体验来说，因为可参考的文档，官网都写的很详细。所以上手还是蛮快的。