企业官网建设流程全解析

开发环境：DevEco Studio 6.0.1

一、

1.1 注册页面 RouterRegister.ets

typescript

运行

import router from '@ohos.router'; @Entry @Component struct RouterRegister{ build() { Column({space:25}){ Image($r('app.media.banner1')) .width(120) .height(120) .borderRadius(60) Text("注 册") .fontSize(32) .fontWeight(FontWeight.Bolder) Row(){ Text("账号") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput() .width('60%') .height(50) } Row(){ Text("密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput() .width('60%') .height(50) .type(InputType.Password) } Row(){ Text("确认密码") .fontSize(26) .width('40%') .textAlign(TextAlign.Center) TextInput() .width('60%') .height(50) .type(InputType.Password) } Text("已有账号，立即登录") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterLogin" }) }) Button("立即注册") .width('100%') .height(50) .fontSize(24) } .width('100%') .height('100%') .padding(15) } }

1.2 登录页面 RouterLogin.ets

typescript

运行

import router from '@ohos.router'; @Entry @Component struct RouterLogin{ build() { Column({space:25}){ Image($r('app.media.banner0')) .width(120) .height(120) .borderRadius(60) Text("登 录") .fontSize(32) .fontWeight(FontWeight.Bold) Row({space:15}){ Text("账 号") .fontSize(26) TextInput() .width("70%") .height(50) } Row({space:15}){ Text("密 码") .fontSize(26) TextInput() .width("70%") .height(50) .type(InputType.Password) } Text("没有账号，立即注册") .fontSize(22) .fontColor(0xababab) .onClick(()=>{ router.pushUrl({ url:"pages/RouterRegister" }) }) Button("立 即 登 录") .width('100%') .height(50) .fontSize(24) } .width('100%') .height('100%') .padding(15) } }

1.3 页面路由注册配置文件

json

{ "src": [ "pages/Men", "pages/Index", "pages/second", "pages/RouterDemo", "pages/Resister", "pages/LoginPage", "pages/RouterLogin", "pages/RouterRegister" ] }

二、步骤 2：解析页面顶层基础语法

以任意页面开头代码举例：

typescript

运行

import router from '@ohos.router'; @Entry @Component struct RouterRegister{ build() { // 所有UI布局代码 } }

1. import router from '@ohos.router';导入系统路由工具包，是实现页面跳转的前提，不导入则无法使用跳转 API。
2. @Entry装饰器标记当前组件为独立页面，只有添加该装饰器的组件，才能被路由识别、单独打开。
3. @Component装饰器声明这是一个自定义 UI 组件，所有页面、复用组件必须搭配该装饰器使用。
4. struct RouterRegisterArkTS 使用结构体定义页面，RouterRegister是页面唯一名称，对应文件名称。
5. build(){}函数页面渲染核心函数，所有界面组件必须写在 build 内部，页面最终展示效果由 build 内代码决定。

三、步骤 3： Column 垂直布局

代码最外层根容器：Column({space:25})

1. Column 作用：内部所有组件垂直从上到下依次排列，是本案例页面的根布局。
2. {space:25}参数：控制 Column 内部所有子组件之间统一垂直间距 25。
3. 后置样式：
   • .width('100%') .height('100%')：让布局占满手机全屏；
   • .padding(15)：容器四周预留 15 内边距，防止内容紧贴屏幕边缘。

四、步骤 4：水平布局 Row（表单行布局）

案例存在两种 Row 写法，分开解析：

4.1 注册页无间距 RowRow(){}

内部通过width('40%')、width('60%')百分比分割同一行左右宽度，手动分配文字与输入框占比。

4.2 登录页带间距 RowRow({space:15})

space:15代表同一行内文字与输入框自动留出 15 像素水平间隔，不需要手动划分百分比。

五、步骤 5：、页面基础 UI 组件

5.1 Image 图片组件

typescript

运行

Image($r('app.media.banner1')) .width(120) .height(120) .borderRadius(60)

1. $r('app.media.banner1')：系统资源读取语法，读取项目 media 文件夹下名为 banner1 的图片；
2. width/height：固定图片宽高 120；
3. borderRadius (60)：圆角值等于宽高一半，实现圆形头像效果。

5.2 Text 文本文字组件

通用属性分步说明：

• 文本内容：Text("注 册")填写展示文字；
• .fontSize(32)：设置文字大小；
• .fontWeight(FontWeight.Bold)：文字加粗；
• .fontColor(0xababab)：设置文字灰色；
• .textAlign(TextAlign.Center)：文字在自身宽度内居中。

5.3 TextInput 输入框组件

1. 普通输入框：直接写TextInput()，支持输入普通文字账号；
2. .type(InputType.Password)：密码模式，输入内容自动隐藏为黑点，用于密码输入。

5.4 Button 按钮组件

Button("立即注册")生成可点击按钮，可设置宽高、字号，原生代码仅做样式展示，无点击逻辑。

六、步骤 6：解析点击交互事件 onClick

代码片段：

typescript

运行

Text("已有账号，立即登录") .onClick(()=>{ router.pushUrl({ url:"pages/RouterLogin" }) })

1. .onClick(回调函数)：绑定点击事件，Text、Button 等组件都支持；
2. 大括号内为点击后执行的代码，本案例点击文字就执行页面跳转逻辑。

七、步骤 7：核心路由功能分步解析

7.1 跳转 API：router.pushUrl

typescript

运行

router.pushUrl({ url:"pages/RouterLogin" })

1. url 参数：填写目标页面路径，格式固定pages/页面文件名；
2. 功能：打开新页面，页面加入页面栈；点击手机返回键，可回到上一页。

7.2 路由配置 src 数组作用（json 配置）

json

"src": [ "pages/RouterLogin", "pages/RouterRegister" ]

分步规则：

1. 所有需要跳转的页面，必须在 src 数组中写入完整路径；
2. 跳转 url 字符串必须和数组内容完全一致，区分大小写；
3. 页面未写入数组，跳转时会报错 “找不到页面”。

八、步骤 8：完整页面跳转执行流程拆解

1. 运行项目打开注册页 RouterRegister；
2. 页面从上至下渲染：圆形图片→注册标题→账号行→密码行→确认密码行→跳转文字→注册按钮；
3. 用户点击灰色文字 “已有账号，立即登录”，触发 onClick 事件；
4. 执行router.pushUrl，读取 url 值pages/RouterLogin；
5. 系统去 json 配置 src 数组匹配路径，确认页面合法；
6. 加载并打开登录页面 RouterLogin；
7. 在登录页点击底部文字，反向执行相同逻辑，跳转回注册页；
8. 任意页面点击手机返回按键，可回到上一个页面。

九、分步知识点汇总

1. 页面定义步骤：导入路由包 → @Entry+@Component 装饰器 → struct 页面名称 → build 布局函数；
2. 布局搭建步骤：外层 Column 全屏垂直布局 → 内部 Row 实现单行表单；
3. 界面渲染步骤：图片组件→标题文本→多组输入框→可点击文字→底部按钮；
4. 交互实现步骤：组件绑定 onClick 点击事件 → 事件内部执行路由跳转；
5. 路由生效步骤：页面文件创建 → json 配置 src 注册页面路径 → pushUrl 填写对应路径跳转。