实现微信小程序预览文件，预览页面添加倒计时

项目场景：

提示：1、实现小程序预览doc、docx、xls、xlsx、ppt、pptx、pdf类型文件

           2、进入页面展示文件内容、开始按钮，点击，按钮变为【（**s)】倒计时

           3、倒计时结束后，此按钮消失，弹出显示【完成】，弹框保留2s后小时，用户继续阅读

例如：项目场景：示例:学习计时

---

问题描述

提示：小程序自带的api可以实现文件预览，但不可以在文件预览页面添加按钮，不可以操作文件预览页面：

例如：小程序文档地址：wx.openDocument(Object object) | 微信开放文档
小程序代码：

wx.downloadFile({
  // 示例 url，并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

---

分析：

提示：考虑建立新页面，用web-view组件放预览文件，cover-image组件做按钮，但存在兼容性问题，部分手机cover-image组件被web-view遮挡。

---

解决方案：

提示：前端将预览的html文件（包括倒计时操作），放在服务器，后端用kkfileview部署获取预览地址给前端【kkFileView为文件文档在线预览解决方案，该项目使用流行的spring boot搭建，易上手和部署，基本支持主流办公文档的在线预览，如doc,docx,xls,xlsx,ppt,pptx,pdf,txt,zip,rar,图片,视频,音频等等，官网地址：https://kkfileview.keking.cn/zh-cn/docs/config.html】

小程序端：

fileUrl为服务器文件地址 ：'https://******.com/fileRead.html?id='+this.data.id+'&userId='+res.data.id

服务器fileRead.html文件：

  
  

  
  
  
  
  
  
  




  
  
  
学习中