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/icon-default.png?t=N7T8https://github.com/dcloudio/mui/在static目录下新建script.js

// static/script.jsmui.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-PLUSvar 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.mzph.cn/news/86184.shtml

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

相关文章

Spring Cloud Alibaba Gateway 全链路跟踪TraceId日志

前言 凡是文中需要注册到nacos的都需要这个jar包 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency>凡是使用config jar包的都需要写bootstrap.prop…

React实战过程的知识了解

做项目用到react和antd&#xff0c;没办法循序渐进的学习&#xff0c;只能把一些点记录在这里&#xff0c;希望大家指正。 1.杂七杂八 正文 //actionRef&#xff0c;操作表单的预设方法&#xff0c;包括&#xff1a;刷新、重置所有项并刷新、重置到默认项、加载更多、清空选…

ipad触控笔有必要买原装吗?ipad2023手写笔推荐

目前&#xff0c;在无纸教学、无纸办公的大背景下&#xff0c;电容笔得到了广泛的关注。只是&#xff0c;对于这两支电容笔的不同之处&#xff0c;不少人并不是很清楚。其实这两种电容笔都很好区分&#xff0c;第一种是主动电容笔&#xff0c;也就是我们常用的电容式屏幕&#…

[JAVAee]Spring MVC

目录 Spring MVC框架 MVC Spring MVC的功能 用户与程序的连接 RequestMapping 指定为Get请求 指定为Post请求 获取参数 单个参数 表单传递多个参数 传递对象 后端参数重命名(后端参数映射) 设置参数必传/非必传 获取JSON对象 获取URL中的参数 上传文件 获取…

十六、MySql的MVCC机制CONNECT(收官!)

文章目录 一、数据库并发的场景有三种&#xff1a;二、读-写&#xff08;一&#xff09;3个记录隐藏列字段&#xff08;二&#xff09;undo 日志&#xff08;三&#xff09;模拟 MVCC&#xff08;四&#xff09;一些思考&#xff08;五&#xff09;Read View 一、数据库并发的场…

【深度学习】Pytorch 系列教程(十二):PyTorch数据结构:4、数据集(Dataset)

目录 一、前言 二、实验环境 三、PyTorch数据结构 0、分类 1、张量&#xff08;Tensor&#xff09; 2、张量操作&#xff08;Tensor Operations&#xff09; 3、变量&#xff08;Variable&#xff09; 4、数据集&#xff08;Dataset&#xff09; 随机洗牌 一、前言 Ch…

FPGA——WS2812B彩灯点亮

文章目录 前言一、WS2812B手册分析原理1.1 主要特点1.2 器件图1.3 接口1.4 输入码型1.5 归零码&#xff08;RZ&#xff09;和非归零码(NRZ)&#xff08;拓展&#xff09;1.6 级联输出1.7 输入数据格式 二、FPGA点亮彩灯2.1 代码 三、总结 前言 本篇博客是记录WS2812手册的学习…

web二级操作题

js和css的引入 在 HTML 中&#xff0c;你可以使用 <script> 和 <link> 标签来引入外部的 JavaScript 文件和 CSS 文件。 引入外部的 JavaScript 文件&#xff1a; <script src"path/to/script.js"></script>src 属性指定了 JavaScript 文…

关于PyInstaller打包exe程序的参数用法大全

PyInstaller可以将Python程序打包成一个exe程序来独立运行&#xff0c;用户使用时只需要执行这个exe文件即可&#xff0c;不需要在机器上再安装Python及其他包就可运行了。另外&#xff0c;PyInstaller相较于其他打包程序&#xff0c;比如py2exe&#xff0c;大多时候使用起来更…

分类预测 | MATLAB实现WOA-CNN-GRU-Attention数据分类预测

