夜雨聆风学习资料网

ARTICLE · 1102877

【uni-app UTS 插件】三端电子书阅读器:Android / iOS / 鸿蒙 Next 一套 API + 百搭阅读壳

【uni-app UTS 插件】三端电子书阅读器:Android / iOS / 鸿蒙 Next 一套 API + 百搭阅读壳

插件 ID:ebook-reader 当前版本:1.9.2 支持:Vue2 / Vue3 · app-vue · app-nvue · app-uvue · Android · iOS · 鸿蒙 Next · H5 轻量降级 错误码段:8040xxx 配套:ebook-select-files(选书)· ebook-reader-handwrite(手写)· ebook-reader-ai(AI)


一、为什么跨端电子书这么难做?

在 uni-app 里做「像样的阅读器」,很多人会先想到 WebView + epub.js。上线一两个版本后,常见坑会成批出现:

渲染与性能

  • 大 txt / epub 整本塞进 WebView,低端机内存暴涨甚至闪退
  • 分页、字号、行距一改就要整页重排,滚动位置容易错乱
  • 仿真翻页、听书断句、选区划线,Web 方案体验参差不齐

三端原生差异

  • Android TTS 要音频焦点 + 媒体通知,后台才稳
  • iOS 后台朗读要开音频会话,字体要用 CTFont
  • 鸿蒙权限写在 module.json5,TTS 走 CoreSpeechKit,和 Android/iOS API 完全两套

产品边界

  • 小说 App 要书架进度同步;教育 App 要笔记导出;B 端要水印和到期策略
  • 手写 OCR、AI 划词、PDF 渲染体积大,不该全塞进一个主包

自己从零写三端原生阅读内核,周期以月计。有没有一套 UTS 插件,既能开箱嵌入页面,又能用纯 API 自绘 UI?


二、ebook-reader:内核 + 百搭阅读壳

ebook-reader 是一个 UTS 原生插件,用一套 JavaScript API 覆盖 Android、iOS、鸿蒙 Next 的本地电子书阅读场景,并附带可直接嵌入的 Vue 组件壳。

典型用途:

  • 小说 / 网文阅读页
  • 教材 / 教辅 / 学习 App 内阅读
  • 企业内部分发文档(水印 + 访问策略)
  • 需要自研书架 UI、只接阅读内核的项目

两种接入姿势

姿势
适合
怎么做
百搭阅读壳
快速上线阅读页
<ebook-reader path="..." />
内核 API
完全自定义 UI
createReader
 → openBook → getPageContent

主包当前定位(1.9):

  • ✅ txt / md / epub 文本层(含封面、简介、图片抽出)
  • ✅ 分页 · 主题 · 字号 · 书签笔记 · TTS · 选区 · 手势 · 水印
  • ✅ 阅读壳内 Canvas 贝塞尔仿真卷曲(pageMode=simulation)
  • ❌ 完整 CSS 图文混排引擎、字体二进制打进主包、PDF / 古籍竖排 / 加密(增值或后续大版本)

三、5 分钟开箱接入(阅读壳)

1. 安装

将插件放入项目 uni_modules/ebook-reader,制作自定义调试基座后运行(改 utssdk/ 必须重做基座)。选书推荐同时装 ebook-select-files;鸿蒙再装 ebook-select-files-harmony。

2. 最小页面

easycom 会自动注册组件。宿主页面:

<template>  <ebook-reader    :path="bookPath"    :title="bookTitle"    :show-back="true"    watermark="仅供内部阅读"    @progress="onProgress"    @back="onBack"    @error="onError"  /></template><script>export default {  data() {    return {      bookPath: '', // pickBookFile({ copyToCache: true }) 后的稳定 path      bookTitle: '我的书'    }  },  methods: {    onProgress(p) {      // 同步自有书架:p.page / p.percent / p.position      console.log(p.page, p.percent)    },    onBack() {      uni.navigateBack()    },    onError(err) {      console.error(err.code, err.message)    }  }}</script>

3. 书源三选一

Prop
说明
path
本地沙盒路径(选书务必 copyToCache: true)
url
网络下书后打开
content
内存正文;H5 / 任意端快速试读

命令式也可以:

this.refs.reader.open({ content: '第一章\n\n正文…', format: 'txt' })this.string:reasonUTS 返回值禁止 Promise<{...}>,要用命名类型(如 FontInstallResult)十、隐私与市场声明(可直接改写)权限:主包无强制危险权限;选书随系统文件选择;按需网络下书、TTS 后台音频/通知、环境光/距离传感器数据:默认仅本地存储进度 / 书签 / 笔记;行为事件只抛给宿主;AI 由业务自配服务端广告:无十一、版本演进(摘要)版本亮点1.0txt/md 分页、书签笔记、三端 + Web1.1epub 文本层、前台 TTS1.2–1.3下书、简繁、音效、水印、口袋模式、导出1.4–1.6选区手势、原生页、后台 TTS 通知1.7–1.8epub 图片、鸿蒙 TTS、选书、封面简介1.9.0百搭阅读壳开箱即用1.9.1手写 / AI stub + 独立增值包1.9.2FontInstallResult 修复;壳内 Canvas 贝塞尔卷曲完整条目见插件 changelog.md。十二、总结如果你在做 uni-app 的小说、教育或企业阅读场景,又不想维护三套原生阅读器:要快:挂 <ebook-reader>,进度事件回写书架要自由:只用 createReader / openBook / getPageContent 自绘要增值:按需装 handwrite / AI,主包保持体积可控一套 readerId API,Android / iOS / 鸿蒙共用;错误码统一 8040xxx,便于日志和客服排查。欢迎在评论区交流接入问题;插件市场与更新日志以插件包内 readme.md / changelog.md 为准。

相关学习资料