小程序使用web-view包裹src可以直接打开html、pdf,但是再想打开html里面的pdf链接就不行了,需要对html做改造
本来想通过webview的bindmessage实现,但是网页向小程序 postMessage 时,会在以下特定时机触发并收到消息:小程序后退、组件销毁、分享、复制链接,触发条件太严格了。web-view | 微信开放文档
最后监听href的点击事件,使用wx.miniProgram.navigateTo(需要在html引入小程序的js)重新再webview里加载pdf
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>文档列表</title>
</head>
<body>
<h2>点击以下链接在小程序中打开 PDF</h2>
<!-- 不需要提前加 class,也可以用 data 属性或 href 后缀判断 -->
<a href="https://your-cdn.com/manual.pdf">用户手册</a><br>
<a href="https://example.com/report.pdf">年度报告</a><br>
<a href="https://other.com/guide.docx">操作指南(非PDF)</a>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
// 使用事件委托:监听整个 body 的点击
document.body.addEventListener('click', function (e) {
// 检查被点击的元素是否是 <a> 标签
if (e.target.tagName === 'A') {
const href = e.target.getAttribute('href');
// 判断是否是 PDF 链接(根据文件扩展名)
if (href && href.endsWith('.pdf')) {
e.preventDefault(); // 阻止默认跳转
// 判断是否在微信小程序环境中
if (typeof window.__wxjs_environment !== 'undefined') {
wx.miniProgram.navigateTo({
url: '/pages/openPdf/openPdf?pdfUrl=' + href
});
} else {
// 浏览器中正常打开
window.open(href, '_blank');
}
}
}
});
</script>
</body>
</html>
看到一个骚操作,强行使用postmessage,太复杂了,我直接没看,而且是使用h5实现的,不如这种方法简单