Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 46 additions & 35 deletions docs/GETTING-STARTED.md
Original file line number Diff line number Diff line change
Expand Up @@ -753,18 +753,18 @@ $ npx taro build --type harmony-hybrid

- 把 Taro 项目目录下的 `dist` 目录的编译产物复制到鸿蒙应用的 `src/main/resources/rawfile` 目录下,编译运行鸿蒙应用进行开发调试。

### ASCF元服务
### ASCF 元服务

若需将 Taro 代码编译为 ASCF 元服务,需在编译命令中指定平台参数为 `ascf`,并确保满足以下条件:
- 代码中需包含 ASCF 元服务编译条件:`"ascf"`(需在项目配置中声明)。
- 配置文件 `project.ascf.json` 需存在于项目根目录。
若需将 Taro 代码编译为 ASCF 元服务,需在编译命令中指定平台参数为 `ascf`,并确保满足以下条件:

- 代码中需包含 ASCF 元服务编译条件:`"ascf"`(需在项目配置中声明)。

示例命令:
```bash
taro build --type ascf

#### 编译命令

```bash
taro build --type ascf

# pnpm
$ pnpm dev:ascf
$ pnpm build:ascf
Expand All @@ -789,47 +789,58 @@ $ npx taro build --type ascf
$ set NODE_ENV=production && taro build --type ascf --watch # CMD
$ NODE_ENV=production taro build --type ascf --watch # Bash


```

开发者工具
#### 开发者工具

工具准备:
下载并安装 鸿蒙开发者工具,确保已配置ASCF元服务开发环境。
导入项目:
打开鸿蒙开发者工具,选择 导入项目。
选择项目根目录下的 dist/ascf 目录(需确保已通过编译命令生成)。
配置校验:
确认项目中存在 project.ascf.json 文件(元服务专属配置)。
检查配置文件字段是否符合规范(如 minPlatformVersion、permissions 等)。
注意事项

在开发者工具中需设置:
下载并安装 鸿蒙元服务 ASCF 项目[开发环境搭建指南](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/ascf-development-process),确保已配置 ASCF 元服务开发环境。

关闭 ES6 转 ES5 功能(开启可能导致语法错误)。
关闭 上传代码时样式自动补全(开启可能引发样式异常)。
关闭 代码压缩上传(开启可能影响调试信息)。
在 taro 项目根目录下创建 ascf-project 目录,并使用工具在该目录下创建 ASCF 元服务项目。

格式说明
修改 taro 项目下 config/index.{js,ts}配置文件,编译 ASCF 项目情况下将 outputRoot: 'dist/ascf' 修改为 outputRoot: process.env.TARO_ENV === 'ascf' ? 'ascf-project/ascf/ascf_src' : 'dist'。

编译命令:
使用 --type ascf 指定平台类型,与其他小程序(如 --type weapp)格式统一。
支持 dev:ascf(开发模式)和 build:ascf(生产模式)。
开发者工具:
明确指向编译后的 dist/ascf 目录,与微信小程序的 dist 目录逻辑一致。
强调 project.ascf.json 为必需配置文件(类比 project.swan.json)。
注意事项:
与其他小程序保持完全一致的关闭选项,避免开发者混淆。

效果验证
调试运行:
编译后文件在 ascf-project/ascf/ascf_src 目录下。参考鸿蒙元服务 ASCF 项目[开发流程](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/ascf-development-process) 调试运行 ascf-project 项目。如果运行有异常,可以参考[调试指南](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/debug-ascf-code)解决。

执行编译命令后,检查 dist/ascf 目录是否包含以下文件:
manifest.json(元服务描述文件)
页面代码及资源文件
在鸿蒙开发者工具中运行项目,确保:
页面渲染正常,无白屏或报错。
声明的权限(如定位、相机)可正常触发弹窗申请。
#### 适配问题

- ASCF的app.json配置还不支持theme变量,需要适配修改为具体的值:
```javascript
{
window: {
backgroundColorTop: '@bgColorTop',
backgroundColorBottom: '@bgColorBottom',
backgroundTextStyle: '@bgTxtStyle',
navigationBarBackgroundColor: '@navBgColor',
navigationBarTitleText: 'ascf',
navigationBarTextStyle: '@navTxtStyle'
}
}
```
改为:

```javascript
const theme = require('./theme.json');
const $t = (key) => process.env.TARO_ENV === 'ascf' ? theme.light[key.replace('@', '')] : key;

defineAppConfig({
{
window: {
backgroundColorTop: $t('@bgColorTop'),
backgroundColorBottom: $t('@bgColorBottom'),
backgroundTextStyle: $t('@bgTxtStyle'),
navigationBarBackgroundColor: $t('@navBgColor'),
navigationBarTitleText: 'ascf',
navigationBarTextStyle: $t('@navTxtStyle')
}
}
})
```

## 渐进式入门教程

Expand Down
43 changes: 38 additions & 5 deletions versioned_docs/version-3.x/GETTING-STARTED.md
Original file line number Diff line number Diff line change
Expand Up @@ -713,13 +713,12 @@ $ npx taro build --type harmony-hybrid

- 代码中需包含 ASCF 元服务编译条件:`"ascf"`(需在项目配置中声明)。

示例命令:

#### 编译命令

```bash
taro build --type ascf

#### 编译命令

# pnpm
$ pnpm dev:ascf
$ pnpm build:ascf
Expand All @@ -744,10 +743,9 @@ $ npx taro build --type ascf
$ set NODE_ENV=production && taro build --type ascf --watch # CMD
$ NODE_ENV=production taro build --type ascf --watch # Bash


```

开发者工具
#### 开发者工具

工具准备:
下载并安装 鸿蒙元服务 ASCF 项目[开发环境搭建指南](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/ascf-development-process),确保已配置 ASCF 元服务开发环境。
Expand All @@ -763,6 +761,41 @@ $ NODE_ENV=production taro build --type ascf --watch # Bash
调试运行:
编译后文件在 ascf-project/ascf/ascf_src 目录下。参考鸿蒙元服务 ASCF 项目[开发流程](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/ascf-development-process) 调试运行 ascf-project 项目。如果运行有异常,可以参考[调试指南](https://developer.huawei.com/consumer/cn/doc/atomic-ascf/debug-ascf-code)解决。

#### 适配问题

- ASCF的app.json配置还不支持theme变量,需要适配修改为具体的值:
```javascript
{
window: {
backgroundColorTop: '@bgColorTop',
backgroundColorBottom: '@bgColorBottom',
backgroundTextStyle: '@bgTxtStyle',
navigationBarBackgroundColor: '@navBgColor',
navigationBarTitleText: 'ascf',
navigationBarTextStyle: '@navTxtStyle'
}
}
```
改为:

```javascript
const theme = require('./theme.json');
const $t = (key) => process.env.TARO_ENV === 'ascf' ? theme.light[key.replace('@', '')] : key;

defineAppConfig({
{
window: {
backgroundColorTop: $t('@bgColorTop'),
backgroundColorBottom: $t('@bgColorBottom'),
backgroundTextStyle: $t('@bgTxtStyle'),
navigationBarBackgroundColor: $t('@navBgColor'),
navigationBarTitleText: 'ascf',
navigationBarTextStyle: $t('@navTxtStyle')
}
}
})
```

## 渐进式入门教程

我们提供了一个由浅入深的实战教程,请参考[《教程》](./guide)。
Expand Down