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.rhkb.cn/news/135524.html

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

相关文章

如何统计iOS产品不同渠道的下载量?

一、前言 在开发过程中&#xff0c;Android可能会打出来很多的包&#xff0c;用于标识不同的商店下载量。原来觉得苹果只有一个商店&#xff1a;AppStore&#xff0c;如何做出不同来源的统计呢&#xff1f;本篇文章就是告诉大家如何做不同渠道来源统计。 二、正文 先看一下苹…

【C++模拟实现】map、set容器的模拟实现

【C模拟实现】map、set容器的模拟实现 目录 【C模拟实现】map、set容器的模拟实现map、set模拟实现的代码&#xff08;insert部分&#xff09;部分一&#xff1a;红黑树的迭代器以及红黑树部分二&#xff1a;对set进行封装部分三&#xff1a;对map进行封装 遇到的问题以及解决方…

Stability AI推出Stable Audio;ChatGPT:推荐系统的颠覆者

&#x1f989; AI新闻 &#x1f680; Stability AI推出Stable Audio&#xff0c;用户可以生成个性化音乐片段 摘要&#xff1a;Stability AI公司发布了一款名为Stable Audio的工具&#xff0c;用户可以根据自己的文本内容自动生成音乐或音频。免费版可生成最长20秒音乐片段&a…

JL653—一个基于ARINC653的应用程序仿真调试工具

JL653是安装在PC机Windows操作系统上面的一层接插件&#xff0c;它能够真实地模拟ARINC653标准规定的功能性行为&#xff0c;从而可以供研发人员在PC机Windows环境下高效、快速的进行基于ARINC653的应用程序的开发、调试等。 JL653提供了ARINC 653 Part 1中要求的以下服务&…

手把手教你搭建农产品商城小程序:详细步骤解析

随着移动互联网的普及&#xff0c;越来越多的人开始关注如何在手机上进行购物&#xff0c;尤其是对于农产品这类日常生活所需品。本文将手把手教你搭建一个农产品商城小程序&#xff0c;让你轻松实现在手机上购买农产品的愿望。 一、登录乔拓云网后台 首先&#xff0c;我们需要…

ARM Linux DIY(十一)板子名称、开机 logo、LCD 控制台、console 免登录、命令提示符、文件系统大小

文章目录 前言板子名称uboot Modelkernel 欢迎词、主机名 开机 logoLCD 控制台console 免登录命令提示符文件系统大小 前言 经过前面十篇文章的介绍&#xff0c;硬件部分调试基本完毕&#xff0c;接下来的文章开始介绍软件的个性化开发。 板子名称 uboot Model 既然是自己的…

Lua学习笔记:在Visual Studio中调试Lua源码和打断点

前言 本篇在讲什么 调试Lua源码 本篇需要什么 对Lua语法有简单认知 依赖Visual Studio工具 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#xff0c;快速上手 提供全流程的源码内容 ★提高阅读体验★ &#x1f449; ♠ 一级标题 &#x1f448; &…

HTTP状态码301(永久重定向)不同Web服务器的配置方法

文章目录 301状态码通常在那些情况下使用301永久重定向配置Nginx配置301永久重定向Windows配置IIS301永久重定向PHP下的301重定向Apache服务器实现301重定向 301重定向是否违反相关法规&#xff1f;推荐阅读 当用户或搜索引擎向服务器发出浏览请求时&#xff0c;服务器返回的HT…

Linux 企业级夜莺监控分析工具远程访问

目录 前言 1. Linux 部署Nightingale 2. 本地访问测试 3. Linux 安装cpolar 4. 配置Nightingale公网访问地址 5. 公网远程访问Nightingale管理界面 6. 固定Nightingale公网地址 前言 夜莺监控是一款开源云原生观测分析工具&#xff0c;采用 All-in-One 的设计理念&…

elasticsearch17-自动补全

