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

news2024/11/26 16:22:31
<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//预加载窗口数量限制(一旦超出,先进先出)默认不限制  
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1020031.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

在测试过程中引入可观测性平台提升业务质量

作者 观测云 产品技术专家 成都办公室 - 刘跃兰 前言 随着微服务技术的发展&#xff0c;微服务概念已深入人心&#xff0c;越来越多的企业开始使用微服务架构来开发业务应用。业务应用系统的整体架构变得更加复杂&#xff0c;并存在各种各样的不确定性因素&#xff0c;从而对…

nginx+keepalived集群搭建

1. nginx部署 单机部署可参考&#xff1a;https://blog.csdn.net/ym5209999/article/details/119897237 2. keepalived安装 [rootnginx1 ~]# yum -y install keepalived3. keepalived配置 3.1 安装完成后&#xff0c;默认配置文件位于&#xff1a;/etc/keepalived&#xff…

奶奶都看的懂的《栈》(C语言实现,超详细解析 !!!)

目录 一、前言 二、栈 &#x1f34e;栈的概念 &#x1f350;栈的结构​编辑 &#x1f349;栈的实现 &#x1f34a;栈 各个接口的实现 ⭕ 定义一个 栈 结构体 ⭕栈 的初始化 ⭕ 栈 的尾插 ⭕ 栈 的尾删 ⭕ 栈 内数据个数 ⭕ 获取 栈 顶元素 ⭕ 判断 栈 是否为空 ⭕…

Linux-网卡和网络配置

链接一篇大佬的博客&#xff1a;Linux之手把手教会修改网卡名称 文章目录 修改网卡名称步骤1&#xff1a;修改“/etc/default/grub”步骤2&#xff1a;修改“/etc/sysconfig/network-scripts”下的文件步骤3&#xff1a;修改“ifcfg-eth0”配置步骤4&#xff1a;判断操作系统的…

AIGC入门 - LLM 信息概览

本文将介绍以下 LLM OPTLLaMaAlpacaVicunaMosschatGLMBaichuanOpenbuddy 一、OPT 1、背景 OPT全称Open Pre-trained Transformer Language Models&#xff0c;即“开放的预训练Transformer语言模型”&#xff0c;是 Meta AI 团队在2022年5月发布了开源大模型OPT-175B&#…

Ninja: Towards Transparent Tracing and Debugging on ARM【TEE的应用】

目录 摘要引言贡献 背景TrustZone和受信任的固件PMU和ETM 相关工作x86上的透明恶意软件分析ARM上的动态分析工具基于仿真的系统硬件虚拟化裸机系统 Trustzone相关的系统 系统架构具体实现和评估可以看论文&#xff0c;这里不赘述了讨论总结 作者&#xff1a;Zhenyu Ning and Fe…

