常见问题

更新时间：2024-09-01 11:23:12

回答了开发者可能关心或遇到的常见问题，包括如何使用 BlueOS Studio 进行高效开发、如何提升开发效率等， 持续更新中，如果您有任何问题，欢迎通过开发者社区向我们提问，我们会尽快给您回复。

1. 如何使用 BlueOS Studio 进行高效开发？

1.1 如何快速开始开发？

可通过以下三个入口，都可以打开新建界面：

• 通过 「文件」「新建工程」菜单打开功能界面。
• 欢迎界面，点击「新建工程」 按钮打开功能界面。
• 侧边栏 快捷入口 ，点击「新建工程」 打开功能界面。

工程新建后，根据提示依次点击「安装依赖」、「重新启动编译」即可启动项目。一般而言，无需做其他任何操作。

1.2 如何实现代码快速编写？

BlueOS Studio 内置了诸多语法辅助功能，诸如：template 区域内补全、style 区域内补全、script 区域内补全 等等，如果您花费些功夫，了解下如何使用，可令您的犀利操作「更上一层楼」。详情可参见文档：ux 文件语法辅助。

1.3 如何快速新建页面、组件？

在蓝河应用中新建页面，不仅需要新建 .ux 文件，而且需要在 manifest.json 增加相应配置。

• 在模版脚本中内置命令，使您可通过运行：yarn gen YourPageName 来快速新建页面；
• 也可以通过 BlueOS Studio 提供的图形化操作来完成，详情可参见文档：其他新建功能。

1.4 BlueOS Studio 有哪些常用快捷键推荐？

其他还有些复合操作，诸如：向上选择多行代码，可以先在代码行结尾处，按住 Ctrl Shit left，然后松开 Ctrl 和 left，按 up 或 down 键，即可实现向上/向下选择多行代码；当然，您愿意的话，亦可使用鼠标🖱️（自身经验是，通过快捷键练习，达到肌肉记忆，这种效率更高些）；无论如何，尊总自己喜好，按照您觉得快乐的方式。

2. 如何在应用开发中使用 Tailwind CSS 提升开发效率？

Tailwind CSS 是一个实用为先的 CSS 框架，用于快速构建自定义用户界面。它包含了诸如 flex、pt-4、text-center 和rotate-90 等类，这些类可以直接在你的标记中构建任何设计。您可以使用 Tailwind，轻松制作美观现代化的网站，而不用复杂 CSS 技巧和设计相关知识，且无需离开您的 HTML。

在 BlueOS Studio 中，我们已经为您提供了一个基于 Tailwind CSS 的示例项目模板，可以直接新建使用。下面主要介绍下过程和原理：

安装 Tailwind CSS

通过 npm 安装 tailwindcss 并创建 tailwind.config.js 文件，具体命令如下：

npm install -D tailwindcss
npx tailwindcss init

配置您的模板路径

在文件中添加所有模板文件的路径 tailwind.config.js，参考性配置如下：

