针对uni-app中Android端web-view组件无法触发图片长按保存的问题，本文提供基于mui.js的解决方案。通过引入mui.min.js并在页面初始化时注入自定义脚本，启用手势监听事件，从而在Android环境下实现图片长按确认下载功能。
<template>
<view>
<web-view :webview-styles="webviewStyles" :src="webUrl"></web-view>
</view>
</template>在uni-app开发的App中，使用web-view组件嵌入网页时，iOS系统下图片长按保存功能正常，但在Android系统下，长按图片通常无法触发保存菜单或任何响应。
解决方案：
首先需要获取mui.min.js文件，并将其放置于项目的static目录下。
该文件的下载地址为：https://github.com/dcloudio/mui/
另一个获取途径为：https://github.com/dcloudio/mui/
接着，在static目录下创建一个名为script.js的新文件。
// static/script.js
mui.init({
gestureConfig: {
longtap: true, //默认为false
}
});
document.addEventListener('longtap', function(e) {
mui.toast('LongPress')
if (e.target.tagName == "IMG") {
console.log(e.target.src);
mui.plusReady(function() {
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()
}
})
})
}
})接下来需要在页面的web-view中注入JavaScript代码。
<script>
export default {
data() {
return {
webviewStyles: {}
}
},
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
},
}
</script>mui框架将诸多功能配置集中于mui.init方法，启用某功能只需在此方法中完成参数配置，目前支持在mui.init 方法中配置的功能涵盖：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。
具体配置的参数如下：
mui.init({
//子页面
subpages: [{
//...
}],
//预加载
preloadPages:[
//...
],
//下拉刷新、上拉加载
pullRefresh : {
//...
},
//手势配置
gestureConfig:{
//...
},
//侧滑关闭
swipeBack:true, //Boolean(默认false)启用右滑关闭功能
//监听Android手机的back、menu按键
keyEventBind: {
backbutton: false, //Boolean(默认truee)关闭back按键监听
menubutton: false //Boolean(默认true)关闭menu按键监听
},
//处理窗口关闭前的业务
beforeback: function() {
//... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
},
//设置状态栏颜色
statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
})至此，关于uni-app中web-view图片长按下载的实现方案介绍完毕。如需了解更多uni-app图片长按下载相关内容，可搜索本站往期文章或继续浏览后续文章，感谢支持。