微信小程序web-view 嵌套h5界面 实现文件预览效果

实现方法:(这里我是在小程序里面单独加了一个页面用来下载预览文件)

安装

使用方法请参考文档
npm 安装

npm install  weixin-js-sdk
import wx from 'weixin-js-sdk'

预览

h5界面代码

	<u-button @click="onclick" type="primary" :loading="butLoad" loadingText="加载中...">预览</u-button>
onclick(){const tempFilePath = 'http://example.com/somefile.pdf'if (window.__wxjs_environment !== 'miniprogram') {uni.openDocument({filePath: filePath,showMenu: true,success: function(res) {console.log('打开文档成功')},fail: function(err) {console.log('失败,', err);}})return}//这里需要注意一下,不要把下面这一行代码单独提出来放一下方法里面,会不生效(具体为啥我也没找到原因,如果有知道麻烦告知一下)wx.miniProgram.navigateTo({url: `/pages/weiVie/index?url=${tempFilePath}`})
},

小程序界面 需要建一个文件
在这里插入图片描述
index.js 代码 (index.wxml 文件是空的,看个人需要)

以下代码在安卓上是没毛病的,苹果手机回存在打开预览就返回当前页去了。
那解决这个问题在返回上一页加一个时间函数就行了。

然后测试时部分苹果手机会出现预览成功了,但是显示空白界面(返回上一页 )
解决这个问题 在可以在wx.downloadFile之后使用setTimeout来调用openDocument,这样可以确保文件下载并缓存后再进行预览‌

 onLoad(e){//获取从h5传过来的地址const {url}=e//   返回上一页 (这步骤加上不会出现空白页面,返回预览看的界面是你预览前的界面)wx.navigateBack({data:1})//   下载wx.downloadFile({url: e.url,success: function(res) {// 预览wx.openDocument({filePath:res.tempFilePath,showMenu: true,//是否打开右上角菜单success: function (res) {console.log('打开文档成功')},fail: function(err) {console.log('失败,',err);}})	},fail: function(err) {//   that.setData({fail:true,loading:false,text:'下载失败',})console.log('失败,', err);}})},

目前想到的方法就是这个,如果有更好的方法,欢迎指导

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

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

相关文章

HTTP 状态码大全

常见状态码 200 OK # 客户端请求成功 400 Bad Request # 客户端请求有语法错误 不能被服务器所理解 401 Unauthorized # 请求未经授权 这个状态代码必须和WWW- Authenticate 报头域一起使用 403 Forbidden # 服务器收到请求但是拒绝提供服务 404 Not Found # 请求资源不存…

一文详解TCP协议 [图文并茂, 明了易懂]

欢迎来到啊妮莫的学习小屋! 目录 什么是TCP协议 TCP协议特点✨ TCP报文格式 三次握手和四次挥手✨ 可靠性 效率性 基于字节流✨ 基于TCP的应用层协议 什么是TCP协议 TCP(传输控制协议, Transmission Control Protocol) 是一种面向连接的, 可靠的, 基于字节流的传输层通…

在Linux(ubuntu22.04)搭建rust开发环境

1.安装rust 1.安装curl: sudo apt install curl 2.安装rust最新版 curl --proto ‘https’ --tlsv1.2 https://sh.rustup.rs -sSf | sh 安装完成后出现&#xff1a;Rust is installed now. Great! 重启当前shell即可 3.检验是否安装成功 rustc --version 结果出现&…

UnityShaderLab 实现程序化形状(一)

1.实现一个长宽可变的矩形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return saturate(length(saturate(abs(i.uv - 0.5)-0.13)))/0.03;} 2.实现一个半径可变的圆形&#xff1a; 代码&#xff1a; fixed4 frag (v2f i) : SV_Target{return (distance(a…

如何解决压测过程中JMeter堆内存溢出问题

如何解决压测过程中JMeter堆内存溢出问题 背景一、为什么会堆内存溢出&#xff1f;二、解决堆内存溢出措施三、堆内存参数应该怎么调整&#xff1f;四、堆内存大小配置建议 背景 Windows环境下使用JMeter压测运行一段时间后&#xff0c;JMeter日志窗口报错“java.lang.OutOfMe…

宽字节注入

尽管现在呼吁所有的程序都使用unicode编码&#xff0c;所有的网站都使用utf-8编码&#xff0c;来一个统一的国际规范。但仍然有很多&#xff0c;包括国内及国外&#xff08;特别是非英语国家&#xff09;的一些cms&#xff0c;仍然使用着自己国家的一套编码&#xff0c;比如gbk…

Web APIsPIs第1章

WebApi阶段学习什么&#xff1f; WebApi是浏览器提供的一组接口 使用 JavaScript 去操作页面文档 和 浏览器 什么是 API API: 应用程序接口&#xff08;Application Programming Interface&#xff09; 接口&#xff1a;本质上就是各种函数&#xff0c;无需关心内部如何实现…

android——录制屏幕

