# 微信公众号平台限制说明

本文档详细说明微信公众号编辑器的技术限制，以及本工具如何应对这些限制。

---

## 1. 核心技术限制

### 1.1 不支持外部CSS文件

**限制说明**:
- 微信编辑器不允许使用 `<link>` 标签引用外部CSS文件
- 不支持 `<style>` 标签中的CSS规则
- 只支持HTML元素的内联 `style` 属性

**本工具的解决方案**:
```html
<!-- ❌ 微信不支持 -->
<link rel="stylesheet" href="style.css">
<style>
  h1 { color: blue; }
</style>

<!-- ✅ 本工具的输出 -->
<h1 style="color: #7c3aed; font-size: 28px; font-weight: 700;">标题</h1>
```

**实现细节**:
- 使用CSS解析器将所有CSS规则转换为内联样式
- 自动合并多个选择器的样式
- 处理CSS变量（`:root`）并替换为实际值

### 1.2 不支持JavaScript

**限制说明**:
- 完全禁用所有JavaScript代码
- 不支持 `<script>` 标签
- 不支持事件属性（如 `onclick`, `onload` 等）

**影响**:
- 无法实现交互功能（如折叠、切换、动画等）
- 代码语法高亮必须使用静态CSS实现

**本工具的解决方案**:
- 使用纯CSS实现代码语法高亮
- 使用静态HTML结构，无需JavaScript
- 使用CSS伪元素实现装饰效果

### 1.3 有限的CSS属性支持

**不支持的CSS属性**:
```css
/* ❌ 微信不支持的属性 */
position: fixed;         /* 固定定位 */
position: sticky;        /* 粘性定位 */
transform: rotate();     /* 3D变换 */
animation: ...;          /* CSS动画 */
@keyframes ...;          /* 关键帧动画 */
filter: blur();          /* 滤镜效果 */
backdrop-filter: ...;    /* 背景滤镜 */
```

**支持的CSS属性**:
```css
/* ✅ 微信支持的常用属性 */
color, background, background-color
font-size, font-weight, font-family
padding, margin, border
width, height, max-width, max-height
text-align, line-height, letter-spacing
border-radius, box-shadow
display, flex, justify-content, align-items
```

**本工具的策略**:
- 只使用微信支持的CSS属性
- 避免使用动画、变换等高级特性
- 使用基础CSS实现专业视觉效果

### 1.4 图片处理限制

**限制说明**:
- 不支持本地图片路径（如 `file:///` 或相对路径）
- 图片必须上传到微信服务器或使用外部图床
- 图片大小建议 < 5MB
- 支持的格式：JPG、PNG、GIF

**本工具的处理**:
```html
<!-- ❌ 微信不支持 -->
<img src="./images/cover.png">
<img src="file:///C:/Users/user/image.png">

<!-- ✅ 需要用户手动处理 -->
<img src="https://imagebed.com/cover.png">
<!-- 或在微信编辑器中重新上传 -->
```

**用户操作流程**:
1. 复制HTML到微信编辑器
2. 在编辑器中删除无法显示的图片
3. 点击"插入图片"上传本地图片
4. 或使用图床链接替换 `src` 属性

### 1.5 代码块限制

**限制说明**:
- 不支持JavaScript语法高亮库（如highlight.js）
- 代码块中的换行和缩进容易丢失
- 不支持代码行号的动态生成

**本工具的解决方案**:
```html
<!-- 使用<pre>标签保留格式 -->
<pre style="background: #282c34; color: #abb2bf; padding: 16px; ...">
<code style="font-family: 'Consolas', monospace; font-size: 14px;">
def hello_world():
    print("Hello, World!")
</code>
</pre>
```

- 使用 `<pre>` 和 `<code>` 保留代码格式
- 使用内联样式实现语法高亮
- 使用 `white-space: pre` 保留换行和缩进

---

## 2. 排版限制

### 2.1 最大宽度限制

**限制说明**:
- 微信公众号文章最大宽度：约 750px（移动端）
- 建议内容宽度：720px - 740px

