小程序跳转html,html再打开pdf

7 阅读1分钟

小程序使用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实现的,不如这种方法简单

juejin.cn/post/684490…