HarmonyOS编程实践系列:第一节 - 创建健康App欢迎页

news2024/10/4 16:42:33

系列文章目录

(零)鸿蒙HarmonyOS入门:如何配置环境,输出“Hello World“
(一)鸿蒙HarmonyOS开发基础
(二)鸿蒙HarmonyOS主力开发语言ArkTS-基本语法
(三)鸿蒙HarmonyOS主力开发语言ArkTS-状态管理
(四)鸿蒙HarmonyOS主力开发语言ArkTS-渲染控制
(五)鸿蒙HarmonyOS主力开发语言ArkTS-数据懒加载(LazyForEach)


文章目录

  • 系列文章目录
  • 前言
  • 一、核心代码
    • 1.WelcomePage.ets
    • 2.UserPrivacyDialog.ets
    • 3.页面效果
  • 总结
  • 知识补充
    • @ohos.data.preferences (用户首选项)
    • 其他


前言

提示::

案例来源于b站的课程


提示:以下是本篇文章正文内容,下面案例可供参考

一些工具类、资源文件可从下面的仓库获取。

Gitee仓库

一、核心代码

1.WelcomePage.ets

import UserPrivacyDialog from '../view/welcome/UserPrivacyDialog'
import common from '@ohos.app.ability.common'
import PreferencesUtil from '../common/utils/PreferencesUtil'
import router from '@ohos.router'
@Extend(Text) function opacityWhiteText(opacity: number, fontSize: number = 10) {
  .fontSize(fontSize)
  .opacity(opacity)
  .fontColor(Color.White)
}

const USER_PRIVACY_KEY: string = 'userPrivacyKey'

@Entry
@Component
struct WelcomePage {
  // 获取上下文,用户退出APP
  context = getContext(this) as common.UIAbilityContext

  // 定义用户协议弹窗
  controller: CustomDialogController = new CustomDialogController({
    builder: UserPrivacyDialog({
      confirm: () => this.onConfirm(),
      cancel: () => this.exitApp()
    })
  })

  // 用户协议同意处理逻辑
   async onConfirm() {
    //   保存用户同意信息到首选项
    await PreferencesUtil.putPreferenceValue(USER_PRIVACY_KEY, true)
    //   跳转到首页
    this.jumpToIndex()
  }
  // 用户协议不同退出APP
  exitApp() {
    this.context.terminateSelf()
  }


  async aboutToAppear() {
    //读取用户首选项
    let isAgree = await PreferencesUtil.getPreferenceValue(USER_PRIVACY_KEY, false)
    // 同意则跳转首页
    if (isAgree) {
      this.jumpToIndex()
    } else {
      console.log('2222')
      // 不同意则继续打开用户协议
      this.controller.open()
    }
  }
  // 跳转到首页
  jumpToIndex() {
    setTimeout(() => {
      router.replaceUrl({
        url: 'pages/Index'
      })
    }, 1000)
  }
  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('技术支持').fontSize(12).opacity(0.8).fontColor(Color.White)
        Text('技术支持').opacityWhiteText(0.8,12)
        Text('IPV6')
          .fontSize(10)
          .opacity(0.8)
          .fontColor(Color.White)
          .border({ style: BorderStyle.Solid, width: 1, color: Color.White, radius: 15 })
          .padding({ left: 5, right: 5 })
        Text('网络').fontSize(12).opacity(0.8).fontColor(Color.White)


      }

      Text(`'减更多'指黑马健康APP希望通过软件工具的形式,帮助更多用户实现身材管理`)
        .fontSize(10)
        .opacity(0.6)
        .fontColor(Color.White)
      Text('蜀ICP备11013304号-1')
        .fontSize(10)
        .opacity(0.6)
        .fontColor(Color.White)
        .margin({ bottom: 35 })
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.welcome_page_background'))
  }
}

2.UserPrivacyDialog.ets

import { CommonConstants } from '../../common/constants/CommonConstants'
// @Preview
@CustomDialog
export  default  struct UserPrivacyDialog {
  controller :CustomDialogController

  // 定义空同意与不同方法,由调用方具体实现
  confirm: () => void
  cancel: () => void


  build() {
    Column({space:CommonConstants.SPACE_4}){
      Text($r('app.string.user_privacy_title'))
        .fontSize(20)
        .fontWeight(CommonConstants.FONT_WEIGHT_700)

      Text($r('app.string.user_privacy_content'))

      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()
        })
    }
  }
}