分类预测 | MATLAB实现WOA-CNN-GRU-Attention数据分类预测 目录 分类预测 | MATLAB实现WOA-CNN-GRU-Attention数据分类预测分类效果基本描述模型描述程序设计参考资料 分类效果 基本描述 1.MATLAB实现WOA-CNN-GRU-Attention数据分类预测&#xff0c;运行环境Matlab2021b及以上&…

创建表

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 创建表 语法格式: create table 表名(列名1 数据类型,列名2 数据类型,... ,列名n, 数据类型 ); 练习:在czwbkl库中,创建一格test01表 跟大家说…

2、RocketMQ消息的分类

一、普通消息 1 消息发送分类 Producer对于消息的发送方式也有多种选择&#xff0c;不同的方式会产生不同的系统效果。 同步发送消息 同步发送消息是指&#xff0c;Producer发出⼀条消息后&#xff0c;会在收到MQ返回的ACK之后才发下⼀条消息。该方式的消息可靠性最高&#xff…

Python之列表

标题 列表什么是列表列表的创建列表的删除列表的访问 列表的常用方法append()、insert()、extend()pop()、remove()、clear()count()、index()list()、 filter()、 reduce()、lambda() 列表支持的运算加法运算符乘法运算符*成员测试运算符in 内置函数对列表的操作列表推导式列表…

在Idea中调试本地Docker

报错&#xff1a; Error running myApp: Unable to open debugger port (localhost:5005): java.net.SocketException "Connection reset" 原因&#xff1a; Docker配置里边没有配置环境变量JAVA_TOOL_OPTIONS. 解决&#xff1a; 在Docker下加入运行时的环境变量JAVA…

ffmpeg抠图

1.不用png&#xff0c;用AVFrame 2.合流 3.图片抠图透明 (1.)mp4扣yuv图&#xff0c;(2)用1.把一张yuv标记为透明然后av_hwframe_transfer_data到GPU (3)用抠图算法函数对yuv进行处理 (4) qsv的h264_qsv只支持nv12和qsv&#xff0c;但qsv本身并不限制像素格式&#xff0c;比如在…

Centos7原生hadoop环境,搭建Impala集群和负载均衡配置

Centos7原生hadoop环境&#xff0c;搭建Impala集群和负载均衡配置 impala介绍 Impala集群包含一个Catalog Server (Catalogd)、一个Statestore Server (Statestored) 和若干个Impala Daemon (Impalad)。Catalogd主要负责元数据的获取和DDL的执行&#xff0c;Statestored主要负…

VSCode远程连接服务器报错:Could not establish connection to

参考&#xff1a;https://blog.csdn.net/weixin_42538848/article/details/118113262 https://www.jb51.net/article/219138.htm 刚开始把ssh文件夹中的known_hosts给删除了&#xff0c;发现没啥用。 之后在扩展Remote-SSH里面&#xff0c;把config file路径设置为ssh文件夹里…

洛谷刷题入门篇:分支结构

今天又来了&#xff0c;刷题刷题&#xff0c;我爱刷题&#xff0c;题单链接如下&#xff1a; https://www.luogu.com.cn/training/101#problems 一、【深基1-2】小学数学 N 合一 题目如下&#xff1a;https://www.luogu.com.cn/problem/P2433 题目描述 问题 1 请输出 I lov…

vue3 electron 打包后进程通信无效,开发环境正常

vue3 electron 打包后进程通信无效&#xff0c;开发环境却正常。 出现这个问题&#xff0c;是因为vue.config.js文件中electronBuilder项没有添加preload属性导致的&#xff0c;解决方式如下&#xff1a; vue.config.js文件 const { defineConfig } require("vue/cli-s…

【03】FISCOBCOS配置及使用控制台

官网文档https://fisco-bcos-documentation.readthedocs.io/zh_CN/latest/docs/installation.html# 配置及使用控制台 第一步. 准备依赖 安装java &#xff08;推荐使用java 14&#xff09; # ubuntu系统安装java sudo apt install -y default-jdk#centos系统安装java sudo yu…