feat(wxread): align pagination, rendering, and docs
This commit is contained in:
shen
@@ -0,0 +1,181 @@
|
||||
# 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）。标准化各浏览器的默认样式差异。
|
||||
Reference in New Issue
Block a user