SoFunction
Updated on 2025-03-01

uni-app implements web-view image long press download solution

<template>
	<view>
		<web-view :webview-styles="webviewStyles" :src="webUrl"></web-view>
	</view>
</template>

The images in uniapp's web-view cannot be saved for a long time. It is normal under IOS, but long time pressing on Android has no response

Solution:

Download and put it in the static project

/dcloudio/mui/​​​​​​​

/dcloudio/mui/

Create a new one in the static directory

// static/
({
    gestureConfig: {
        longtap: true, //Default is false    }
});
('longtap', function(e) {
	('LongPress')
    if ( == "IMG") {
		();
        (function() {
            ('Do you download this image?', 'Confirm Download', 'download', function(d) {
                if(==0){
                var down = (, {}, function(e, a) {
                    (e);
                    (,function (e) {
                    ('Download successfully, please check the album')
                    ("Download successfully, please check the album");
                    },function (e) {
                        ("Download failed");
                    })
                })
                ()
                }
            })
        })
    }
})

Inject js into the web-view of the page

<script>
	export default {
		data() {
			return {
				webviewStyles: {}
			}
		},
		onReady() {
			// #ifdef APP-PLUS
			var currentWebview = this.$scope.$getAppWebview()
			setTimeout(function() {
				let wv = ()[0]
				if (().osName == 'android') {
					('_www/static/')
					setTimeout(function() {
						('_www/static/')
					}, 1000)
				}
			}, 1000);
			// #endif
		},
	}
</script>

Mui framework concentrates many functional configurations in the method. To use a certain function, you only need to complete the corresponding parameter configuration in the method. Currently, it is supported The functions configured in the method include: creating subpages, closing pages, gesture event configuration, preloading, pull-down refreshing, pull-up loading, and setting the background color of the system status bar.

Configuration parameters:

({  
    //Subpage    subpages: [{  
        //...  
    }],  
    //Preload    preloadPages:[  
        //...  
    ],  
    //Pull down to refresh, pull up to load    pullRefresh : {  
       //...  
    },  
    //Gelephic configuration     gestureConfig:{  
       //...  
    },  
    //Slide Close    swipeBack:true, //Boolean (default false) enables the right swipe to turn off function    // Listen to the back and menu buttons of Android phone    keyEventBind: {  
        backbutton: false,  //Boolean (default truee) Turn off back button monitoring        menubutton: false   //Boolean (default true) Turn off menu key monitoring    },  
    //Processing the business before the window is closed    beforeback: function() {  
        //... //Click on other business details before closing the window. ↑ "Close Page" link to view    },  
    //Set the status bar color    statusBarBackground: '#9defbcg', //Set the status bar color, only available on iOS preloadLimit:5//The number of preload windows is limited (once it is exceeded, first in, first out) without limit by default})

This is the article about uni-app implementing web-view images to download for a long press. For more related uni-app images to download for a long press, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!