4v5u09Z5a4Yuc/ReadViewSDK
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
master
ReadViewSDK/Doc/WXRead/resources-doc.md

7.5 KiB
Raw Permalink Blame History

WXRead/resources 文件说明

目录结构

resources/
├── js/
│   ├── Text/                    # 文本编辑/展示相关
│   │   ├── WeReadApi.js
│   │   ├── rich_editor.js
│   │   ├── rich_display.js
│   │   ├── correctArticle.js
│   │   └── style_html.js
│   ├── Readability.js
│   ├── weread-highlighter.js
│   ├── rangy-core.js
│   ├── rangy-classapplier.js
│   ├── rangy-highlighter.js
│   ├── rangy-textrange.js
│   ├── highlight.min.js
│   ├── cssInjector.js
│   └── patch_6.2.1.4.js
├── css/
│   ├── Style/
│   │   ├── style.css
│   │   ├── preview.css
│   │   └── normalize.css
│   ├── default.css
│   ├── dark.css
│   ├── replace.css
│   ├── replaceForLatinLanguageBook.css
│   ├── replaceForMPChapter.css
│   ├── MPExtra.css
│   ├── MediaPlatform.css
│   ├── WREpubMPVideo.css
│   └── xcode.min.css
└── fonts/                       # 字体文件

JS 文件

核心功能

Readability.js

Arc90 的 Readability 库 (v1.7.1)，用于从网页中提取正文内容。通过正则匹配和 DOM 分析算法，从杂乱的 HTML 中识别出文章主体，过滤导航、广告、侧栏等非内容元素。是读书解析公众号文章内容的基础依赖。

weread-highlighter.js

读书的划线/高亮核心模块。依赖 Rangy 库实现以下功能：

  • 初始化 Rangy 高亮器，注册 highlight（划线）、review（自己的想法）、friend-review（好友想法）、reference（想法圈划线）、tts（朗读高亮）等样式
  • 监听 selectionchange 事件，将选区位置信息通过 wereadBridge 通知原生层
  • 提供 getShareAbstractText() 从文章段落中提取分享摘要文本
  • 字体缩放 changeFontSizeWithScale() 支持
  • 图片点击事件绑定和 H5 链接转换

cssInjector.js

CSS 动态注入/移除工具。提供 inject(json) 和 remove(identifier) 两个方法，通过创建/删除 <style> 元素实现运行时样式切换。

patch_6.2.1.4.js

版本补丁脚本。修改 WRAboutViewController 的 viewDidLoad，将版权信息文案中的 "rights" 和 "reserved" 首字母改为大写。

Rangy 库系列 (第三方)

rangy-core.js

Rangy 核心库 (v1.3.0, MIT License)。跨浏览器的 Range 和 Selection 操作库，提供统一的 API 处理 DOM 选区。

rangy-classapplier.js

Rangy ClassApplier 模块。对 Range 和 Selection 添加/移除/切换 CSS 类，是实现划线高亮的基础。

rangy-highlighter.js

Rangy Highlighter 模块。依赖 core 和 ClassApplier，提供更高层的文本高亮 API，支持序列化/反序列化高亮位置。

rangy-textrange.js

Rangy TextRange 模块。支持按字符/词偏移移动选区边界、文本搜索、选区保存/恢复等功能。

highlight.min.js

highlight.js 代码语法高亮库（压缩版）。用于在阅读器中高亮显示 <pre><code> 代码块。

Text 子目录

Text/WeReadApi.js

读书 WebView Bridge。定义 WeReadBridge 类，通过隐藏 iframe + 自定义 URL scheme（wereadapijs://）实现 JS 与原生层的双向通信。支持回调机制和可用功能查询。

Text/rich_editor.js

富文本编辑器核心模块。定义 RE 对象，管理编辑器 DOM 引用和编辑操作。

Text/rich_display.js

富文本展示模块。定义 RDisplay 对象，处理展示模式下的交互（书籍卡片触摸反馈、点击高亮等）。

Text/correctArticle.js

文章内容校正脚本。用于对公众号文章的 HTML 结构进行清洗和修正。

Text/style_html.js

