专栏首页腾讯NEXT学位干货 | 微信小程序长按保存图片

干货 | 微信小程序长按保存图片

  • 微信浏览器打开h5页面如果是img标签的话,长按会弹出保存图片的选项。但是微信小程序里面不可以,需要自己写这个功能。
  • 这个功能有两个点,一个是长按,一个是保存图片到本地。

1. 微信小程序关于图片长按的解释,有两种:

因此我们选用 bindlongpress 事件

2. 保存图片接口

微信小程序同样提供了保存图片的接口,是wx.saveImageToPhotosAlbum()

3. 值得说的是,保存的接口,两个需要注意的地方:

① 需要先授权,调用 wx.getSetting()方法

② 保存的图片路径参数,不支持网络路径,而在我们渲染页面时,用到的图片有很大可能是网络路径,这时候我们需要先把网络路径转为可用的本地路径,wx.getImageInfo()方法可以满足需要

4. 最后再走个心吧,毕竟我这么可爱

①长按后直接保存未免潦草了些,考虑到用户体验,加入 wx.showActionSheet() ② 如果用户拒绝授权 或者 以前拒绝过授权,这时候也应该给他提示,或者展示再次打开授权的入口

将将!然后就可以开始写代码了:

<image src="{{url}}" data-url="{{url}}" bindlongpress="saveImage"></image>
// 长按保存功能--授权部分saveImage (e) {    let _this = this    wx.showActionSheet({        itemList: ['保存到相册'],        success(res) {            let url = e.currentTarget.dataset.url;            wx.getSetting({                success: (res) => {                    if (!res.authSetting['scope.writePhotosAlbum']) {                        wx.authorize({                            scope: 'scope.writePhotosAlbum',                            success: () => {                                // 同意授权                                _this.saveImgInner(url);                            },                            fail: (res) => {                                console.log(res);                                wx.showModal({                                    title: '保存失败',                                    content: '请开启访问手机相册权限',                                    success(res) {                                        wx.openSetting()                                    }                                })                            }                        })                    } else {                        // 已经授权了                        _this.saveImgInner(url);                    }                },                fail: (res) => {                    console.log(res);                }            })           },        fail(res) {            console.log(res.errMsg)        }    })},// 长按保存功能--保存部分saveImgInner (url) {    wx.getImageInfo({        src: url,        success: (res) => {            let path = res.path;            wx.saveImageToPhotosAlbum({                filePath: path,                success: (res) => {                    console.log(res);                    wx.showToast({                        title: '已保存到相册',                    })                },                fail: (res) => {                    console.log(res);                }            })        },        fail: (res) => {            console.log(res);        }    })},

原文作者:Rolan

原文链接:http://www.wxapp-union.com/article-5770-1.html

好课推荐

腾讯导师联袂授课,技术大咖直播答疑

大厂标准全面培养,优秀学员offer内推

点击阅读原文了解更多!

本文分享自微信公众号 - 腾讯NEXT学院(Next_Academy)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-01-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • @互联网人:年前跳槽好,还是年后跳槽好?

    接近年底了,互联网人跳槽的心蠢蠢欲动。 前几天小N跟朋友闲聊的时候说起这事,我问他,如果现在有猎头找上门来,刚好又是个不错的职位,你会在年前跳槽吗? 他犹豫...

    腾讯NEXT学位
  • 那些让编码效率起飞(前端)的工具了解一下

    ? | 导语 想晚上吃鸡?前端编码效率提升工具了解一下? 一、Bash篇(Mac) iTerm2 iTerm 2 is a terminal emulato...

    腾讯NEXT学位
  • React 16 加载性能优化指南(上)

    公司的新项目迁移到了 React 16 和 Webpack 4.0,写一篇文章来总结一下。

    腾讯NEXT学位
  • 蓝牙在小程序中的应用

    蓝牙在日常生活中广泛使用的一项技术,小程序给了我们前端工程师一个控制蓝牙的方法,带上你的设备,来看看怎么控制你的蓝牙设备吧。

    leochu2008
  • Ubuntu 使用 FRP 实现内网穿透

    KEVINGUO_CN
  • 微信小程序for循环里条件判断

    今天踩了一下午的坑,但是确实很简单的问题。

    疯狂的小程序
  • JavaSE(一)之类与对象

    终于到了要学习面向对象程序设计了,其中可能很多东西以前都知道怎么去用,但是却不知道怎么来的,或者怎么样写会出错,所以今天总结起来。 一、OOP概述   Java...

    用户1195962
  • 微信JS-SDK 注入权限验证配置

    wx.config({     debug: true, // 开启调试模式,建议开发时开启     appId: '${appId}',      //注意 ...

    冷冷
  • Java 使用 endorsed 覆盖jdk提供的类

    java404
  • 微信小程序开发技巧总结(二) -- 文件的选取、移动、上传和下载

    也为其提供了视频和图片的二合一接口,这个接口不建议调用,图片和视频的上传建议区分开。

    Kindear

扫码关注云+社区

领取腾讯云代金券