ffmpeg编译 Error: operand type mismatch for `shr‘

错误如下&#xff1a; D:\msys2\tmp\ccUxvBjQ.s: Assembler messages: D:\msys2\tmp\ccUxvBjQ.s:345: Error: operand type mismatch for shr D:\msys2\tmp\ccUxvBjQ.s:410: Error: operand type mismatch for shr D:\msys2\tmp\ccUxvBjQ.s:470: Error: operand type mismatch…

BCrypt 密码数据加解密运用

前言&#xff1a; 当涉及到存储用户密码时&#xff0c;确保密码的安全非常重要。以往&#xff0c;我们通常都是采用 MD5 这种不可逆算法来进行密码数据的加密后存储&#xff0c;虽然MD5算法是一种常见的哈希函数&#xff0c;但是它已经不再被认为是安全的选项。 常规MD5加密&a…

趣解设计模式之《小王的学习秘籍》

〇、小故事 小王是学校的学霸&#xff0c;凭借着自己的天赋以及对于学习的刻苦&#xff0c;每次考试都能排到年级第一名。但是&#xff0c;他所在的班级总成绩却不高&#xff0c;在所有班级中&#xff0c;属于中游水平。老师希望通过小王的贡献&#xff0c;能否帮助整个班级同…

证券账户可以绑定几张银行卡,可以更换绑定吗

个人账户实现股票量化程序化自动交易&#xff0c;券商有接口&#xff0c;门槛已降低_股票程序交易接口的博客-CSDN博客像上面的例子&#xff0c;如果按照市面上常见的可转债万3或万2不免5&#xff0c;人工操作费率限制&#xff0c;这种情况就不要想&#xff0c;根本没机会&…

返回最大元素的索引 忽略数组中所有的NaN值 numpy.nanargmax()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 返回最大元素的索引 忽略数组中所有的NaN值 numpy.nanargmax() [太阳]选择题 请问代码中第一次执行语句的输出正确的是&#xff1f; import numpy as np a np.array([0,np.nan,2]) print(&…

H264视频压缩格式

H264简介 H.264从1999年开始&#xff0c;到2003年形成草案&#xff0c;最后在2007年定稿有待核实。在ITU的标准里称为H.264, 在MPEG的标准里是MPEG-4的一个组成部分-MPEG-4 Part 10&#xff0c;又叫Advanced Video Codec&#xff0c;因此常常称为MPEG-4AVC或直接叫AVC。 压缩算…

服务器搭建(TCP套接字)-fork版(服务端)

基础版的服务端虽然基本实现了服务器的基本功能&#xff0c;但是如果客户端的并发量比较大的话&#xff0c;服务端的压力和性能就会大打折扣,为了提升服务端的并发性能&#xff0c;可以通过fork子进程的方式&#xff0c;为每一个连接成功的客户端fork一个子进程&#xff0c;这样…

Ansible自动化:简化你的运维任务

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

OpenStack创建云主机并连接CRT

文章目录 OpenStackT版创建云主机并连接CRT命令行操作&#xff08;1&#xff09;创建镜像&#xff08;2&#xff09;创建实例&#xff08;3&#xff09;创建网络创建内网创建外网 &#xff08;4&#xff09;创建安全组&#xff08;5&#xff09;创建路由&#xff08;6&#xff…

如何利用CSS实现三角形、扇形、聊天气泡框

思路 三角形 实现三角形的关键思路是使用 CSS 的 border 属性来创建一个透明的矩形块&#xff0c;并利用边框的透明部分来形成三角形。下面是创建三角形的一般思路&#xff1a; 创建一个 HTML 元素&#xff0c;通常是一个 <div> 元素&#xff0c;用于容纳三角形。 为该…

超低功耗段码LCD液晶显示驱动IC-VKL144A/BQFN48超小体积液晶驱动

产品品牌&#xff1a;永嘉微电/VINKA 封装形式&#xff1a;TSSOP48/QFN48L 产品年份&#xff1a;新年份 沈先生 135 、547/44,703 原厂&#xff0c;工程服务&#xff0c;技术支持&#xff01; VKL144A/B 概述: VKL144A/B 是一个点阵式存储映射的LCD 驱动器&#xff0c;可…

数据库操作-DML/DQL

数据库操作-DML DML英文全称是Data Manipulation Language(数据操作语言)&#xff0c;用来对数据库中表的数据记录进行增、删、改操作。 添加数据&#xff08;INSERT&#xff09; 修改数据&#xff08;UPDATE&#xff09; 删除数据&#xff08;DELETE&#xff09; 增加(ins…

面试题四:请解释一下watch,computed和filter之间的区别

watch与computed、filter&#xff1a; watch:监控已有属性&#xff0c;一旦属性发生了改变就去自动调用对应的方法 computed:监控已有的属性,一旦属性的依赖发生了改变&#xff0c;就去自动调用对应的方法.computed有详细的介绍&#xff0c;移步computed的使用 filter:js中为…

2023 Google 开发者大会 – 惊喜来袭

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 2023 Google 开发者大会 – 惊喜来袭 2023 Google 开发者大会面向开发者和科技爱好者展示最新产品和平台的年度盛会。今年Google大会为大家提供了丰富的学习资源&…