uni-app实现web-view图片长按下载解决方案

 更新时间:2023年09月16日 10:21:15   作者:培根芝士  
uniapp的web-view中图片无法长按保存,IOS下是正常的,但是Android下长按无反应,这篇文章主要介绍了uni-app实现web-view图片长按下载解决方案,需要的朋友可以参考下
<template>
	<view>
		<web-view :webview-styles="webviewStyles" :src="webUrl"></web-view>
	</view>
</template>

uniapp的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注入js

<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 方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。 

配置的参数:

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图片长按下载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript 局部页面打印实现代码

    javascript 局部页面打印实现代码

    Web打印有很多方式,水晶报表使用的恐怕比较多,但这东西是收费软件,老板说不能用:(。
    2009-08-08
  • js模拟电脑选择多文件夹效果_选区代码

    js模拟电脑选择多文件夹效果_选区代码

    模仿选择文件夹效果的javascript封装类,效果不错,实际应用呢,暂时用不到,大家可以学习思路
    2008-09-09
  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    这篇文章主要介绍了原生js拖拽功能制作滑动条实例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 微信小程序实现点击导航标签滚动定位到对应位置

    微信小程序实现点击导航标签滚动定位到对应位置

    这篇文章主要为大家详细介绍了微信小程序实现点击导航标签滚动定位到对应位置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 原生js实现电商侧边导航效果

    原生js实现电商侧边导航效果

    本文主要分享了原生js实现电商侧边导航效果的示例代码以及原理分析。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-01-01
  • JS设计模式之状态模式概念与用法分析

    JS设计模式之状态模式概念与用法分析

    这篇文章主要介绍了JS设计模式之状态模式概念与用法,简单讲述了状态模式的概念、功能、应用场景并结合javascript实例形式分析了状态模式的简单定义及使用方法,需要的朋友可以参考下
    2018-02-02
  • javaScript如何跳出多重循环break、continue

    javaScript如何跳出多重循环break、continue

    这篇文章主要为大家详细介绍了javaScript如何跳出多重循环break、continue,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 你需要知道的TypeScript高级类型总结

    你需要知道的TypeScript高级类型总结

    在开发过程中,为了应对多变的复杂场景,我们需要了解一下 TypeScript 的高级类型。本文就为大家整理了一些需要掌握的TypeScript高级类型,需要的可以参考一下
    2022-08-08
  • JS设计模式之建造者模式的使用方法详解

    JS设计模式之建造者模式的使用方法详解

    JS建造者模式是一种创建型设计模式,它可以用于构建复杂对象的创建过程,将对象的构建步骤和表示分离,以便能够灵活地构建不同的对象,本文将通过代码示例给大家详细的介绍一下JS建造者模式的用法,需要的朋友可以参考下
    2023-08-08
  • Javascript 继承机制的实现

    Javascript 继承机制的实现

    要用ECMAScript实现继承机制,首先从基类入手。所有开发者定义的类都可作为基类。出于安全原因,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击。
    2009-08-08

最新评论