小程序真机白屏：一个正则表达式引发的兼容性问题

小程序真机白屏：一个正则表达式引发的兼容性问题

问题现象

微信小程序开发工具中一切正常，真机调试时却直接白屏。查看真机日志，核心错误如下：

Invalid regular expression: /^((?![*_])[\s\p{P}\p{S}])/u:
Invalid property name in character class

错误发生在 common/vendor.js，整个小程序启动失败。

排查过程

1. 定位到 vendor.js

错误指向构建产物 dist/build/mp-weixin/common/vendor.js，说明问题出在第三方依赖打包后的代码里。

2. 搜索可疑正则

在 vendor.js 中搜索 \p{P}\p{S}，最终定位到 marked 库：

Ge = "\\p{P}\\p{S}",
punctuation = ...

marked@12 使用了 ES2018 的 Unicode property escapes（\p{P}、\p{S}、\p{L}、\p{N}）来匹配标点符号和 Unicode 字符。

3. 复现验证

尝试将 marked 降级到 4.3.0，发现仍残留 \p{L}\p{N}；再降级到 2.1.3，构建产物中不再出现 \p{。

根本原因

微信小程序真机的基础库 JavaScript 引擎（部分机型/版本）不支持 \p{...} 这种 Unicode property escape 语法，导致正则编译失败，整个脚本加载中断。

解决方案

1. 降级 marked

npm install marked@2.1.3 --save-exact
npm install --save-dev @types/marked@2.0.3

2. 调整导入方式

marked@2 只支持默认导出，不能再用命名导入：

// 错误（marked@4+）
import { marked } from "marked";

// 正确（marked@2）
import marked from "marked";

3. 验证构建产物

构建后检查 common/vendor.js，确认不再包含 \p{ 相关正则。

经验总结

1. 小程序真机兼容性 ≠ 开发工具兼容性。开发工具使用较新的 V8，真机则受微信版本和手机系统限制。
2. 前端库选型要谨慎。marked 作为 Markdown 解析库，不同版本差异较大，特别是正则表达式部分。
3. 真机日志是排查白屏的关键。将微信开发者工具的调试日志导出到文件，能快速定位到具体文件和错误。
4. 构建产物搜索法。遇到「某个库在真机报错但本地正常」时，直接在 dist 目录搜索错误特征码，比猜依赖版本更快。

延伸阅读

• MDN: Unicode property escapes
• marked GitHub Issues