feat(wxread): align pagination, rendering, and docs

This commit is contained in:
shen
2026-05-24 15:36:01 +08:00
parent a318c0e3d0
commit 2a94921e88
103 changed files with 6124 additions and 4623 deletions
+10 -10
View File
@@ -1,6 +1,6 @@
# CSS/JS/字体资源分析
本文档对微信读书 EPUB 阅读器的前端资源文件进行全面分析,涵盖 CSS 样式表、JavaScript 脚本和字体文件。
本文档对读书 EPUB 阅读器的前端资源文件进行全面分析,涵盖 CSS 样式表、JavaScript 脚本和字体文件。
---
@@ -8,7 +8,7 @@
### 1.1 样式层叠架构
微信读书的 CSS 采用分层架构:
读书的 CSS 采用分层架构:
```
default.css (基础HTML样式)
@@ -46,7 +46,7 @@ Safari 派生的基础 HTML 默认样式,为 WebView 渲染提供标准化起
**路径**: `output/resources/css/replace.css` (172行)
EPUB 内容的核心替换样式,定义了微信读书特有的排版规则。
EPUB 内容的核心替换样式,定义了读书特有的排版规则。
**字体设置**:
- 标题和版权页使用 `"SourceHanSerifCN-Medium"` 字体
@@ -62,7 +62,7 @@ EPUB 内容的核心替换样式,定义了微信读书特有的排版规则。
| `.fifthTitle` | 1.05em | normal |
| `.sixthTitle` | 1em | normal |
**微信读书自定义CSS属性**:
**读书自定义CSS属性**:
```css
/* 垂直居中样式 - 值2用于正文图片 */
@@ -545,7 +545,7 @@ getAllForwardLinks()
// 转换H5链接为原生数据属性
transferH5Link()
// 解密微信读书加密链接
// 解密读书加密链接
WRLink_decrypt(str)
// type '3' = 数字
// 其他 = 十六进制编码文本
@@ -573,7 +573,7 @@ document.addEventListener("selectionchange", debounce(function(e) {
#### 2.4.1 rangy-highlighter.js (711行)
Rangy 高亮器模块,带微信读书自定义修改。
Rangy 高亮器模块,带读书自定义修改。
**CharacterRange 类**:
```javascript
@@ -1099,7 +1099,7 @@ line-height: 30px;
## 四、关键发现与实现细节
### 4.1 微信读书自定义CSS属性
### 4.1 读书自定义CSS属性
**wr-vertical-center-style**:
- 值 `1`:`.wr-vertical-center` 类,强制垂直居中
@@ -1137,7 +1137,7 @@ resultIframe.src = 'wereadapijs://private/setresult/' + scene + '&' + encodedDat
2. `rangy-textrange.js` - 字符级范围操作(支持图片文本)
3. `rangy-classapplier.js` - CSS类应用
4. `rangy-highlighter.js` - 高亮管理(序列化/反序列化)
5. `weread-highlighter.js` - 微信读书业务逻辑
5. `weread-highlighter.js` - 读书业务逻辑
**标注持久化**:
```javascript
@@ -1278,13 +1278,13 @@ RE.insertBook = function(id, title, author, cover) {
## 六、总结
微信读书的前端资源架构体现了以下设计特点:
读书的前端资源架构体现了以下设计特点:
1. **分层样式系统**:通过 default.css → replace.css/MediaPlatform.css → dark.css 的层叠,实现内容类型和主题的灵活切换
2. **原生桥接机制**:WeReadApi.js 通过 iframe URL scheme 实现 JS 与原生的高效通信,支持异步回调
3. **扩展的Rangy库**:在标准 Rangy 基础上添加了图片文本支持、高亮合并、序列化等微信读书特有功能
3. **扩展的Rangy库**:在标准 Rangy 基础上添加了图片文本支持、高亮合并、序列化等读书特有功能
4. **完整的标注系统**:支持高亮、想法、好友想法、引用、TTS五种标注类型,每种有独立的样式和交互