uni-app app实现web-view H5图片长按下载

E往无前呀2024-03-04 0:31

问题和使用场景描述：

uniapp app web-view中图片无法长按保存，IOS下是正常的，但是Android下长按无反应

解决方案：

下载mui.min.js，放到项目中的static下(下载见最上面的压缩包)

在static目录下新建script.js

复制代码

mui.init({
	gestureConfig: {
		longtap: true
	},
	//侧滑关闭  
	swipeBack: true, //Boolean(默认false)启用右滑关闭功能    

	//监听Android手机的back、menu按键  
	keyEventBind: {
		backbutton: false, //Boolean(默认truee)关闭back按键监听  
		menubutton: false //Boolean(默认true)关闭menu按键监听  
	},
});
document.addEventListener('longtap', function(e) {
	if (e.target.tagName == "IMG") {
		console.log(e.target.src);
		mui.confirm('是否下图片', '确认下载', '下载', function(d) {
			if (d.index == 0) {

				var down = plus.downloader.createDownload(e.target.src, {}, function(e, a) {
					console.log(e);
					plus.gallery.save(e.filename, function(e) {
						mui.toast('下载成功,请查看系统相册')
						console.log("下载成功,请查看系统相册");
					}, function(e) {
						console.log("下载失败,请重试");
					})
				})
				down.start()
			}
		})
	}
})

webview使用：

复制代码

<view><web-view :src="weburl"></web-view></view>

		onReady() {
			// #ifdef APP-PLUS  
			var currentWebview = this.$scope.$getAppWebview()
			setTimeout(function() {
				let wv = currentWebview.children()[0]
				if (uni.getSystemInfoSync().osName == 'android') {
					wv.appendJsFile('_www/static/mui.min.js')
					setTimeout(function() {
						wv.appendJsFile('_www/static/script.js')
					}, 1000)
				}
			}, 1000);

			// #endif  
		},