**本工具的处理**:
```css
body {
  max-width: 720px;
  margin: 0 auto;
}
```

### 2.2 字体限制

**限制说明**:
- 微信不支持 `@font-face` 自定义字体
- 只能使用系统字体

**本工具使用的字体栈**:
```css
font-family: -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, "Helvetica Neue", Arial,
  "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
  sans-serif;
```

- iOS/macOS: `-apple-system`, `PingFang SC`
- Android: `Roboto`
- Windows: `Microsoft YaHei`
- 通用备选: `Arial`, `sans-serif`

### 2.3 表格限制

**限制说明**:
- 表格在移动端容易超出屏幕
- 复杂表格（合并单元格）支持有限

**本工具的处理**:
```css
table {
  width: 100%;
  overflow-x: auto;
  display: block;
}
```

- 表格宽度设为 100%
- 使用 `overflow-x: auto` 支持横向滚动
- 建议表格列数 ≤ 4 列

---

## 3. 内容限制

### 3.1 文章长度限制

**官方限制**:
- 单篇文章最多 20,000 字
- 最多 10 张图片（视频算1张图片）

**建议**:
- 技术文章：2000-5000 字
- 深度分析：5000-10000 字
- 图片数量：4-8 张

### 3.2 链接限制

**限制说明**:
- 外部链接需要通过微信审核
- 未认证公众号不支持外部链接
- 链接打开方式受限

**本工具的处理**:
```html
<!-- 链接会保留，但需要微信审核 -->
<a href="https://www.example.com" style="color: #7c3aed;">链接文本</a>

<!-- 建议：显示完整URL -->
官方网站：https://www.example.com
GitHub仓库：https://github.com/user/repo
```

### 3.3 视频/音频限制

**限制说明**:
- 只支持腾讯视频
- 音频只支持微信公众号音频素材库
- 不支持 `<video>` 或 `<audio>` 标签

**本工具不处理多媒体**:
- 视频/音频需要在微信编辑器中手动插入

---

## 4. 兼容性建议

### 4.1 浏览器测试

**推荐测试流程**:
1. Chrome/Edge 浏览器预览（开发阶段）
2. 微信编辑器预览（发布前）
3. 手机端预览（iPhone + Android）

**常见问题**:
- Chrome显示正常，微信显示异常 → 检查是否使用了不支持的CSS
- PC端正常，手机端异常 → 检查响应式样式

### 4.2 移动端优化

**响应式设计**:
```css
@media (max-width: 768px) {
  body {
    padding: 16px;
    font-size: 15px;
  }
  h1 { font-size: 24px; }
  table { font-size: 14px; }
}
```

**本工具已实现**:
- 移动端字体缩小 1px
- 标题大小自适应
- 表格、代码块自适应
- 图片宽度 100% 自适应

### 4.3 常见兼容性问题

**问题1：颜色显示不一致**
```css
/* ❌ 避免使用 */
color: rgba(0, 0, 0, 0.8);

/* ✅ 使用确定的颜色值 */
color: #333333;
```

**问题2：边框显示异常**
```css
/* ❌ 避免使用 */
border: 1px solid;

/* ✅ 明确指定颜色 */
border: 1px solid #dee2e6;
```

**问题3：背景渐变不显示**
```css
/* ⚠️ 部分设备不支持复杂渐变 */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* ✅ 提供纯色备选 */
background: #7c3aed;
background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 100%);
```

---

## 5. 发布前检查清单

### 5.1 样式检查
- [ ] 所有样式都是内联的（无外部CSS）
- [ ] 没有使用不支持的CSS属性
- [ ] 颜色值使用十六进制（#ffffff）格式
- [ ] 字体使用系统字体栈

### 5.2 内容检查
- [ ] 文章长度 < 20,000 字
- [ ] 图片数量 ≤ 10 张
- [ ] 图片已上传到图床或准备在编辑器中上传
- [ ] 链接数量合理（认证号无限制，未认证号不支持）