JS Beautifier 库。HTML/JS/CSS 代码格式化工具（MIT License），用于代码块的美化显示。

CSS 文件

默认/基础样式

default.css

公众号文章的基础阅读样式。覆盖微信原生样式，定义：

  • 文章区域布局（rich_media_area_primary：padding、字号 18px、行高 30px）
  • 标题样式（rich_media_title：24px/36px）
  • 内容区域溢出处理、blockquote 样式
  • 隐藏工具栏（rich_media_tool）
  • 划线/想法/高亮样式（.highlight 橙色、.review 红色虚线、.friend-review 灰色虚线）
  • 隐藏 iPad 上的 PC 二维码
  • TTS 朗读高亮（.tts 蓝色背景）
  • 公众号图片链接禁用点击

dark.css

深色模式样式。全局覆盖为纯黑背景（rgba(0,0,0,1)），文字颜色设为灰色（rgba(180,180,182,1)），链接为蓝色，blockquote 为深色背景。适配搜狗百科和百度搜索的特殊元素。

xcode.min.css

代码语法高亮配色方案（highlight.js 的 Xcode 主题），白色背景，关键字紫色、字符串红色、注释绿色等。

内容替换样式

replace.css

EPUB 书籍的主要排版样式。定义：

  • 代码块字体（Menlo/Consolas）、版权标题、图片说明文字
  • 六级标题样式（.firstTitle ~ .sixthTitle，1.0em~1.5em）
  • 首字下沉（.ftext）、引用（.conQuot）、副标题（.subHead）
  • 图片垂直居中（wr-vertical-center-style）、翻译行高
  • 章节工具栏高度（.book-chapter-tool：78px）

replaceForLatinLanguageBook.css

拉丁语系书籍的排版样式。与 replace.css 类似，但标题使用 Source Han Serif CN 字体并加粗（而非 SourceHanSerifCN-Medium normal），适配西文排版习惯。

replaceForMPChapter.css

公众号文集（小文章）的排版样式。在 replace.css 基础上增加了：

  • .weread-page-relate 跨页关联标记
  • .chapter-reward 打赏区域（120px）
  • .chapter-tool 工具栏（140px）
  • .re_bookItem 书籍卡片间距
  • img[data-image-size="large"] 大图全宽
  • .unsupported_iframe 不支持控件的提示样式
  • 强制清除 <p>、<strong>、<span>、<section> 的背景色

公众号专用样式

MPExtra.css

公众号文章的完整样式表（从微信 CSS 复制并修改）。包含：

  • 微信 UI 组件样式（.rich_media_*、.weui-*）
  • 小程序卡片样式（.weapp_*）
  • GIF 图片播放提示
  • 全局消息提示栏
  • 对话框组件（.weui-dialog）
  • 公众号音频播放器样式（.audio_*，含 Retina 适配）
  • 被删公众号链接隐藏处理
  • iPhone 横屏适配

MediaPlatform.css

公众号文章阅读的精简样式。覆盖微信原生样式中的关键属性：背景色、字号、行高、blockquote、QQ 音乐区域、分享图片等。主要用于非文集场景的公众号阅读。

WREpubMPVideo.css

腾讯视频播放器的自定义样式。完全重写视频控制器 UI：

  • 自定义播放/暂停、全屏按钮图标（使用 CDN sprite 图）
  • 进度条、时间显示器布局
  • 隐藏广告和下载提示
  • 响应式适配（iPhone 6/6P 尺寸）

Style 子目录

Style/style.css

笔记/想法的编辑和展示样式（EPUB 基准 1em=16px）。定义：

  • 编辑器容器（.re）基础样式
  • 段落、标题、列表、blockquote 样式
  • 书籍卡片组件（.re_bookItem，含 Retina 边框）
  • 图片样式（.re_img、.bodyPic）
  • QQ 表情样式
  • 深色模式（.re_Night）

Style/preview.css

想法/笔记的预览样式。与 style.css 类似但适用于阅读展示场景，字号 18px，行高 30px，使用 -apple-system 字体。

Style/normalize.css

normalize.css v3.0.2（MIT License）。标准化各浏览器的默认样式差异。