3.页面效果

在这里插入图片描述


总结

主要涉及到线性布局(Row/Column)、文本显示(Text/Span)、按钮(Button)、@ohos.data.preferences (用户首选项)、自定义弹窗等。

知识补充

@ohos.data.preferences (用户首选项)

为应用提供Key-Value键值型的数据处理能力,支持应用持久化轻量级数据,并对其修改和查询。数据存储形式为键值对,键的类型为字符串型,值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。

:可以通过接口获取Preferences实例,使用callback或Promise异步回调。
:可以使用接口从内存中移除指定的Preferences实例,使用callback或Promise异步回调。
:可以使用接口从内存中移除指定的Preferences实例,使用callback或Promise异步回调。
:Preferences实例提供了获取和修改存储数据的接口,如get、getAll、put等。
总结内容:用户首选项提供了一种灵活、高效的数据处理方式,支持应用持久化轻量级数据,并对其修改和查询,有助于提高应用的性能和用户体验。

在这里插入图片描述

其他

Column接口文档
自定义弹窗文档

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1632974.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言阶段性测试错题纠正与拓展

引言:在2024年4月26日,我进行了C语言知识的“期末考试”。通过这次考试,我发现了我的知识漏洞。所以,我写下这篇博客来记录我的错题,并进行纠正,然后对于以前遗忘知识的回顾。 更多有关C语言的知识详解可前…

螺栓的预紧力与夹紧力——​SunTorque智能扭矩系统​

预紧力与夹紧力是紧固件使用中两个重要的力学概念。了解它们之间的关系以及如何正确地应用它们,对于确保机械系统的稳定性和安全性至关重要。本文SunTorque智能扭矩系统将从紧固件的基本概念和用途出发,深入探讨预紧力与夹紧力的概念、影响因素以及实际应…

四信数字孪生水库解决方案,加快构建现代化水库运行管理矩阵

近年,水利部先后出台《关于加快构建现代化水库运行管理矩阵的指导意见》与《构建现代化水库运行管理矩阵先行先试工作方案》等文件,明确总体要求及试点水库、先行区域建设技术要求等,为全面推进现代化水库运行管理矩阵建设工作提供依据。 《2…

android studio项目实战——备忘录(附源码)

成果展示&#xff1a; 1.前期准备 &#xff08;1&#xff09;在配置文件中添加权限及启动页面顺序 ①展开工程&#xff0c;打开app下方的AndroidManifest.xml,添加权限&#xff0c;如下&#xff1a; <uses-permission android:name"android.permission.CAMERA"…

NGINX发布动态页面的方法

一、建立 [rootserver100 html]# vim index.php [rootserver100 html]# pwd /usr/share/nginx/html 二、下载PHP文件 [rootserver100 conf.d]# dnf install php.x86_64 -y 正在更新 Subscription Management 软件仓库。 无法读取客户身份 本系统尚未在权利服务器中注册。可…

【C++】:const成员,取地址及const取地址操作符重载

目录 一&#xff0c;const成员二&#xff0c;取地址及const取地址操作符重载 一&#xff0c;const成员 将const修饰的“成员函数”称之为const成员函数&#xff0c;const修饰类成员函数&#xff0c;实际修饰该成员函数隐含的this指针&#xff0c;表明在该成员函数中不能对类的…

微信私域:如何管理多号聊天

我经常要在不同的微信号之间来回切换&#xff0c;这真是既麻烦又容易漏回消息&#xff0c;让我头疼不已。我试过了很多方法&#xff0c;但效果都不太理想。直到有一天&#xff0c;朋友分享了一个微信私域流量管理系统给我&#xff0c;我决定试试看。试用之后&#xff0c;我感觉…

机器学习理论基础—聚类算法

机器学习理论基础—聚类算法 聚类的距离计算 聚类&#xff1a;物以类聚。将相似的样本聚集到一起&#xff0c;使得同一类簇的样本尽可能接近,不同类簇的样本尽可能远离。&#xff08;无监督算法&#xff09; 对于距离的定义&#xff1a;满足下面的四个特点 非负性同一性对称性…

实验 | RT-Thread:L0

