用Hbuilder打包网站，在打包好的app中是无法像网站那样直接使用长按图片保存的功能的，需要在网站里对来自wap2app进行单独处理，接下来介绍一下如何在Hbuilder打包后的app里实现长按图片的功能。
1.在需要实现长按图片保存的页面引入相关css文件：
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/preview.css"/>
2.页面引入相关js文件：
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
3.将需要长按保存的图片的img标签加上属性：data-preview-src="" data-preview-group="1"
<img src="data:images/2.jpg" data-preview-src="" data-preview-group="1" />
页面代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>长按保存图片</title>
<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
<link rel="stylesheet" type="text/css" href="css/preview.css"/>
<style type="text/css">
.photo-content{
padding-top: 44px;
background: #fff;
}
.content-padded{
margin: 10px;
}
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">长按保存图片</h1>
</header>
<div class="photo-content" style="position: relative;">
<div class="content-padded">
<p>这是图片放大预览后长按保存图片示例，点击如下图片可全屏预览功能</p>
<p>
<img src="data:images/1.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>图片全屏预览后，长按预览图片可以保存到本地</p>
<p>
<img src="data:images/2.jpg" data-preview-src="" data-preview-group="1" />
</p>
<p>第三张图片</p>
<p>
<img src="data:images/3.jpg" data-preview-src="" data-preview-group="1" />
</p>
</div>
</div>
<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.zoom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.previewimage.js" type="text/javascript" charset="utf-8"></script>
<script src="js/photosave.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
4.添加实现长按保存的js代码：
mui.init({
gestureConfig: {
longtap: true
}
});
mui.previewImage();
mui.plusReady(function() {
document.addEventListener('longtap', function(e) {
var target = e.target;
savePic(target);
});
});
/**
* 长按保存图片
* 1. 获取图片链接
* 2. 创建下载并下载图片
* 3. 保存至相册
*/
function savePic(target) {
if(target.tagName == 'IMG' && target.currentSrc.length > 0 && target.classList.contains('mui-zoom')) { //确保图片链接不为空
var imgUrl = target.src;
console.log('图片地址：' + imgUrl);
var suffix = cutImageSuffix(imgUrl);
mui.confirm("是否保存此图片", "", ["保存", "取消"], function(event) {
var index = event.index;
if(index == 0) {
/**
* 创建下载任务
* http://www.html5plus.org/doc/zh_cn/downloader.html#plus.downloader.createDownload
*/
var downLoader = plus.downloader.createDownload(imgUrl, {
method: 'GET',
filename: '_downloads/image' + suffix
}, function(download, status) {
var fileName = download.filename;
console.log('文件名:' + fileName);
console.log('下载状态：' + status);
/**
* 保存至本地相册
*/
plus.gallery.save(fileName, function() {
/**
* 保存后，弹出对话框是否查看；
*/
mui.confirm("打开相册查看", "", ["打开", "取消"], function(event) {
var gindex = event.index;
if(gindex == 0) {
/**
* 选择图片
*/
plus.gallery.pick(function(file) {
mui.toast("你选择了图片：" + file);
}, function(error) {
console.log(JSON.stringify(error));
}, {
});
}
});
});
});
/**
* 开始下载任务
*/
downLoader.start();
}
});
}
}
// 截取图片后缀用于重命名图片，防止%E5%85%89%E6%98%8E%E8%A1%8C编码的文件不被系统相册识别；
function cutImageSuffix(imageUrl) {
var index = imageUrl.lastIndexOf('.');
return imageUrl.substring(index);
}
完成以上步骤后，在Hbuilder中创建一个新的wap2app项目，放入你的项目链接，打包后在手机上安装，即可查看效果。
github地址：https://github.com/erinwxl/wap2app_longtap
备注：
在Hbuilder中新建一个wap2app，选择模板--选择 Hello wap2app模板 也可查看长按保存图片的示例。
转载时请注明出处及相应链接，本文永久地址：https://www.cnblogs.com/wangxiaoling/p/9959656.html，文章标题备注转载，如：xxx【转载】,谢谢！