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

问题和使用场景描述:

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  
		},
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
@Carey4 小时前
uniapp配置消息推送unipush 厂商推送设置配置 FCM 教程
uni-app
转角羊儿4 小时前
uni-app上拉加载更多⑩
uni-app
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui