10-自然壁纸实战教程-个人中心

前言

个人中心因为还没有接入登录功能，所以主要都是一些信息的展示，其中的特色功能有动态获取版本号、和夜间模式，另外用户协议是通过内嵌一个html实现的，这个随后都会做出介绍。

动态获取版本号

这个是通过 @kit.AbilityKit中的 bundleManager 实现了动态读取版本号功能

1. 使用bundleManager.getBundleInfoForSelf方法获取当前应用程序的包信息。其中bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION是一个标志，表示获取包含应用程序信息的包信息。
2. 该方法返回一个包含应用程序信息的res对象。
3. 从res对象中提取versionName属性，这是应用程序的版本号。
4. 将版本号前缀为“v”，并赋值给this.version，以便后续使用或显示。

  /**
   * 获取版本号
   */
  async getVersion() {
    const res = await bundleManager.getBundleInfoForSelf(
      bundleManager.BundleFlag.GET_BUNDLE_INFO_WITH_APPLICATION
    )
    this.version = 'v' + res.versionName
  }

用户协议

用户协议是通过 AtomicServiceWeb 加载html页面实现的,这个html页面是提前写好的了，可以通过部署在服务器的形式来访问，也可以放在rawfile目录中来加载访问。

1. 创建AtomicServiceWeb组件：代码通过调用AtomicServiceWeb构造函数来创建一个Web视图组件。

2. 设置源URL：通过src: this.url属性，指定要加载的Web内容的URL。this.url通常是一个字符串变量，存储了要显示的网页地址。

3. 指定控制器：使用controller: this.controller属性，将Web视图的控制权交给指定的控制器。this.controller通常是一个对象，负责管理Web视图的行为和交互。

4. 组件配置：整个组件的配置通过一个对象字面量传递，该对象包含了src和controller属性，分别对应上述两个功能。

entry/src/main/ets/views/WebPage.ets

import { AtomicServiceWeb, AtomicServiceWebController } from "@ohos.atomicservice.AtomicServiceWeb"
import { AppStatu } from "../utils/fullScreenHelper"
import { NavigationUtils } from "../utils/NavigationUtils"

@Builder
export function WebPageBuilder() {
  WebPage()
}

/**
 * h5页面
 */
@Component
struct WebPage {
  @State
  url: string = ""
  @State
  controller: AtomicServiceWebController = new AtomicServiceWebController()
  params: Record<string, string> = {}

  aboutToAppear(): void {
    this.params = NavigationUtils.getInstance().getParamByIndex() as Record<string, string>
    this.url = this.params.url
    this.controller.loadUrl(this.url)
  }

  build() {
    NavDestination() {
      AtomicServiceWeb({
        src: this.url,
        controller: this.controller
      })
    }
    .title(this.params.title)
    .padding({
      top: AppStatu.vpTopHeight,
      bottom: AppStatu.vpBottomHeight
    })
  }
}

夜间模式

夜间模式，其实提供了三个功能选项

1. 白天模式
2. 夜间模式
3. 跟随系统

同时，还需要利用持久化的能力来缓存用户选中的模式，提高开发体验。

显示页面模式半模态

点击 夜间模式时，弹出半模态

 .bindSheet($$this.mineViewModel.isDarkMode, this.buildDarkModeDialog(), {
          height: 250,
          showClose: true,
          dragBar: true
        })

半模态核心代码

  //深色模式的半模态框
  @Builder
  buildDarkModeDialog() {
    Column() {
      Row() {
        Text('切换深色/亮色模式')
          .fontSize(16)
      }
      .margin({ top: 10 })

      Row() {
        Column({ space: 4 }) {
          Text('跟随系统')
          Text('开启后，将跟随系统打开或关闭深色模式')
            .fontSize(12)
            .fontColor($r('app.color.common_01'))
        }
        .alignItems(HorizontalAlign.Start)

        Toggle({
          type: ToggleType.Switch,
          isOn: this.appStorage.isOn
        })
          .onChange((val) => {
            this.appStorage.isOn = val
            this.setModel()
          })
      }
      .width('100%')
      .height(70)
      .margin({ top: 20 })
      .padding({ left: 10, right: 10 })
      .justifyContent(FlexAlign.SpaceBetween)

      if (!this.appStorage.isOn) {
        Row() {
          Text('普通模式')
            .fontSize(15)
          Blank()

          Image($r('app.media.go'))
            .width(16)
            .aspectRatio(1)
            .fillColor($r('app.color.common_green'))
            .opacity(this.appStorage.isNormal ? 1 : 0)
        }
        .width('100%')
        .height(50)
        .padding({ left: 10, right: 10 })
        .border({ width: { bottom: 0.5 }, color: $r('app.color.common_border') })
        .onClick(() => {
          // 亮色
          this.appStorage.isNormal = true
          this.setModel()
        })

        Row() {
          Text('深色模式')
            .fontSize(15)
          Blank()
          Image($r('app.media.go'))
            .width(16)
            .aspectRatio(1)
            .fillColor($r('app.color.common_green'))
            .opacity(this.appStorage.isNormal ? 0 : 1)
        }
        .width('100%')
        .height(50)
        .padding({ left: 10, right: 10 })
        .onClick(() => {
          // 暗色
          this.appStorage.isNormal = false
          this.setModel()
        })
      }

    }
  }

跟随系统

当用户点击跟随系统时，我们先获取到当前用户的选中状态，然后再去设置跟随系统模式

Toggle({
  type: ToggleType.Switch,
  isOn: this.appStorage.isOn
})
  .onChange((val) => {
    this.appStorage.isOn = val
    this.setModel()
  })

this.setModel()，主要逻辑

1. 获取应用的上下文（appContext）：通过getContext().getApplicationContext()获取当前应用的上下文。
2. 检查应用存储中的“isOn”属性：如果this.appStorage.isOn为真，表示用户不希望应用自动调整颜色模式，因此将颜色模式设置为COLOR_MODE_NOT_SET，即不设置颜色模式。
3. 如果“isOn”属性为假，进一步检查“isNormal”属性：
   • 如果this.appStorage.isNormal为真，表示用户偏好浅色模式，因此设置颜色模式为COLOR_MODE_LIGHT。
   • 如果this.appStorage.isNormal为假，表示用户偏好深色模式，因此设置颜色模式为COLOR_MODE_DARK。

  setModel() {
    const appContext = getContext().getApplicationContext()
    if (this.appStorage.isOn) {
      appContext.setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET)
    } else {
      appContext.setColorMode(this.appStorage.isNormal ? ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT :
      ConfigurationConstant.ColorMode.COLOR_MODE_DARK)
    }
  }

需要注意的时，当执行了 setColorMode 方法时，想要页面的元素颜色发生变化，你需要提前在media中定义两套样式规则，分别对应夜间和白天。

base/color.json

{
  "color": [
    {
      "name": "white",
      "value": "#ffffff"
    
  ]
}

dark/color.json

{
  "color": [
    {
      "name": "white",
      "value": "#FF262323"
    }
  ]
}

可以看到这里的 white对应着不同的颜色，最后程序中的元素只需要这样使用：

.backgroundColor($r('app.color.white'))

那么当模式改变的时候，上述原生的背景颜色也会发生改变。

如何获取资料

获取资料的途径，可以关注我们 官网的公众号 青蓝逐码 ，输入 项目名称 《自然壁纸》 即可获得以上资料。

关于我们

关于青蓝逐码组织

如果你兴趣想要了解更多的鸿蒙应用开发细节和最新资讯，甚至你想要做出一款属于自己的应用！欢迎在评论区留言或者私信或者看我个人信息，可以加入技术交流群。