微信小程序实现文件的预览

news2024/9/24 13:23:19

1,最简单的直接使用<web-view src='网络文件地址'><web-view>文件如果有在线地址,直接用web,但是要在小程序的管理平台中增加文件地址到业务域名当中

2、使用微信本身自带方法

图片预览

wx.previewImage({

  urls:[this.data.ossPath+file.ossid],//图片地址
  success: function(res) {
    console.log('预览成功');
  },
  fail: function(err) {
    console.error('预览失败:', err);
  }
})

视频预览

方法一、使用微信本身自带的视频预览方式,
  wx.previewMedia({
   current: FILE_URL+res.data.storePath,
  sources: [{url:FILE_URL+res.data.storePath,type:'video'}],
  success: function(res) {
   // 预览成功后的回调
    console.log('预览成功');
   },
  fail: function(err) {
    // 预览失败后的回调
   console.error('预览失败', err);
  }
 });

但是有时候会出现视频无法预览,打开失败,想着是不是地址问题,文件打开不来,所以想着吧文件临时下来下来,用临时地址打开

下载文件方法入下:

 //下载文件
  dowlon(e,ossid){
    let that=this
     wx.downloadFile({
  // 文件地址
  url: that.data.ossPath+ossid,
  success: function (res) {
    console.log('下载成功!获取到临时地址',res.tempFilePath)
  },
  fail: function(err) {
   console.log('下载失败',err)
  }
})
  },
这时候可以用获取到的临时地址预览视频,但是会发现,还是有一部分的视频不能正常打开,预览状态是成功,但是提示视频打开失败,黑屏,这时候可以用方法二,就是用临时地址,然后调用打开手机文件,这样也可以实现预览的功能
  wx.openDocument({
      filePath: file.fileurl,//文件的临时地址
      success: function (res) {
         console.log("打开文档成功");
      },
    });
方法三、用video的方式实现预览功能

<video src="{{showeurl}}" style='width: 100%;height: 100vh;' id='myVideo' autoplay="false"  enable-play-gesture="true"	enable-progress-gesture="true" 	object-fit="contain"></video> 

mp3

  this.innerAudioContext = wx.createInnerAudioContext()
      this.innerAudioContext.autoplay = true //是否自动播放
      this.innerAudioContext.src =path//mp3播放地址
      console.log(path,'mp3地址')
      this.innerAudioContext.onPlay(() => {//绑定开始播放的函数
        console.log('开始播放')
        this.setData({
          mp3isplay:true,//控制是否是播放
          isshowMp3:true,//控制是否展示自定义mp3播放界面
        })
      })
      this.innerAudioContext.onEnded(() => {
        console.log('开始播放')
        this.setData({
          isshowMp3:false,
        })
      })
      this.innerAudioContext.onError((res) => {
        console.log('音频播放失败',res)
      })

但是这个没有界面,直接音乐就在后台打开,得要界面上自己写一个简易的暂停开始的功能

离开界面一定要记得把事件释放掉,不然会在后台一直播放,还会引起内存泄露

if(this.innerAudioContext){
      this.innerAudioContext.destroy()
     }

还有一个就是使用微信自带的audio组件,

另外的文档,doc,ppt,txt,execl等文件

