实现微信小程序中预览文件的缩放功能

小蹦跶儿
972 阅读4分钟

前言：

在微信小程序中，默认情况下，文件预览功能不支持文档缩放，导致用户在遇到小字体时难以清晰阅读。为了解决这一问题并提升用户体验，实现文档的缩放功能至关重要，使用户能够根据个人需求轻松调整查看比例，确保阅读的便捷性和舒适性。

一、实现的效果

image.png

实现思路：

在文档预览界面的右上角新增了两个缩放按钮，用户可以通过简单的点击轻松实现放大和缩小，极大地提升了阅读的便捷性和舒适度。这一设计不仅简化了操作流程，还确保了用户能够根据个人需求自由调整查看比例，享受更佳的阅读体验。

上图是原始比例，看起来确实不太清晰友好，下面是放大后的效果，可以进行上下左右拖动：

image.png

二、背景介绍

之前写过一篇《实现微信小程序内预览文件，获取阅读时长》的文章，主要是说的是在微信小程序内预览文档的功能实现，本次是基于这篇文章做的迭代，也可以根据此思路单独应用。

微信小程序中的文件预览功能是通过内嵌的H5页面（基于Vue项目并使用相关插件）实现的。因此，本次新增的缩放功能是在H5页面中完成的，无需对小程序本身的代码进行任何修改。这一做法简化了开发流程，确保了功能的快速迭代和部署。

最后会分享一下此功能遇到的兼容性问题。

三、实现方案

  1. html中有下面两个改动：

image.png

注：

（1）按钮的布局

（2）将插件外面包一层<div>

下面是所有代码，可直接copy:

    <div class="btn">
      <img @click.stop="zoomIn" class="icon" src="@/assets/imgs/zoom-in.png" />
      <img @click.stop="zoomOut" class="icon" src="@/assets/imgs/zoom-out.png" />
    </div>
    <div class="content" id="document-preview">
      <!-- 三类插件的代码可参考“背景介绍”中提到的那篇文章 -->
    </div>
  1. 将按钮放在右上角固定展示，这是所有的样式：

image.png

下面是所有代码，可直接copy：

<style lang="less" scoped>
.officePreview {
  height: 100vh;
  width: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: auto;
  padding-bottom: 40px;

  #document-preview {
    width: 100%;
    transform-origin: top left;
    height: 100%;
    overflow-x: auto;
  }

  .btn {
    position: fixed;
    top: 60px;
    right: 50px;
    padding: 20px;
    z-index: 100;

    .icon {
      width: 50px;
      height: 50px;
      margin-left: 50px;
    }
  }
}
</style>
  1. 操作按钮进行放大和缩小的功能代码：

image.png

下面是所有代码，可直接copy：

    zoomIn() {
      this.scale += 0.1;
      const previewElement = document.getElementById('document-preview');
      previewElement.style.transform = `scale(${this.scale})`;
      previewElement.style.transformOrigin = 'top left';
      this.adjustContainerWidth(previewElement);
    },
    zoomOut() {
      if (this.scale > 0.1) { // 防止缩放到过小
        this.scale -= 0.1;
        const previewElement = document.getElementById('document-preview');
        previewElement.style.transform = `scale(${this.scale})`;
        previewElement.style.transformOrigin = 'top left';
        this.adjustContainerWidth(previewElement);
      }
    },
    adjustContainerWidth(previewElement) {
      const container = document.querySelector('.officePreview');
      const previewRect = previewElement.getBoundingClientRect();
      container.style.width = `${previewRect.width}px`;
    },
  1. 这样就完成了预览文件的缩放功能。在小程序中打开文件进行预览时也可以正常操作。

四、遇到的兼容问题

问题描述：

  • 在zoomIn()和zoomOut()方法中仅操作scale值，并将样式更新放在computed属性中。
  • 动态样式通过v-bind:style绑定到class="content"的<div>元素上。
  • 此方法在H5环境和微信开发者工具中正常工作，但在实际手机端打开微信小程序使用时，缩放功能却无法生效。

可能原因：

  • 微信小程序的渲染机制与H5有所不同，特别是在处理动态样式更新时可能存在延迟或不一致的问题。
  • computed属性虽然能够实时计算并返回最新的样式对象，但在某些情况下，Vue的响应式系统可能未能及时触发样式更新，尤其是在移动设备上。

解决方案：

  • 使用watch监听scale的变化，并在watch回调中直接更新style属性，确保每次scale变化时都能立即应用新的样式。
  • 同时，确保scale值的变化是渐进的，避免一次性设置过大的scale值导致渲染问题。

image.png

（现在刚想到可以这样，当时做需求的时候时间紧，直接用了最原始的方法……）

五、总结

本文解决了文件预览默认不支持缩放的问题，通过H5页面和Vue实现缩放功能，让用户能自由调整文档查看比例，提升阅读清晰度和舒适性，显著改善了用户体验。

以上，希望对大家有帮助！

avatar
文章
阅读
粉丝