uni-app實現(xiàn)web-view圖片長按下載解決方案

更新時間：2023年09月16日 10:21:15 作者：培根芝士

uniapp的web-view中圖片無法長按保存，IOS下是正常的，但是Android下長按無反應(yīng)，這篇文章主要介紹了uni-app實現(xiàn)web-view圖片長按下載解決方案,需要的朋友可以參考下

解決方案：

下載mui.min.js，放到項目中的static下

https://github.com/dcloudio/mui/???????

https://github.com/dcloudio/mui/

在static目錄下新建script.js

// static/script.js
mui.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-PLUS
			var 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方法中完成對應(yīng)參數(shù)配置即可，目前支持在 mui.init 方法中配置的功能包括：創(chuàng)建子頁面、關(guān)閉頁面、手勢事件配置、預(yù)加載、下拉刷新、上拉加載、設(shè)置系統(tǒng)狀態(tài)欄背景顏色。

配置的參數(shù)：

mui.init({  
    //子頁面  
    subpages: [{  
        //...  
    }],  
    //預(yù)加載  
    preloadPages:[  
        //...  
    ],  
    //下拉刷新、上拉加載  
    pullRefresh : {  
       //...  
    },  
    //手勢配置  
     gestureConfig:{  
       //...  
    },  
    //側(cè)滑關(guān)閉  
    swipeBack:true, //Boolean(默認false)啟用右滑關(guān)閉功能    
    //監(jiān)聽Android手機的back、menu按鍵  
    keyEventBind: {  
        backbutton: false,  //Boolean(默認truee)關(guān)閉back按鍵監(jiān)聽  
        menubutton: false   //Boolean(默認true)關(guān)閉menu按鍵監(jiān)聽  
    },  
    //處理窗口關(guān)閉前的業(yè)務(wù)  
    beforeback: function() {  
        //... //窗口關(guān)閉前處理其他業(yè)務(wù)詳情點擊 ↑ "關(guān)閉頁面"鏈接查看  
    },  
    //設(shè)置狀態(tài)欄顏色  
    statusBarBackground: '#9defbcg', //設(shè)置狀態(tài)欄顏色,僅iOS可用  
    preloadLimit:5//預(yù)加載窗口數(shù)量限制(一旦超出,先進先出)默認不限制  
})

到此這篇關(guān)于uni-app實現(xiàn)web-view圖片長按下載的文章就介紹到這了,更多相關(guān)uni-app圖片長按下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: