OpenHarmony开发实战：Stage模型下Ability的创建和使用（ArkTS）(1)

│ ├──pages
│ │ ├──DetailsPage.ets // 详情页面
│ │ └──NavPage.ets // 导航页面
│ ├──view // 自定义组件目录
│ └──viewmodel // 视图业务逻辑文件目录
└──entry/src/main/resources // 资源文件目录

### 创建Ability和Page页面


在本篇教程中，我们需要创建两个Ability：EntryAbility，DetailsAbility，其中EntryAbility是由工程默认创建的，这里我们只讲如何创建DetailsAbility。


* 使用DevEco Studio，选中对应的模块，单击鼠标右键，选择New > Ability，在对话框中修改名字后，即可创建相关的Ability。
* 创建完Ability后，需要我们为Ability设置page页面，选中pages目录，单击鼠标右键，选择New > Page，在对话框中修改名字后，即可创建相关的Page页面。示例代码如下：

 

// DetailsPage.ets
…
@Entry
@Component
struct DetailsPage {
private goodsDetails: GoodsData = new GoodsData();

aboutToAppear() {
if (position !== undefined) {
this.goodsDetails = viewModel.loadDetails(position);
}
}

build() {
Column() {
Scroll() {
Column() {
Stack({ alignContent: Alignment.Top }) {
// 商品图片预览组件
PreviewerComponent({ goodsImg: this.goodsDetails.goodsImg })
this.TopBarLayout()
}
.height(DetailsPageStyle.TOP_LAYOUT_HEIGHT)
.width(PERCENTAGE_100)
.backgroundColor(KaTeX parse error: Expected 'EOF', got '}' at position 91: …yout() }̲.width(PERCENTA…r(‘app.color.background’))
// 底部工具栏
BottomBarComponent().height(DetailsPageStyle.TOOLBAR_WEIGHT)
}
.height(PERCENTAGE_100)
.width(PERCENTAGE_100)
}
…
}

* 使用windowStage.loadContent为指定Ability设置相关的Page页面，由于配置流程一样，我们在这里只展示为DetailsAbility配置页面的核心代码：

 

// DetailsAbility.ts
…
export default class DetailsAbility extends UIAbility {
…
onWindowStageCreate(windowStage: window.WindowStage): void {
…
windowStage.loadContent(‘pages/DetailsPage’, (err, data) => {
if (err.code) {
hilog.error(DETAIL_ABILITY_DOMAIN, TAG, ‘Failed. Cause: %{pub