与 Vue2 的差异
BlueOS 模板语法与 Vue2 相似,但运行时既不是 Vue,也不是浏览器。本页说明两者的技术渊源,并对比 BlueOS 与 Web 开发中的高频差异。
蓝河系统(BlueOS)的应用开发框架语法继承自快应用,JavaScript 运行在 QuickJS 引擎上,而不是浏览器中的 V8 或 JavaScriptCore。
快应用的语言开发规范吸收了 Android 与 Vue2 的部分设计。页面采用类组件的声明方式组织,数据绑定与指令写法接近 Vue2,布局与样式则更接近原生 UI 体系。BlueOS 支持的 JavaScript、CSS 和 HTML 能力是 W3C 标准的子集,并非完整的 Web 平台。
这些运行时差异带来以下限制:
- 指令名称、事件绑定和循环变量顺序与 Vue2 不完全相同。
- 运行时没有浏览器文档对象模型(DOM),不能使用
document、window和querySelector等 API。 - CSS 仅支持平台声明的子集。
display主要使用flex和none,不支持完整的grid、gap和rem等能力。 - 依赖 DOM 或 Node.js 内置模块的 npm 包不能直接运行。
Web 与 BlueOS 写法对照
Section titled “Web 与 BlueOS 写法对照”| Web / Vue | BlueOS |
|---|---|
@click="handler" / v-on:click | onclick="handler" |
v-for="item in list" | for="{{(index, item) in list}}"(index 在前) |
v-if / v-show | if="{{cond}}" / show="{{cond}}" |
:prop="x" | prop="{{x}}" |
document / window / querySelector | 无 DOM;用 @blueos.* 模块 |
localStorage | @blueos.storage.storage(能力名为 blueos.storage.storage) |
display: block / grid | 只有 flex 和 none |
gap | 子元素 margin(没有 :last-child) |
rem / em / vw / vh | px 或 % |
| 依赖 DOM 或 Node.js 内置模块的 npm 包 | 不能直接运行 |
事件参考文档允许使用 @click 作为 onclick 的简写。本教程统一使用 onclick,以便明确区分 BlueOS 与 Vue 的事件语法。两种写法都不会改变 BlueOS 的循环变量和数据绑定规则。
开发时必须遵守的规则
Section titled “开发时必须遵守的规则”- 事件绑定表达式中不得使用
{{ }}。应使用onclick="openDetail(item)",不得使用onclick="openDetail({{ item }})"。错误写法会导致黑屏,并产生create_function: value is not an object日志。 - 新的响应式字段必须在
data中声明,或通过this.$set添加。如果data中没有title,直接执行this.title = 'x'不会更新界面。 - 使用系统 API 前,必须在
manifest.json的features中声明对应能力。页面路由无需声明。