鸿蒙学习实战之路-Reader Kit自定义页面背景最佳实践

最近好多朋友问我："西兰花啊，我用Reader Kit做了个阅读器，可是背景太单调了，怎么能弄点好看的背景呢？" 害，这问题可问对人了！咱们前面做的阅读器就像一碗白米饭，现在终于要给它加点菜叶子和酱料了～

今天这篇，我就手把手带你用Reader Kit实现自定义页面背景，教你怎么让你的阅读器背景变得更加美观，全程不超过8分钟（不含下载时间）～

一、自定义页面背景的基本流程

咱们先来看个流程图，了解一下整个过程是咋回事：

简单来说，整个流程就像咱们布置房间的过程：

准备工具（导入相关模块）
选择墙漆（设置背景色）
挑选壁纸（设置背景图片）
开始装修（调用setPageConfig接口重新渲染）
处理细节（注册资源请求接口并返回资源）

二、需要用到的接口

咱们做这个功能，主要需要用到1个核心接口，就像装修房子需要用到油漆刷一样：

接口名	描述
setPageConfig	设置或者修改页面排版属性，相当于装修时的总开关，一按就能看到效果～

当然，咱们还需要用到两个回调接口来处理资源请求：

on('resourceRequest')：注册资源请求回调，当需要背景图片时，排版引擎会通过这个接口来要材料
off('resourceRequest')：注销资源请求回调，装修完了要把工具收起来，不然会占地方～

三、开发准备

在开始自定义页面背景之前，咱们需要做一些准备工作，就像装修前要先准备材料一样：

已经构建了阅读器：咱们需要先按照之前的教程构建一个基本的阅读器，就像要先有房子才能装修一样～
准备好背景图片资源：咱们需要准备好想要使用的背景图片，就像要先准备好墙漆和壁纸一样～

背景图片可以放在两个地方：

工程目录resources/rawfile文件夹
应用沙箱目录

四、具体实现步骤

1. 导入相关模块

首先，咱们得把需要的模块导入进来，就像装修前先把所有工具都摆出来一样：

typescript 复制代码

import { fileIo as fs } from "@kit.CoreFileKit";
import { common } from "@kit.AbilityKit";
import { hilog } from "@kit.PerformanceAnalysisKit";

2. 单独设置背景色

如果咱们只是想换个背景颜色，不想用图片，那就可以这样做，就像给墙刷个颜色一样：

typescript 复制代码

this.readerSetting.themeColor = "#000000";
this.readerSetting.themeBgImg = "";
// 当设置背景色为浅色时，需要将深色模式关掉
this.readerSetting.nightMode = false;
// 当设置背景色为浅色时，字体颜色也需要适配
this.readerSetting.fontColor = "#FFFFFF";

3. 设置背景图片

如果咱们想要更漂亮的背景，那就可以设置背景图片，就像给墙贴个壁纸一样：

typescript 复制代码

this.readerSetting.themeBgImg = "dark_sky_first.jpg";
this.readerSetting.themeColor = "#000000";
// 当设置背景图为浅色时，需要将深色模式关掉
this.readerSetting.nightMode = false;
// 当设置背景图为浅色时，字体颜色也需要适配
this.readerSetting.fontColor = "#FFFFFF";

4. 重新渲染界面

设置完背景色或背景图片后，咱们需要调用setPageConfig接口来重新渲染界面，就像装修完了要打开灯看看效果一样：

typescript 复制代码

this.readerComponentController.setPageConfig(this.readerSetting);

5. 注册资源请求接口

最后，咱们需要注册排版引擎资源请求接口，并返回相应的背景图资源，就像装修工人需要什么材料咱们就给他拿什么材料一样：

typescript 复制代码

aboutToAppear(): void {
  // 注册资源请求回调
  this.readerComponentController.on('resourceRequest', this.resourceRequest);
}
aboutToDisappear(): void {
  // 注销资源请求回调
  this.readerComponentController.off('resourceRequest');
}
/**
 * 资源请求回调
 */
private resourceRequest: bookParser.CallbackRes<string, ArrayBuffer> = (filePath: string): ArrayBuffer => {
  hilog.info(0x0000, 'testTag', 'resourceRequest : filePath = ' + filePath);
  if (filePath.length === 0) {
    return new ArrayBuffer(0);
  }
  try {
    let context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    // 获取资源路径resources/rawfile下的背景图片文件Uint8Array数据
    let value: Uint8Array = context.resourceManager.getRawFileContentSync(filePath);
    hilog.info(0x0000, 'testTag', 'resourceRequest : get other resource succeeded ');
    return value.buffer as ArrayBuffer;
  } catch (error) {
    let code = (error as BusinessError).code;
    let message = (error as BusinessError).message;
    hilog.error(0x0000, 'testTag',
      `resourceRequest : get other resource failed, error code: ${code}, message: ${message}.`);
  }
  // 如果在资源路径源路径resources/rawfile下获取背景图片文件数据失败，则去沙箱目录下获取背景图片数据
  return this.loadFileFromPath(filePath);
}
private loadFileFromPath(filePath: string): ArrayBuffer {
  try {
    let stats = fs.statSync(filePath);
    let file = fs.openSync(filePath, fs.OpenMode.READ_ONLY);
    let buffer = new ArrayBuffer(stats.size);
    fs.readSync(file.fd, buffer);
    fs.closeSync(file);
    return buffer;
  } catch (err) {
    hilog.error(0x0000, 'testTag', "mkdir failed with error message: ", err.message, ", error code: ", err.code);
    return new ArrayBuffer(0);
  }
}

五、需要注意的地方

🥦 西兰花警告

背景色与字体颜色的搭配：咱们设置背景色或背景图片时，一定要注意字体颜色的适配，就像装修时要考虑灯光和家具的搭配一样。比如设置了白色背景，就不要用白色字体，不然用户啥也看不见，会骂人的～
深色模式的适配：当咱们设置浅色背景时，一定要把深色模式关掉，就像白天不要开着夜灯一样，不然会很刺眼～
资源释放 ：在aboutToDisappear中，咱们必须调用off('resourceRequest')注销资源请求回调接口，否则会内存泄漏，就像装修完了要把工具收走一样，不然会占用空间～
背景图片的大小：背景图片不要太大，不然会影响加载速度，就像壁纸不要选太厚的，不然贴起来费劲～

🥦 西兰花小贴士

背景图片的选择：咱们可以根据不同的书籍类型选择不同的背景图片，比如小说可以用温馨的暖色调，科技类书籍可以用简洁的冷色调，就像不同的房间要选不同风格的壁纸一样～
主题色的设置：当咱们使用背景图片时，主题色要设置成与背景图片相近的颜色，这样在仿真翻页时背面的颜色才会看起来协调，就像装修时要考虑墙裙和墙面的颜色搭配一样～

六、下一步行动

现在咱们已经学会了如何自定义页面背景，接下来可以试试：

实现多种背景的切换功能，让用户可以根据自己的喜好选择
结合之前学的自定义字体，打造更加个性化的阅读体验
实现背景透明度的调整，让阅读更加舒适

📚 推荐资料

我是盐焗西兰花，

不教理论，只给你能跑的代码和避坑指南。

下期见！🥦