HBuilde wap2app长按图片保存 长按复制文字


用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="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="images/1.jpg" data-preview-src="" data-preview-group="1" />
                </p>
                <p>图片全屏预览后,长按预览图片可以保存到本地</p>
                <p>
                    <img src="images/2.jpg" data-preview-src="" data-preview-group="1" />
                </p>
                <p>第三张图片</p>
                <p>
                    <img src="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【转载】,谢谢!


解决app中无法长按文字复制

<!--app长按保存图片js--解决A标签无法点击-->
<script>
    mui('body').on( 'tap' , 'a' , function(){
        document.location.href=this.href;
    } )
</script>


HBuilde wap2app长按图片保存 长按复制文字  参考来源:https://www.cnblogs.com/wangxiaoling/p/9959656.html