视频演示
B站链接：https://www.bilibili.com/video/BV1Ku4y1w7St
项目预览
 |
 |
 |
 |
|---|---|---|---|
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
 |
- 操作系统：Windows 11 专业版 22H2
- 开发工具：DevEco Studio 4.0 Release版本
- 开发语言：ArkTS
- node.js：v16.20.1
- ohpm:1.2.5
- ArkTS语法(基本语法、状态管理、渲染控制)
- UI(ArkTS声明式开发)及预览
- HTTP数据请求
- 启动页+底部导航框架
- 底部导航框架使用：Tabs+tabBar
- 在entryability/EntryAbility.ts的windowStage.loadContent中表明启动显示页面
- 在resources/base/profile/main_pages.json添加Pages页面
- 网络请求框架(HttpService(网络请求封装)+ResponseResult(返回结果)+HttpRequest(网络请求Promise)+HttpConfig(相关配置))
- Stage模型，在module.json5配置文件中声明权限(比如网络权限
ohos.permission.INTERNET) - bean包将接口返回结果封装成数据Bean
- viewmodel中Promise+async解析结果数据为Bean
- Page页面aboutToAppear(页面即将显示)方法中调用viewmodel中的接口
- 使用UI容器(Scroll、Row、Column、List)和常用组件Text、Image搭建UI界面
- 自定义组件用于List-ListItem使用
- Swiper实现轮播图
- @State实现数据变化监听
- 样式文件实现复杂布局
- Resource：color-颜色命名文字不能大写，float-fp后缀对应文字，vp后缀对应宽度长度
- ForEach循环生成多组件
- ListItemGroup分组列表组件
- Flex弹性布局组件
- 导航页面
- Tabs+ForEach(TabContent(TreeList-数据列表)+tabBar)组件展示各Tab标题下对应的列表
@Watch装饰器：状态变量更改通知。@Watch('changeTab')中声明changeTab方法@Link装饰器：父子双向同步。@Link currentIndex: number中父组件ProjectPage传递当前tabIndex给ProjectList用于展示列表数据- 项目界面
1- 布局
- 消息
- 我的
- 登录、注册
- 设置
- 导航-知识体系下的文章
- WebView显示网页内容
2-技术点
- Preferences、PersistentStorage保存永久性数据
- 组件：GridRow、GridCol、webview等
- 页面间转场动画：pageTransition
- 登录和注册成功后，保存cookie到PersistentStorage中，再次请求时，从AppStorage中获取cookie
- 页面间导航：
- 1-router(router.pushUrl({url: 'pages/Detail',urlparams: paramsInfo})；
- 2-Navigator({ target:url, type: NavigationType.Push }) {}.params({key:value}
- 参数获取
- const params = router.getParams(); // 获取传递过来的参数对象
- const id = params['id']; // 获取id属性的值
- OpenHarmony 3.1.1 Release 升级到OpenHarmony 4.0 Release
- hvigor中hvigorVersion从2.4.2升级到3.0.9
- 导入下拉刷新库@ohos/pulltorefresh (V2.0.1)——说明，最新版本适配api10，不适用于当前项目
- home页面添加下拉刷新和上拉加载功能
- 项目/导航 页添加刷新和加载更多功能
- 去掉module.json5中为了预览添加的@Entry装饰器
- 我的-积分，跳转积分页面
- 我的-排行，跳转排行页面