uni-app實現(xiàn)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/???????
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方法中完成對應參數(shù)配置即可,目前支持在 mui.init 方法中配置的功能包括:創(chuàng)建子頁面、關閉頁面、手勢事件配置、預加載、下拉刷新、上拉加載、設置系統(tǒng)狀態(tài)欄背景顏色。
配置的參數(shù):
mui.init({
//子頁面
subpages: [{
//...
}],
//預加載
preloadPages:[
//...
],
//下拉刷新、上拉加載
pullRefresh : {
//...
},
//手勢配置
gestureConfig:{
//...
},
//側(cè)滑關閉
swipeBack:true, //Boolean(默認false)啟用右滑關閉功能
//監(jiān)聽Android手機的back、menu按鍵
keyEventBind: {
backbutton: false, //Boolean(默認truee)關閉back按鍵監(jiān)聽
menubutton: false //Boolean(默認true)關閉menu按鍵監(jiān)聽
},
//處理窗口關閉前的業(yè)務
beforeback: function() {
//... //窗口關閉前處理其他業(yè)務詳情點擊 ↑ "關閉頁面"鏈接查看
},
//設置狀態(tài)欄顏色
statusBarBackground: '#9defbcg', //設置狀態(tài)欄顏色,僅iOS可用
preloadLimit:5//預加載窗口數(shù)量限制(一旦超出,先進先出)默認不限制
})到此這篇關于uni-app實現(xiàn)web-view圖片長按下載的文章就介紹到這了,更多相關uni-app圖片長按下載內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法
這篇文章主要介紹了小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
DOM_window對象屬性之--clipboardData對象操作代碼
node.js chat程序如何實現(xiàn)Ajax long-polling長鏈接刷新模式

