鸿蒙实战案列-欢迎页面
前言在黑马康健应用开辟的过程中，欢迎页面每每是首个吸引用户眼光的存在。所以欢迎页面要注重简便性和功能性，确保用户能敏捷理解主要功能和特点。所以介绍一下怎样用HarmonyOS构建欢迎页面。
一、页面计划
欢迎页面整体的布局非常简单，是一个从上到下的列式布局，所以使用Column就行了。同时整个页面的配景致是一个绿色，所以需要加上一个绿色配景致铺满整个屏幕，宽高比都是100%。整个页面从上到下第一部门是一个logo，是一个图片然后再往下黑马康健这是个logo，同样也是一个图片，再往下有三行文本介绍，所以整个页面结构很简单
https://i-blog.csdnimg.cn/blog_migrate/29ba71162afc47939190b36942d7263a.png
二、相干代码
1.欢迎页面的UI
代码如下：
import common from '@ohos.app.ability.common'
import preferences from '@ohos.data.preferences'
import router from '@ohos.router'
import preferenceUtil from '../common/utils/PreferenceUtil'
import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
@Extend(Text) function opacityWhiteText(opacity:number ,fontSize:number=10){
.fontSize(fontSize)
.opacity(opacity)
.fontColor(Color.White)
}
const PREF_KEY = 'userPrivacyKey'
@Entry
@Component
struct welcomePage {
context = getContext(this) as common.UIAbilityContext
controller:CustomDialogController= new CustomDialogController({
builder:UserPrivacyDialog({
confirm: () => this.onConfirm(),
cancel: () => this.exitApp()
})
})
async aboutToAppear(){
//1.加载首选项
let isAgree = await preferenceUtil.getPreferenceValue(PREF_KEY,false)
//2.判断是否同意
if (isAgree) {
//2.1.同意，跳转首页
this.jumpToIndex()
}else {
//2.2.不同意，弹窗
this.controller.open()
}
}
jumpToIndex(){
setTimeout(()=>{
router.replaceUrl({
url:'Pages/Index'
})
},1000)
}
onConfirm(){
//1.保存首选项
preferenceUtil.putPreferenceValue(PREF_KEY,true)
//2.跳转到首页
this.jumpToIndex()
}
exitApp(){
//退出
this.context.terminateSelf()
}
build() {
Column({space:10}) {
Row(){
Image($r('app.media.home_slogan'))
.width(260)
}
.layoutWeight(1)//布局权重
Image($r('app.media.home_logo'))
.width(150)
Row(){
Text('黑马健康支持').opacityWhiteText(0.8,12)
Text('IPv6')
.opacityWhiteText(0.8)
.border({style:BorderStyle.Solid,width:1,color:Color.White,radius:15})
.padding({left:5,right:5})
Text('网络').opacityWhiteText(0.8,12)
}
Text('‘减更多’指黑马健康App希望通过软件工具的形式，帮助更多用户实现身材管理')
.opacityWhiteText(0.6)
Text('浙ICP备0000000号-36D')
.opacityWhiteText(0.4)
.margin({bottom:35})//外边距
}
.width('100%')
.height('100%')
.backgroundColor($r('app.color.welcome_page_background'))
}
} 效果图如下：
https://i-blog.csdnimg.cn/blog_migrate/c6212f4ab8db6b4a8a6878ea654bbc0d.png
2.欢迎页面的业务
代码如下：
import { CommonConstants } from '../../common/constants/CommonConstants'
//@Preview//可预览
@CustomDialog
export default struct userPrivacyDialog {
controller:CustomDialogController
confirm: () => void
cancel: () => void
build() {
Column({space:10}){
//1.标题
Text($r('app.string.user_privacy_title'))
.fontSize(20)
.fontWeight(CommonConstants.FONT_WEIGHT_700)
//2.内容
Text($r('app.string.user_privacy_content'))
//3.按钮
Button($r('app.string.agree_label'))
.width(150)
.backgroundColor($r('app.color.primary_color'))
.onClick(()=>{
this.confirm()
this.controller.close()
})
Button($r('app.string.refuse_label'))
.width(150)
.backgroundColor($r('app.color.lightest_primary_color'))
.fontColor($r('app.color.light_gray'))
.onClick(()=>{
this.cancel()
this.controller.close()
})
}
.width('100%')
.padding(0)
}
}
效果图如下：
https://i-blog.csdnimg.cn/blog_migrate/5faeda1902f69a71f8018261c87c6a73.png
总结
以上就是欢迎页面的内容，页面起首会弹窗来检测用户是否同意隐私协议，如果同意协议将会关闭弹窗并进入应用，同时生存效果，下次用户进入应用将不会再次弹窗。如果不同意隐私协议将会退出该应用
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]