module.exports = {
  mode: 'jit',
  content: [
    './src/**/*.{ux,html,js,svelte,vue,ts}',
    './node_modules/flowbite/**/*.js',
  ],
  purge: {
    enabled: true,
    content: [
      './src/**/*.{ux,html,js,svelte,vue,ts}',
      './node_modules/flowbite/**/*.js',
    ],
  },
  // https://tailwindcss.com/docs/configuration#core-plugins
  corePlugins: {
    preflight: false, // 禁用基础样式
    container: false, // 禁用容器组件
    content: false, // 禁用伪元素内容相关样式
    accessibility: false, // 禁用辅助功能样式
    backgroundOpacity: false, // 禁用 background-opacity 样式
    textOpacity: false, // 禁用 text-opacity 样式
    backdropBlur: false, // 禁用 backdrop-blur 样式
    backdropBrightness: false, // 禁用 backdrop-brightness 样式
    backdropContrast: false, // 禁用 backdrop-contrast 样式
    backdropGrayscale: false, // 禁用 backdrop-grayscale 样式
    backdropHueRotate: false, // 禁用 backdrop-hue-rotate 样式
    backdropInvert: false, // 禁用 backdrop-invert 样式
    backdropOpacity: false, // 禁用 backdrop-opacity 样式
    backdropSaturate: false, // 禁用 backdrop-saturate 样式
    backdropSepia: false, // 禁用 backdrop-sepia 样式
    willChange: false,
  },
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

将 Tailwind 指令添加到您的 CSS 中

@tailwind 将 Tailwind 每个层的指令添加到您的主 CSS 文件中。

/* input.css */

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

启动 Tailwind CLI 构建过程

运行 CLI 工具来扫描模板文件中的类并构建 CSS，参考性命令如下：

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

这是看起来路径简短的方式，实际上这个 input.css 和 output.css，无论是名字，或是它存在的路径，皆可以自行指定，您可以按照自己喜欢的方式、或是团队约定俗成的形式；譬如统一存放在：src/assets/styles 目录下。

开始在 UX 中使用 Tailwind

将已编译的 CSS 文件，在 .ux （非 app.ux）文件中，通过 @import 方式引入；

<style>
  @import './../../output.css';
</style>

现在，即可在 .ux 的 template 中，开始使用 Tailwind 的实用程序类来设置内容的样式，如下面这段代码示例：

<template>
    <div class="bg-blue-300 w-full flex flex-col justify-center items-center">
      <text class="text-red-600">TailwindCSS Area</text>
      <text class="text-red-600">Awesome TailwindCSS</text>
    </div>
</template>

当您写完保存之后，打开 output.css 即可如下的 CSS 代码：

/* @tailwind base; */

.flex {
  display: flex
}

.w-full {
  width: 100%
}

.flex-col {
  flex-direction: column
}

.items-center {
  align-items: center
}

.justify-center {
  justify-content: center
}

.bg-blue-300 {
  background-color: #93c5fd
}

.text-red-600 {
  color: #dc2626
}

至此，在应用开发中引入 Tailwind CSS 的准备工作，已经初步完成，您可以与 Tailwind CSS 开启愉快合作之旅，从而促使高效编码、提前完工。假如，您对 Tailwind CSS 尚不熟悉，可通过查阅 Tailwind CSS Doc ，亦可在线体验—— Tailwind Playground 。

常见问题及说明

如果您熟悉 Web 开发，针对上述教程，您可能会有诸多疑惑；实际上，笔者在实践之时，也有发现，只不过因为各种机制限制，目前只能如此。下面就与诸君分享，期可解惑：

• 不能在 script 标签中，引入输出 CSS 文件么？

按 Web 开发习惯，在 app.ux 文件中可以直接 import 输出 CSS 文件（如下代码所示），那为何未建议如此呢？

<script>
import './output.css'
</script>

因为这样做会报如下错误；具体是缺乏与之匹配的 loader；当然，可以使用 css-loader 和 style-loader 来处理 CSS 文件，详见 ChatGPT | You may need an appropriate loader....。

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| /* @tailwind base; */

但在应用开发过程中，却不能生效；因为 style-loader 的作用是将 CSS 注入 DOM，其中用到了诸多浏览器 API（document），但其运行环境止于 v8，实际的渲染是由 Android 底层完成，并未走浏览器这条路，因此无法工作。在构建工具优化、兼容之前，通过 style 标签中引入 CSS，成了主要选择。

• 为何在 tailwind.config.js 禁用如此多样式？

Tailwind corePlugins 部分允许您完全禁用 Tailwind 通常默认生成的类（如果您的项目不需要它们）；这个设计对于应用实在必要，在上述示例中，对 text-opacity 等样式进行禁用，也是无奈之举。具体原因在于以下两点：

其一：应用标准虽然基于 Web 技术栈，但只是 Web 标准子集，如蛮多 CSS 属性并不能很好的支持；其二：默认情况下，TailwindCSS 会将样式属性的值存储为 CSS 变量（例如 --tw-text-opacity），以便进行动态计算和响应式设计。

如此一来，在 template 中用 text-red-300 类，输出的便是如何 CSS，这个写法在应用中并不能得到正确解析，于是禁用便成了必须要做之事；当然，这样也有利于输出更小提及的 CSS 文件。其他属性亦复如是。

.text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / var(--tw-text-opacity))
}

• 为何要在 input.css 中移除 @tailwind base; ？

/* input.css */

/* @tailwind base; */
@tailwind components;
@tailwind utilities;

在一般 Web 开发过程中，会将 base、components、utilities 等指令，都添加到 CSS 文件项目中；但，在应用开发过程中，这是累赘；因为它的存在，会使得 output.css 输出较多对项目没有裨益额外内容（如下代码所示），故而移除；这与通过 corePlugins 禁用基础样式（preflight）、禁用容器组件（container）作用类似。

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  ......
}
::backdrop {
  --tw-border-spacing-x: 0;
  ......
}

以上，就是在应用开发过程中，引入 Tailwind CSS 所需的操作、以及常见问题说明。或许还有异常更多情况没有考虑到，如果您在实际运用过程中，欢请留言交流、反馈、分享。