1 理解 官网文档&#xff1a;RT-Thread 简介 在 RT-Thread 系统中&#xff0c;任务通过线程实现的&#xff0c;RT-Thread 中的线程调度器也就是以上提到的任务调度器。RT-Thread与FreeRTOS是同等地位的东西&#xff0c;都是属于RTOS项目设置&#xff1a;RT-Thread 4.0.2 基于…

单链表进阶算法题精析

目录 一、回文链表 1.1 题目 1.2 题解 1.3 分析 二、带环链表I 2.1 题目 2.2 题解 2.3 分析 2.3.1为什么该思路可行&#xff1f; 2.3.2为什么只能快指针走两步&#xff1f; 三、带环链表II 3.1 题目 3.2 题解 3.3 分析 四、相交链表 4.1 题目 4.2 题解 4.3 分…

uniapp:K线图,支持H5,APP

使用KLineChart完成K线图制作,完成效果: 1、安装KLineChart npm install klinecharts2、页面中使用 <template><view class="index"><!-- 上方选项卡 --><view class="kline-tabs"><view :style="{color: current==ite…

git出错、文件无法删除、文件无法访问、文件或目录损坏且无法读取 等相关问题处理

一、错误历程与解决方案 1. 在用idea时&#xff0c;突然出现 部分git的命令无法使用&#xff0c;提示错误 2. 尝试删除项目文件夹&#xff0c;重新从git拉取代码 3.发现无法删除文件夹&#xff0c;删除操作没有任何反应&#xff0c;但是可以对文件夹重命名。 4.重新clone g…

【哈希】Leetcode 219. 存在重复元素 II

题目讲解 219. 存在重复元素 II 算法讲解 class Solution { public:bool containsNearbyDuplicate(vector<int>& nums, int k) {map<int, int>Hash;for(int i 0; i < nums.size(); i){//这一步说明前面已经出现过一次这样的数字了&#xff0c;所以用后面…

Android Studio的button点击事件

xml添加onClick调用方法 public class MainActivity extends AppCompatActivity {// 创建系统时间的文本控件TextView systemTimeTextView;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activit…

Docker基本操作 Linux里边操作

docker镜像操作命令: docker images:查看所有镜像; docker rmi:删除镜像 后边可以跟镜像的名字或者id指定要删除的镜像&#xff1b; docker pull:拉取镜像&#xff1b; docker push:推送镜像到服务&#xff1b; docker save :打包镜像 后边有用法; docker load:加载镜像&…

岚图汽车与东软睿驰签署战略合作协议

4月26日,东软睿驰与岚图汽车正式签署战略合作协议,双方将结合在各自领域拥有的产业资源、技术研发和资本运作等优势,聚焦智能化产品和应用,建立长期共赢的战略合作伙伴关系,通过不断探索未来新技术、新产业、新业态和新模式,围绕用户需求共同打造极致的智能出行体验。 图为岚图…

linux,从零安装mysql 8.0.30 ,并且更新至mysql 8.0.36

前言&#xff1a; 系统使用的CentOS 7&#xff0c;系统默认最小安装。 一、基础配置 配置虚拟机IP&#xff0c;需要更改的内容&#xff0c;如下红框中 修改之后 至此&#xff0c;基础配置完成。注意&#xff1a;此处虚拟机网络适配器使用的是&#xff1a;桥接模式 二、软件…

虚拟DOM

虚拟DOM&#xff08;Virtual DOM&#xff09;是现代前端框架&#xff08;如React、Vue等&#xff09;用于优化DOM操作性能的关键技术。Vue也采用了虚拟DOM来提高性能和提供更好的开发体验。以下是虚拟DOM在Vue中的详细解释&#xff1a; 什么是虚拟DOM&#xff1f; 虚拟DOM是一…

【分治算法】【Python实现】棋盘覆盖

文章目录 [toc]问题描述分治算法时间复杂性Python实现 个人主页&#xff1a;丷从心 系列专栏&#xff1a;分治算法 学习指南&#xff1a;Python学习指南 问题描述 在一个 2 k 2 k 2^{k} \times 2^{k} 2k2k个方格组成的棋盘中&#xff0c;若恰有一个方格与其他方格不同&…

vue3插槽的name和v-slot的研究

slot可以分为具名插槽和默认,默认插槽name是default 在父组件的template需要些v-slot/#,没写不生效,而在父组件下,而没被template包含的默认放在template且含有#default. 1)没写slot,可以不写template,也可写default的template2)写了name的slot,即使是default也必须些template…