鸿蒙实战案列-欢迎页面

前言

        在黑马康健应用开辟的过程中，欢迎页面每每是首个吸引用户眼光的存在。所以欢迎页面要注重简便性和功能性，确保用户能敏捷理解主要功能和特点。所以介绍一下怎样用HarmonyOS构建欢迎页面。

---

一、页面计划

    欢迎页面整体的布局非常简单，是一个从上到下的列式布局，所以使用Column就行了。同时整个页面的配景致是一个绿色，所以需要加上一个绿色配景致铺满整个屏幕，宽高比都是100%。整个页面从上到下第一部门是一个logo，是一个图片然后再往下黑马康健这是个logo，同样也是一个图片，再往下有三行文本介绍，所以整个页面结构很简单

二、相干代码

1.欢迎页面的UI

代码如下：

1. import common from '@ohos.app.ability.common'
2. import preferences from '@ohos.data.preferences'
3. import router from '@ohos.router'
4. import preferenceUtil from '../common/utils/PreferenceUtil'
5. import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
6. @Extend(Text) function opacityWhiteText(opacity:number ,fontSize:number=10){
7.   .fontSize(fontSize)
8.   .opacity(opacity)
9.   .fontColor(Color.White)
10. }
11. const PREF_KEY = 'userPrivacyKey'
12. @Entry
13. @Component
14. struct welcomePage {
15.   context = getContext(this) as common.UIAbilityContext
16.   controller:CustomDialogController= new CustomDialogController({
17.     builder:UserPrivacyDialog({
18.       confirm: () => this.onConfirm(),
19.       cancel: () => this.exitApp()
20.     })
21.   })
23.   async aboutToAppear(){
24.     //1.加载首选项
25.     let isAgree = await preferenceUtil.getPreferenceValue(PREF_KEY,false)
26.     //2.判断是否同意
27.     if (isAgree) {
28.       //2.1.同意，跳转首页
29.       this.jumpToIndex()
30.     }else {
31.       //2.2.不同意，弹窗
32.       this.controller.open()
33.     }
34.   }
35.   jumpToIndex(){
36.     setTimeout(()=>{
37.       router.replaceUrl({
38.         url:'Pages/Index'
39.       })
40.     },1000)
41.   }
43.   onConfirm(){
44.     //1.保存首选项
45.     preferenceUtil.putPreferenceValue(PREF_KEY,true)
46.     //2.跳转到首页
47.     this.jumpToIndex()
48.   }
49.   exitApp(){
50.     //退出
51.     this.context.terminateSelf()
52.   }
53.   build() {
54.     Column({space:10}) {
55.       Row(){
56.         Image($r('app.media.home_slogan'))
57.           .width(260)
58.       }
59.       .layoutWeight(1)//布局权重
60.       Image($r('app.media.home_logo'))
61.         .width(150)
62.       Row(){
63.         Text('黑马健康支持').opacityWhiteText(0.8,12)
64.         Text('IPv6')
65.           .opacityWhiteText(0.8)
66.           .border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
67.           .padding({left:5,right:5})
68.         Text('网络').opacityWhiteText(0.8,12)
69.       }
70.       Text('‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理')
71.         .opacityWhiteText(0.6)
72.       Text('浙ICP备0000000号-36D')
73.         .opacityWhiteText(0.4)
74.         .margin({bottom:35})//外边距
75.     }
76.     .width('100%')
77.     .height('100%')
78.     .backgroundColor($r('app.color.welcome_page_background'))
79.   }
80. }

复制代码

效果图如下：

2.欢迎页面的业务

代码如下：

1. import { CommonConstants } from '../../common/constants/CommonConstants'
2. //@Preview//可预览
4. @CustomDialog
5. export default struct userPrivacyDialog {
6.   controller:CustomDialogController
7.   confirm: () => void
8.   cancel: () => void
10.   build() {
11.     Column({space:10}){
12.       //1.标题
13.       Text($r('app.string.user_privacy_title'))
14.         .fontSize(20)
15.         .fontWeight(CommonConstants.FONT_WEIGHT_700)
16.       //2.内容
17.       Text($r('app.string.user_privacy_content'))
18.       //3.按钮
19.       Button($r('app.string.agree_label'))
20.         .width(150)
21.         .backgroundColor($r('app.color.primary_color'))
22.         .onClick(()=>{
23.           this.confirm()
24.           this.controller.close()
25.         })
26.       Button($r('app.string.refuse_label'))
27.         .width(150)
28.         .backgroundColor($r('app.color.lightest_primary_color'))
29.         .fontColor($r('app.color.light_gray'))
30.         .onClick(()=>{
31.           this.cancel()
32.           this.controller.close()
33.         })
34.     }
35.     .width('100%')
36.     .padding(0)
37.   }
38. }

复制代码

效果图如下：

---

总结

以上就是欢迎页面的内容，页面起首会弹窗来检测用户是否同意隐私协议，如果同意协议将会关闭弹窗并进入应用，同时生存效果，下次用户进入应用将不会再次弹窗。如果不同意隐私协议将会退出该应用

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。