### 5.3 格式检查
- [ ] 表格列数 ≤ 4 列（移动端友好）
- [ ] 代码块格式正确，换行和缩进保留
- [ ] 标题层级合理（H1 → H2 → H3）
- [ ] 段落间距适中

### 5.4 移动端检查
- [ ] 字体大小在移动端可读（≥ 15px）
- [ ] 图片在移动端正常显示
- [ ] 表格可横向滚动
- [ ] 代码块不超出屏幕

### 5.5 微信编辑器检查
- [ ] 粘贴到编辑器后样式正常
- [ ] 图片位置正确（需重新上传）
- [ ] 代码块格式保留
- [ ] 在手机上预览效果正常

---

## 6. 故障排除

### 问题1：粘贴后样式全部丢失

**可能原因**:
- 浏览器兼容性问题
- 复制方式不正确

**解决方案**:
1. 使用Chrome或Edge浏览器打开HTML文件
2. 按 `Ctrl+A` 全选内容
3. 按 `Ctrl+C` 复制
4. 在微信编辑器中按 `Ctrl+V` 粘贴
5. 如果还是丢失，尝试在浏览器中"检查元素"，复制 `<body>` 内的HTML代码

### 问题2：代码块格式混乱

**可能原因**:
- 微信编辑器自动格式化
- 代码中包含特殊字符

**解决方案**:
1. 粘贴后立即检查代码块
2. 如格式混乱，使用微信编辑器的"代码块"功能重新插入
3. 或使用代码图片替代（截图）

### 问题3：表格在手机上显示不全

**可能原因**:
- 表格列数过多
- 单元格内容过长

**解决方案**:
1. 减少表格列数（建议 ≤ 4 列）
2. 缩短单元格内容
3. 使用图片替代复杂表格
4. 或将表格拆分为多个小表格

### 问题4：图片无法显示

**可能原因**:
- 使用了本地图片路径
- 图片URL不可访问

**解决方案**:
1. 在微信编辑器中删除无法显示的图片
2. 点击"插入图片"重新上传
3. 或使用稳定的图床服务（如阿里云OSS、七牛云等）

### 问题5：链接无法点击

**可能原因**:
- 公众号未认证，不支持外部链接

**解决方案**:
1. 认证公众号（获得外部链接权限）
2. 或将链接改为纯文本显示
3. 或使用"阅读原文"链接

---

## 7. 最佳实践总结

### 7.1 内容创作建议
1. **控制长度**: 单篇文章 2000-5000 字最佳
2. **优化图片**: 使用图床，图片大小 < 1MB
3. **简化表格**: 列数 ≤ 4，避免复杂嵌套
4. **测试链接**: 确认所有链接可访问

### 7.2 样式设计建议
1. **使用主题**: 选择合适的预设主题（tech/minimal/business）
2. **保持简洁**: 避免过度装饰，突出内容
3. **颜色对比**: 确保文字和背景有足够对比度
4. **移动优先**: 优先考虑移动端阅读体验

### 7.3 发布流程建议
1. **本地预览**: 在浏览器中检查HTML效果
2. **复制粘贴**: 完整复制HTML内容到微信编辑器
3. **重新上传图片**: 替换本地图片为微信图片
4. **手机预览**: 在手机上预览发布效果
5. **调整优化**: 根据预览效果微调格式
6. **保存草稿**: 重要文章建议保存草稿备份
7. **正式发布**: 确认无误后发布

---

## 8. 参考资源

### 官方文档
- [微信公众平台 - 帮助中心](https://kf.qq.com/product/weixinmp.html)
- [微信公众号编辑器使用说明](https://mp.weixin.qq.com)

### 推荐工具
- **图床服务**: 阿里云OSS、七牛云、GitHub图床
- **浏览器插件**: 微信编辑器增强插件
- **Markdown编辑器**: Typora、VS Code、Obsidian

### 社区资源
- 搜索"微信公众号排版"获取更多技巧
- 参考优秀公众号的排版样式
- 使用浏览器"审查元素"学习别人的CSS技巧