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.hqwc.cn/news/115413.html

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

相关文章

大模型训练显存优化推理加速方案

当前的深度学习框架大都采用的都是fp32来进行权重参数的存储&#xff0c;比如Python float的类型为双精度浮点数fp64&#xff0c;pytorch Tensor的默认类型为单精度浮点数fp32。随着模型越来越大&#xff0c;加速训练模型的需求就产生了。在深度学习模型中使用fp32主要存在几个…

Prometheus+Grafana可视化监控【Redis状态】

文章目录 一、安装Docker二、安装Redis数据库(Docker容器方式)三、安装Prometheus四、安装Grafana五、Pronetheus和Grafana相关联六、安装redis_exporter七、Grafana添加Redis监控模板 一、安装Docker 注意&#xff1a;我这里使用之前写好脚本进行安装Docker&#xff0c;如果已…

Python实现查询一个文件中的pdf文件中的关键字

要求&#xff0c;查询一个文件中的pdf文件中的关键字&#xff0c;输出关键字所在PDF文件的文件名及对应的页数。 import os import PyPDF2def search_pdf_files(folder_path, keywords):# 初始化结果字典&#xff0c;以关键字为键&#xff0c;值为包含关键字的页面和文件名列表…

七天学会C语言-第七天(结构体)

1.定义结构体 例 1&#xff1a;把一个学生的信息(包括学号、姓名、性别、住址等 4 项信息) 放在一个结构体变量中&#xff0c;然后输出这个学生的信息。 #include <stdio.h>struct Student {int student_id;char name[30];char gender;char address[60]; };int main() …

合并两个升序链表,哨兵位的理解

开始时也要判断是否有一个链表本来就是空&#xff0c;如果是&#xff0c;直接返回另外一个链表 代码&#xff1a; struct ListNode* mergeTwoLists(struct ListNode* list1, struct ListNode* list2){if(list1NULL){return list2;}if(list2NULL){return list1;} struct ListN…

【收藏】如何最快取得NISP二级和CISP

【收藏】如何最快取得NISP二级和CISP &#x1f449;今天小编来给大家讲解一下如何最快的取得NISP二级和CISP证书 ✅我们从如下几个方面为大家讲解&#xff1a; &#x1f53a;报名条件 &#x1f53a;考试形式 &#x1f53a;考试题型 &#x1f53a;如何备考 &#x1f53a;证书用途…

[Linux入门]---Linux项目自动化构建工具-make/Makefile

目录 1.背景2.make指令输入make默认为Makefile文件第一条指令执行Makefile文件对gcc指令特殊处理及原理特殊符号 3.总结 1.背景 会不会写makefile&#xff0c;从一个侧面说明了一个人是否具备完成大型工程的能力一个工程中的源文件不计数&#xff0c;其按类型、功能、模块分别放…

maven多模块依赖包程序包xxx不存在

背景 rpc-common 被 rpc-server、rpc-client依赖 项目地址 https://github.com/pjmike/springboot-rpc-demo mvn clean install 打包时报错 报错信息 程序包xxxx不存在 找不到符号 原因分析 原因还不清楚&#xff0c;网友们帮解答一下 解决 主pom.xml 添加 <packaging…

微调大型语言模型(一):为什么要微调(Why finetune)?

今天我们来学习Deeplearning.ai的在线课程 微调大型语言模型(一)的第一课&#xff1a;为什么要微调(Why finetune)。 我们知道像GPT-3.5这样的大型语言模型(LLM)它所学到的知识截止到2021年9月&#xff0c;那么如果我们向ChatGPT询问2022年以后发生的事情&#xff0c;它可能会…

LeetCode 刷题记录——从零开始记录自己一些不会的(二)

20. 替换后的最长重复字符 题意 给你一个字符串 s 和一个整数 k 。你可以选择字符串中的任一字符&#xff0c;并将其更改为任何其他大写英文字符。该操作最多可执行 k 次。 在执行上述操作后&#xff0c;返回包含相同字母的最长子字符串的长度。 思路 代码 class Solution…

API(十一) 获取openresty编译信息

一 ngx.config 说明&#xff1a; 不常用,了解即可 ngx.config.subsystem 说明&#xff1a; 用的四层还是七层代理 ngx.config.debug 说明&#xff1a; 返回的是boolean类型, openresty rpm安装一般没有 --with-debug编译选项对比&#xff1a; nginx rpm 安装一般携带 --wi…

【二叉树魔法:链式结构与递归的纠缠】

本章重点 二叉树的链式存储二叉树链式结构的实现二叉树的遍历二叉树的节点个数以及高度二叉树的创建和销毁二叉树的优先遍历和广度优先遍历二叉树基础oj练习 1.二叉树的链式存储 二叉树的链式存储结构是指&#xff0c;用链表来表示一棵二叉树&#xff0c;即用链来指示元素的逻辑…