录制屏幕 1、界面 2、核心代码 import android.app.NotificationChannel import android.app.NotificationManager import android.app.PendingIntent import android.app.Service import android.content.Context import android.content.Intent import android.graphics.Bi…

【Excel学习记录】01-认识Excel

1.之前的优秀软件Lotus-1-2-3 默认公式以等号开头 兼容Lotus-1-2-3的公式写法&#xff0c;不用写等号 &#xff1a; 文件→选项→高级→勾选&#xff1a;“转换Lotus-1-2-3公式(U)” 备注&#xff1a;对于大范围手动输入公式可以使用该选项&#xff0c;否则请不要勾选&#x…

短视频矩阵抖音SEO源码OEM独立部署

短视频优化矩阵源码涉及对抖音平台上的视频内容进行筛选与排序&#xff0c;目的是增强其在搜索引擎中的可见度&#xff0c;以便更多用户能够浏览到这些视频。而抖音SEO优化系统则是通过构建一个分析框架&#xff0c;来解析抖音上的用户数据、视频信息及标签等元素&#xff0c;并…

MySQL——buffer poll

为什么要有buffer poll&#xff1f; 如果没有buffer poll&#xff0c;每次读取数据的时候都是从磁盘上读的&#xff0c;这样效率是很差的的。 所以有了提高效率的方式&#xff0c;就加上了一个缓存——buffer poll 所以&#xff0c;当我们读取数据的时候就有以下的方式 当读…

生产慎用之调试日志对空间矢量数据批量插入的性能影响-以MybatisPlus为例

目录 前言 一、一些缘由 1、性能分析 二、插入方式调整 1、批量插入的实现 2、MP的批量插入实现 3、日志的配置 三、默认处理方式 1、基础程序代码 2、执行情况 四、提升调试日志等级 1、在logback中进行设置 2、提升后的效果 五、总结 前言 在现代软件开发中&#xff0c;性能优…

元宇宙时代的社交平台:Facebook的愿景与实践

随着科技的不断进步&#xff0c;元宇宙&#xff08;Metaverse&#xff09;这一概念逐渐走进了人们的视野。作为全球最大的社交平台之一&#xff0c;Facebook&#xff08;现Meta&#xff09;在这场元宇宙革命中扮演着重要角色。Meta不仅在不断扩展其社交平台的边界&#xff0c;还…

C# 小案例(IT资产管理系统)

开发工具&#xff1a;visual studio 2022 语言&#xff1a;C# 数据库&#xff1a;Sql Server 2008 页面展示 一、登录 二、主窗体 三、用户管理 四、资产管理 五、关于 Java版地址&#xff1a;基于若依开发物品管理系统(springbootvue)_若依物品管理系统-CSDN博客 Python版…

分布式日志系统设计

一、分布式日志系统定义 分布式日志系统是一种用于收集、存储和分析大规模分布式系统日志的系统。它可以帮助开发人员和系统管理员实时监控和调试系统&#xff0c;提高系统可靠性和可用性&#xff0c;同时也可以用于日志分析和故障排查。 二、简单设计思路 日志收集&#xff…

敏捷开发04:Scrum 中的 Product Backlog(产品待办列表) 详细介绍

Product Backlog 产品待办列表 在计划开发产品功能时&#xff0c;都希望产品功能上线后&#xff0c;用户能够喜欢并经常使用。 因此在开发产品新功能时&#xff0c;就要衡量哪些产品需求是对用户最有价值&#xff0c;这是最应该思考的问题。 然后把这些有价值的需求集合放在一…

vmware vsphere5---部署vCSA(VMware vCenter Server)附带第二阶段安装报错解决方案

声明 因为这份文档我是边做边写的&#xff0c;遇到问题重新装了好几次所以IP会很乱 ESXI主机为192.168.20.10 VCSA为192.168.20.7&#xff0c;后台为192.168.20.7:5480 后期请自行对应&#xff0c;后面的192.168.20.57请对应192.168.20.7&#xff0c;或根据自己的来 第一阶段…

110.【C语言】编写命令行程序(1)

目录 1.前置知识 "命令"的含义 运行C语言程序 2.介绍 main函数的参数 实验1 执行结果 实验2 执行结果 修改代码 实验3 分析 方法:遍历数组argv[]中的所有参数 执行结果 修改代码 执行结果 1.前置知识 "命令"的含义 WINR输入cmd,在cmd窗口下…

Leecode刷题C语言之半有序排列

执行结果:通过 执行用时和内存消耗如下&#xff1a; 代码如下&#xff1a; int semiOrderedPermutation(int* nums, int numsSize) {int first 0, last 0;for (int i 0; i < numsSize; i) {if (nums[i] 1) {first i;}if (nums[i] numsSize) {last i;}}return firs…

RPC设计--从reactor设计 (IOthread)

主从reactor架构 一般的一个网络IO库都是主从reactor模式&#xff0c;即主线程中有一个MainReactor&#xff0c;其负责监听ListenFd&#xff0c;当接受到新的用户连接时&#xff0c;返回的clientfd并不会加入的MainReacotr&#xff0c;而是在子线程&#xff08;这里称为IO线程&…