鸿蒙系统简介
HarmonyOS 鸿蒙系统(鸿蒙 OS)是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。
原型分析
打开软件后显示欢迎页面,先进行欢迎页面代码制作,页面分为上,下两个部分,上部分是一个图片,下部分是文字介绍,代码如下:
build() { Column({ space: 10 }) { // 1.中央Slogan Row() { Image($r('app.media.home_slogan')).width(260) } .layoutWeight(1) // 2.logo Image($r('app.media.home_logo')).width(150) // 3.文字描述 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')) } }
在进行弹窗样式的设计和引用
export default struct UserPrivacyDialog { controller: CustomDialogController confirm: () => void cancel: () => void build() { Column({space: CommonConstants.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(10) } }
在Welcome页进行页面首选项的设置,并设置确定和取消按钮的点击行为,具体代码如下:
import common from '@ohos.app.ability.common' 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(){ // 退出APP this.context.terminateSelf() } build() { Column({ space: 10 }) { // 1.中央Slogan Row() { Image($r('app.media.home_slogan')).width(260) } .layoutWeight(1) // 2.logo Image($r('app.media.home_logo')).width(150) // 3.文字描述 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')) } }