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

2023-09-15 16:45:42
<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/icon-default.png?t=N7T8https://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//预加载窗口数量限制(一旦超出,先进先出)默认不限制  
})

更多推荐

数据结构之堆的结构与实现

目录一、堆的概念及结构1.1堆的概念1.2堆的性质1.3堆的结构二、堆的实现2.1堆向下调整算法(父亲与孩子做比较)2.2堆的向上调整算法(孩子与父亲做比较)2.3堆的创建(向下建堆)2.4向下建堆的时间复杂度2.5堆的插入2.6堆的删除2.7堆的完整代码实现三、堆的应用3.1堆排序3.2TOP-K问题一、堆的概念及结

如何提取视频中的音频转为mp3

如何提取视频中的音频转为mp3?在丰富多样的视频作品中,我们常常会遇到一些引人入胜的对话和有趣的音乐变奏。不少朋友可能曾经看过那种画面与其他作品声音巧妙搭配,给人带来无比愉悦和和谐感的趣味作品。然而,很多人虽然有着相似的创作灵感,却苦于不知道如何提取所需素材。这时候我们应该寻找方法,将视频中对我们有用的音频提取处理并保

【c语言】贪吃蛇

当我们不想学习新知识的时候,并且特别无聊,就会突然先看看别人怎么写游戏的,今天给大家分享的是贪吃蛇,所需要的知识有结构体,枚举,以及easy-x图形库的一些基本函数就完全够用了,本来我想插入游戏的音乐,但是没找到贪吃蛇的背景音乐,所以就没加,大家可以参考我之前的博文里面有如何加音乐的教程包含的头文件#include<s

大二毕设.3-网盘系统

目录技术选型:功能概括:基本演示:实现讲解:技术选型:前端:Vue3+ElementPlus后端:SpringBoot+Mybatis-Plus+MySQL+Redis+Caffeine+FastDFS/OSS+SpringCloudStream+RocketMQ+Zookeeper功能概括:用户模块用户注册接口幂等性

探索web3.0

先说从web1.0、web2.0、web3.0的进化之路。Web1.0,第一代互联网,静态互联网;Web1.0的核心为:平台创造、平台所有、平台控制、平台受益。Web2.0,第二代互联网,交互式互联网;Web2.0的核心为:用户创造、平台所有、平台控制、平台受益。Web3.0,第三代互联网,协议互联网;Web3.0的核

计算机专业毕业设计项目推荐06-工作室管理系统(Java+Vue+Mysql)

工作室管理系统(JavaSpring+Vue+Mysql)**介绍****系统总体开发情况-功能模块****各部分模块实现****最后想说的****联系方式**介绍本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较了解计算机专业的毕业设计流程以及模式,在

云计算的未来:云原生架构和自动化运维的崭露头角

文章目录云计算的演进云原生架构1.容器化2.微服务3.自动化部署和扩展4.故障恢复自动化运维1.基础设施即代码(IaC)2.运维自动化示例:使用Ansible自动化配置管理3.自动化监控和报警未来展望1.更多的自动化2.多云混合云3.边缘计算4.安全性结论🎉欢迎来到云计算技术应用专栏~云计算的未来:云原生架构和自动化

自动化发布npm包小记

1.注册npm账号打开npm官网,并注册自己的npm账号2.申请AccessToken1.登录npm官网,登录成功后,点开右上角头像,并点击AccessTokens选项2.点开GenerateNewToken下拉框,点击ClassicToken(和GranularAccessToken有什么区别,请自行查验?)3.填写

WPF行为

行为是一款重用用户界面代码的更有挑战性的工具。其基本思想是:使用行为封装一些通用UI功能。如果具有适当的行为,可使用一两行XAML标记将其附加到任意元素,从而节省编写和调试代码的工作。样式提供了重用一组属性设置的实用方法。它们帮助构建一致的、组织良好的界面迈出了重要的第一步——但它们还有许多限制。问题是在典型的应用程序

多级缓存基础架构组件设计

基础架构组件-缓存背景目的缓存架构服务层多级缓存核心流程设计1、缓存介质2、如何实现spring注解方式多级缓存如何实现缓存的永久存储又可以过期刷新,而避免缓存失效带来的一系列缓存雪崩、击穿等问题实现缓存包装类多级缓存处理器实现1、lookup(Objectkey)2、get(Objectkey)3、重头戏get(Ob

Lua 多返回值

Lua这门神奇的语言可以在函数里面返回多个值具体函数如下functionmulti_return()return2,"hellowworld"endlocala,b=multi_return();--多个都返回print(a,b)localm=multi_return();--默认返回第一个返回值print(m)unp

热文推荐