企业官网建设流程全解析

• 登录页 ↔ 注册页：文字按钮互相跳转
• 登录页 → 首页：账号密码正确弹窗提示后跳转
• 首页 → 登录页：退出登录清空页面栈返回登录
• 统一 UI：输入框圆角、蓝色按钮、弹窗提示、表单非空校验

第一步：配置页面路由（main_pages.json）

步骤 1：配置路由文件 main_pages.json（必须先做）

文件路径：entry/src/main/resources/base/profile/main_pages.json所有页面必须在此注册，否则跳转报错找不到页面

打开entry/src/main/resources/base/profile/main_pages.json，在 src 数组中添加三个页面路径，代码如下：

配置说明

• 数组第一个为应用默认启动页面（登录页）
• 路径与页面文件名完全一致，区分大小写，不带.ets后缀

步骤 2：登录页面 Login.ets（沿用你文档的 UI 样式 + 新增跳转注册）

引入路由router、弹窗AlertDialog，保留原有输入框、清除按钮，新增去注册文字跳转按钮，登录成功弹窗后跳转首页

第二步：编写登录页面

完整代码：

登录页界面预览

-origin_id="

关键新增逻辑说明

1. 导入router实现页面跳转
2. 登录弹窗增加确认按钮回调，点击后跳转首页
3. 底部蓝色文字按钮：router.pushUrl跳注册页，保留返回栈

步骤 3：注册页面 Register.ets（同 UI 风格，注册成功返回登录）

新建文件pages/Register.ets，复用登录页输入框样式，增加确认密码，注册成功弹窗跳转回登录页

第三步：编写注册页面

完整代码：

注册页跳转逻辑

1. 底部文字：router.back()返回登录页（销毁当前注册页面）
2. 注册成功弹窗点击「去登录」：pushUrl 重新打开登录页

第四步：编写接收参数的主页

完整代码：

预览器预览

点击“新用户注册”跳转“用户注册”页面，完成注册点击跳转“登录”页面，然后就可以登录账号跳转进去

步骤 4：登录首页 Home.ets（退出登录返回登录页）

新建文件pages/Home.ets，登录成功进入，提供退出登录功能，使用replaceUrl清空页面栈，无法返回首页

ps：

1. 页面跳转 API

• url：必须填写在main_pages.json里注册过的页面路径
• params：页面之间传递数据的对象

2.接收路由参数

在onPageShow生命周期中执行，每次打开页面都会获取参数：

const params = router.getParams() as Record<string,string>

3.双向绑定

@State装饰器定义变量，配合TextInput的text和onChange完成双向数据绑定。

4.弹窗 AlertDialog

使用前必须在文件顶部导入模块：

步骤 5：完整三方跳转流程梳理

1. 登录页 → 注册页点击底部蓝色文字「没有账号？前往注册」→router.pushUrl("pages/Register")
2. 注册页 → 登录页 两种方式
   • 点击「已有账号？返回登录」：router.back()直接返回栈内登录页
   • 注册成功弹窗点击「去登录」：router.pushUrl("pages/Login")新开登录页
3. 登录页 → 首页输入账号root、密码root，登录弹窗点击「进入首页」跳转
4. 首页 → 登录页点击退出登录，弹窗确认后router.replaceUrl跳转登录，销毁首页

常见报错解决

1、点击按钮无法跳转页面

• 检查main_pages.json是否注册当前页面
• 检查url路径和文件名大小写、横杠完全一致
• 确认代码写在.onClick()里面，不能直接写在Column

1. router未定义在页面第一行添加路由导入：

import router from '@ohos.router';

1. 弹窗 AlertDialog 报错缺少对应模块导入，补充：

import AlertDialog from '@ohos.alertDialog';

4、Only UI component syntax can be written here路由代码写在了按钮外面，必须包裹在onClick(()=>{})回调函数内部。