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


    1. <template>
    2. <view>
    3. <web-view :webview-styles="webviewStyles" :src="webUrl">web-view>
    4. view>
    5. 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

    1. // static/script.js
    2. mui.init({
    3. gestureConfig: {
    4. longtap: true, //默认为false
    5. }
    6. });
    7. document.addEventListener('longtap', function(e) {
    8. mui.toast('LongPress')
    9. if (e.target.tagName == "IMG") {
    10. console.log(e.target.src);
    11. mui.plusReady(function() {
    12. mui.confirm('是否下载此图片', '确认下载', '下载', function(d) {
    13. if(d.index==0){
    14. var down = plus.downloader.createDownload(e.target.src, {}, function(e, a) {
    15. console.log(e);
    16. plus.gallery.save(e.filename,function (e) {
    17. mui.toast('下载成功,请查看相册')
    18. console.log("下载成功,请查看相册");
    19. },function (e) {
    20. console.log("下载失败");
    21. })
    22. })
    23. down.start()
    24. }
    25. })
    26. })
    27. }
    28. })

    向页面的web-view注入js

    mui框架将很多功能配置都集中在mui.init方法中,要使用某项功能,只需要在mui.init方法中完成对应参数配置即可,目前支持在mui.init方法中配置的功能包括:创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载、设置系统状态栏背景颜色。 

    配置的参数:

    1. mui.init({
    2. //子页面
    3. subpages: [{
    4. //...
    5. }],
    6. //预加载
    7. preloadPages:[
    8. //...
    9. ],
    10. //下拉刷新、上拉加载
    11. pullRefresh : {
    12. //...
    13. },
    14. //手势配置
    15. gestureConfig:{
    16. //...
    17. },
    18. //侧滑关闭
    19. swipeBack:true, //Boolean(默认false)启用右滑关闭功能
    20. //监听Android手机的back、menu按键
    21. keyEventBind: {
    22. backbutton: false, //Boolean(默认truee)关闭back按键监听
    23. menubutton: false //Boolean(默认true)关闭menu按键监听
    24. },
    25. //处理窗口关闭前的业务
    26. beforeback: function() {
    27. //... //窗口关闭前处理其他业务详情点击 ↑ "关闭页面"链接查看
    28. },
    29. //设置状态栏颜色
    30. statusBarBackground: '#9defbcg', //设置状态栏颜色,仅iOS可用
    31. preloadLimit:5//预加载窗口数量限制(一旦超出,先进先出)默认不限制
    32. })

  • 相关阅读:
    最新kafka对应zk版本查询的万能方法
    Android中级——MVVM
    【设计模式】Java设计模式 - 模板模式
    java基于springboot+vue+elementui的漫画投稿交流平台 前后端分离
    51单片机学习笔记3 C51数据类型及最小系统
    自动化运维管理工具 Ansible
    虚拟化运维监测管理系统云安成为混合工作时代的 VDI
    【Seata】深入解读分布式事务解决方案
    ElementUI的bug/方案/使用技巧合集,持续更新(最新22-7-4)
    芯片产业管理和营销指北(1)—— 产品线经理主要职能
  • 原文地址:https://blog.csdn.net/watson2017/article/details/132906825