uniapp微信小程序使用webview嵌套h5的文件下载问题

最新推荐文章于 2024-12-10 22:57:05 发布

初入前端的小谢

最新推荐文章于 2024-12-10 22:57:05 发布

阅读量9.1k

点赞数 5

分类专栏： bug记录文章标签：微信小程序 html5 uni-app

本文链接：https://blog.youkuaiyun.com/qq_37622750/article/details/120996043

版权

本文介绍了在uni-app开发的微信小程序中，如何处理webview嵌套的H5页面文件下载的问题。当用户在安卓设备上点击下载无响应，iOS设备上下载后显示乱码时，解决方案是通过判断当前环境，让H5页面跳转到小程序特定页面，传入文件URL，然后在小程序内部使用微信API进行文件下载和保存，确保正确下载和预览。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

公司有个小程序项目，就是单纯的小程序中使用web-view嵌套h5的项目。但是在文件下载的时候，安卓手机点击没反应，ios能打开文件但是都是乱码。

在网上也找了很久，后来确定了一种思路，通过判断当前的宿主环境来进行不同的操作，然后在h5中跳转到小程序的特定页面，并且将文件资源的URL传递过去。之后在小程序中调用微信的下载文件或者保存文件API。

总体思路就是这样，上代码。

h5端代码

// 判断所在环境
				 var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') {
   
					// 打开微信特定页面，然后下载文件
					WX.miniProgram.navigateTo({
   
						url: `/pages/file-upload/file-upload?url=${
     encodeURIComponent(fileDownPath)}`
						})
					// console.log('是微信客户端')
				} else {
   
					// h5端直接使用a标签下载
					this.downloadH5(fileDownPath,item.fieldName)
					console

最低0.47元/天解锁文章