当前位置: 首页 > news >正文

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.lryc.cn/news/172152.html

相关文章:

  • 深入理解Linux网络笔记(一):内核是如何接收网络包的
  • android系统目录结构
  • 怒刷LeetCode的第11天(Java版)
  • CentOS LVM缩容与扩容步骤
  • 开发者福利!李彦宏将在百度世界大会手把手教你做AI原生应用
  • 堆的OJ题
  • 物联网网关:连接设备与云端的桥梁
  • ChatGPT企业版来了,速度翻倍,无使用限制
  • opencv图像像素类型转换与归一化
  • 【自学开发之旅】Flask-前后端联调-异常标准化返回(六)
  • springcloud3 分布式事务解决方案seata之XA模式4
  • 编译ctk源码
  • 前后端分离的低代码快速开发框架
  • 【Java 基础篇】Java同步代码块解决数据安全
  • 亿纬锦能项目总结
  • 简明 SQL 组合查询指南:掌握 UNION 实现数据筛选
  • 【springMvc】自定义注解的使用方式
  • 求二维子数组的和(剖析)
  • 无(低)代码开发思路介绍
  • 代码随想录刷题 Day14
  • 二分类问题的解决利器:逻辑回归算法详解(一)
  • docker alpine镜像中遇到 not found
  • python的多线程多进程与多协程
  • 一文介绍使用 JIT 认证后实时同步用户更加优雅
  • 搞定“项目八怪”,你就是管理高手!
  • 机器视觉-标定篇
  • linux离线安装make
  • 【深度学习】卷积神经网络(LeNet)【文章重新修改中】
  • win10 Baichuan2-7B-Chat-4bits 上部署 百川2-7B-对话模型-4bits量化版
  • 2023/9/20总结