个人名片&#xff1a; 博主&#xff1a;酒徒ᝰ. 个人简介&#xff1a;沉醉在酒中&#xff0c;借着一股酒劲&#xff0c;去拼搏一个未来。 本篇励志&#xff1a;三人行&#xff0c;必有我师焉。 本项目基于B站黑马程序员Java《SpringCloud微服务技术栈》&#xff0c;SpringCloud…

【面试题】智力题

文章目录 腾讯1000瓶毒药里面只有1瓶是有毒的&#xff0c;问需要多少只老鼠才能在24小时后试出那瓶有毒。有两根不规则的绳子&#xff0c;两根绳子从头烧到尾均需要一个小时&#xff0c;现在有一个45分钟的比赛&#xff0c;裁判员忘记带计时器&#xff0c;你能否通过烧绳子的方…

[k8s] pod的创建过程

pod的创建过程 定义 Pod 的规范&#xff1a; apiVersion: v1 kind: Pod metadata:name: my-pod spec:containers:- name: my-containerimage: nginx:latest创建 Pod 对象&#xff1a; 使用 kubectl 命令行工具或其他客户端工具创建 Pod 对象&#xff1a; kubectl create -f…

线程锁(Thread Lock)和进程锁(Process Lock)

在Python中&#xff0c;线程锁&#xff08;Thread Lock&#xff09;和进程锁&#xff08;Process Lock&#xff09;具有相似的功能&#xff0c;但它们分别用于同步多线程和多进程环境中的资源访问。 进程锁 进程锁&#xff08;Process Lock&#xff09;可以用于在多进程环境中…

千巡翼X1 让航测无人机更小更轻更高效

利用无人机进行航空摄影测量&#xff0c;已成为测绘外业生产的主要方式&#xff0c;不仅方便快捷&#xff0c;更能全面准确获得成果。近年来&#xff0c;凭借快速高效、机动灵活、安全可靠、低成本等诸多优势&#xff0c;小型多旋翼无人机逐渐成为一些航测项目作业的新利器。 千…

新手如何开始Microstation CE版二次开发

一步步学习MicroStation CE MDL&#xff08;C&#xff09;开发 - 技术资料库 - Bentley 中国优先社区 - Bentley Communities https://communities.bentley.com/communities/other_communities/chinafirst/w/chinawiki/57704/microstation-ce-mdl-c一步步学习MicroStation CE A…

opencv 基础(持续更新中)

1 前言 https://www.couragesteak.com/ 2 安装 3 基础属性demo 打开一张图片&#xff1a; import cv2img cv2.imread(./girl.jpg)print(img.shape) # (1536, 1024, 3) 数组形状 print(type(img)) # numpy 数组 print(img) # 三维数组&#xff08;彩色图片&am…

产品经理学习笔记

产品文档之BRD、MRD和PRD - 知乎BRD、MRD和PRD一起被认为是从市场到产品需要形成的标准规范文档&#xff1a; 1、BRD&#xff08;Business Requirement Document&#xff09;&#xff0c;商业需求文档&#xff0c;是一份产品商业论证报告&#xff0c;基于商业目标或价值所描述的…

Python爬虫被封ip的解决方案

目录 一、网站反爬虫机制有哪些 二、Python爬虫被封ip的原因 三、爬虫被封IP怎么解决 四、代码示例 在爬虫程序运行过程中&#xff0c;被封禁IP地址是常见的问题之一。这通常是由于目标网站采取了反爬虫机制&#xff0c;例如限制单个IP地址的请求频率或识别请求特征等。当爬…

Python函数进阶:探索高级函数特性与技巧

&#x1f482; 个人网站:【工具大全】【游戏大全】【神级源码资源网】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 寻找学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】 Python中的函数不仅仅是…

【23种设计模式】组合模式【⭐】

个人主页&#xff1a;金鳞踏雨 个人简介&#xff1a;大家好&#xff0c;我是金鳞&#xff0c;一个初出茅庐的Java小白 目前状况&#xff1a;22届普通本科毕业生&#xff0c;几经波折了&#xff0c;现在任职于一家国内大型知名日化公司&#xff0c;从事Java开发工作 我的博客&am…