1、下载文件后,调用界面并且打开打开新界面文件,

 wx.downloadFile({
  url: 文件地址,
  success: function (res) {
  wx.openDocument({
    filePath:res.tempFilePath,
    showMenu: true,
    success: function (res) {
      console.log('打开文档成功')
      this.setData({loading:false})
    }
  })

  },
  fail: function(err) {
    that.setData({fail:true,loading:false,text:'下载失败',})

  }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2110521.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【数据结构】【java】leetcode刷题记录--链表

简介 链表是一种常见的基础数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含数据域和指向下一个节点的指针。在Java中&#xff0c;链表通常用于实现动态数据结构&#xff0c;因为它可以根据需要动态地增加或减少节点。 链表简介&#xff1a; 节点结构&#…

如何为 DigitalOcean 静态路由操作员设置故障转移

静态路由操作器的主要目的是提供更大的灵活性&#xff0c;并在 Kubernetes 环境中控制网络流量。它使你能够根据应用程序的需求自定义路由配置&#xff0c;从而优化网络性能。该操作器作为 DaemonSet 部署&#xff0c;因此将在你的 DigitalOcean Managed Kubernetes 集群的每个…

以太坊基金会AMA总结:面对ETH价格疲软,团队的应对策略与展望

2024年9月5日晚&#xff0c;以太坊基金会举行了第12届AMA&#xff08;Ask Me Anything&#xff09;活动。本次活动在Twitter Space上进行&#xff0c;由以太坊联合创始人Vitalik Buterin、基金会成员Justin Drake和Dankrad Feist等核心成员参与&#xff0c;针对社区关心的多个问…

【YashanDB知识库】表数据量不多,lob数据段有大量空间,插入数据报错

问题现象 clob段异常增长&#xff0c;导致磁盘空间满&#xff0c;应用无法使用数据库。 问题风险及影响 lob段空间未复用&#xff0c;lob段空间扩张很大&#xff0c;影响磁盘占用合理分配。 空间不够&#xff0c;插入报错&#xff0c;影响业务。 问题影响的版本 所有版本…

全视通智慧病房系统旧病房改造方案

一、背景介绍 在当今医疗技术日新月异的时代&#xff0c;智慧病房作为医院现代化建设的重要一环&#xff0c;正逐步从概念走向现实&#xff0c;深刻改变着患者的就医体验与医护人员的工作模式。智慧病房的改造背景&#xff0c;根植于医疗需求的日益增长、技术创新的不断推动以及…

自定义事件分发

一、在C中创建可接收事件的接口类EventInterface&#xff0c;继承自UInterface 1、EventInterface.h #pragma once #include "CoreMinimal.h" #include "UObject/Interface.h" #include "EventInterface.generated.h" UINTERFACE(MinimalAPI) c…

页面小组件-搜索栏(二)-未经项目验证,慎重!!!

前言说明 这一版是未经过项目验证的&#xff0c;可能会有地方需要自行调整&#xff0c;如需使用&#xff0c;请慎重、慎重、再慎重&#xff01;&#xff01;&#xff01; 前言追溯 前面分享过的搜索栏组件是一个临时产物&#xff0c;经历了一两个项目之后就被淘汰了。后续在…

Aloudata AIR :国内首个 Data Fabric 逻辑数据平台

AIR 的寓意是“极致轻盈的数据交付”&#xff1a;A - Adaptive 自适应&#xff0c;I - Integration 集成&#xff0c;R - Resilience 弹性 News&#xff1a;Aloudata AIR 发布 作为国内首个 Data Fabric 逻辑数据平台&#xff0c;Aloudata AIR 通过自研的数据虚拟化技术&#…

使用树莓派学习——Linux库编程

树莓派开发——Linux静态动态库 文章目录 树莓派开发——Linux静态动态库一、分文件编程1.1 分文件编程的优点&#xff1a;1.2 分文件编程的步骤&#xff1a; 二、Linux的库2.1 函数库的概念&#xff1a;2.2 静态库和动态库的比较&#xff1a;静态数据库&#xff08;libXXX.a&a…

奖项再+1!通义灵码智能编码助手通过可信 AI 智能编码工具评估,获当前最高等级

阿里云的通义灵码智能编码助手参与中国信通院组织的可信AI智能编码工具首轮评估&#xff0c;最终获得 4 级评级&#xff0c;成为国内首批通过该项评估并获得当前最高评级的企业之一。 此次评估以《智能化软件工程技术和应用要求 第 2 部分&#xff1a;智能开发能力》为依据&…

C/C++的自由落体运动

目录 1. 前言 2. 正文 2.1 问题 2.2 解决办法 2.2.1 思路 2.2.2 代码实现 2.2.3 测试结果 3. 备注 1. 前言 这个题目非常有意思&#xff0c;可以活跃自己的思维&#xff0c;毕竟代码来源于生活&#xff0c;又返回给生活。 2. 正文 2.1 问题 题目描述&#xff1a; …

携手共建云安全未来 |“集美大学服云实习基地”授牌仪式圆满举行

集美大学服云实习基地授牌仪式 9月3日&#xff0c;集美大学服云实习基地授牌仪式在厦门成功举行。集美大学科研处副处长茅剑、计算机工程学院副院长刘晋明&#xff0c;以及安全狗副总裁&CTO陈荣有、副总裁刘春辉共同出席此次的授牌仪式。 01 会上&#xff0c;安全狗副总裁刘…

梨花声音教育退费普通话学习技巧之了解文化背景

在学习普通话的过程中&#xff0c;了解中国的文化背景是不可或缺的一环。语言不仅是交流的工具&#xff0c;更是文化的载体。通过深入了解中国的历史、文化和社会背景&#xff0c;学习者可以更好地理解和掌握普通话&#xff0c;使语言学习变得更加生动有趣。本文将从几个方面详…

监控平台总结之面试常问答案

思路 延伸的面试题总结及答案&#xff1a; 1.说说前端监控平台/监控SDK架构设计和难点亮点&#xff1f; 架构设计 数据采集层: SDK: 在前端集成的 SDK 负责采集数据&#xff0c;包括性能指标、用户行为、错误日志等。 数据收集: 实现高效的数据采集机制&#xff0c;支持实时…

C++_多态详解

多态的概念 概念&#xff1a;需要去完成某个行为时&#xff0c;当 不同的对象去完成 会产生出不同的状态。通俗点说就是 不同类型的对象去做同一个行为&#xff0c;产生的结果不同。 多态的定义及实现 虚函数 定义&#xff1a;即被virtual修饰的类成员函数称为虚函数 虚函…

多门店管理下的高效IT运维策略与实战指南

连锁门店作为直接面向消费者的服务点&#xff0c;是企业与顾客建立联系的关键触点。随着商业竞争的加剧&#xff0c;连锁门店企业纷纷通过扩大实体店面的规模来抢占市场份额。随着门店数量的激增&#xff0c;门店IT运维管理的复杂性和挑战也日益凸显。本文将深入剖析门店IT运维…

828华为云征文|采用Flexus云服务器X实例部署RTSP直播服务器

一、前言 这篇文章讲解&#xff1a; 采用华为云最新推出的Flexus云服务器X实例搭建RTSP服务器&#xff0c;完成视频直播需求。 随着实时视频流传输需求的增长&#xff0c;RTSP&#xff08;实时流协议&#xff09;服务器成为了许多视频监控、直播和多媒体应用的核心组件。在当…

有趣的手机端见缝插针游戏源码

有趣的手机端见缝插针游戏源码下载&#xff0c;注&#xff1a;本地预览请用火狐浏览器模拟移动端&#xff0c;chrome本地预览存在跨域问题。 微信扫码获取源码

vue3 响应式 API:shallowRef()和shallowReactive()

shallowRef() shallowRef()是一个用于创建浅层响应式引用的函数。它创建一个响应式数据&#xff0c;但只对顶层属性进行响应式处理。 特点&#xff1a; 只跟踪引用值的变化&#xff0c;不关心值内部的属性变化。 <template><div>{{ shallowRefObj }}</div>…

LLM 模型压缩之三: FoldGPT

0. 资源链接 论文: FoldGPT: Simple and Effective Large Language Model Compression Scheme 项目: to be released. 1. 背景动机 现有的大语言模型推理存在以下问题&#xff1a; LLM 模型因为有大量的参数&#xff0c;以及 next token 的预测方式&#xff0c;导致 LLM 模…