美文网首页
小程序-长按保存图片

小程序-长按保存图片

作者: 墨芊baby | 来源:发表于2018-10-15 11:41 被阅读0次

微信公众号页面不需要方法设置,微信会自动弹窗显示保存图片,自动识别二维码
而小程序需要额外定义授权保存图片和长按保存图片

wepy框架:
wxml:此处图片为接口请求获取

    <view class="mask-share" wx:if="{{ sharePop }}" @tap="onShare">
        <image  class="share-qr" src="{{ popImg }}"  @longpress="downloadImg"></image>
        <view class="share-tips">
            <text class="ff-fingerprint"></text>
            <text class="tips-txt">长按保存图片</text>
        </view>
    </view>

js

data= {
  sharePop: false,
  popImg: ''
}
methods = {
        onShare() {
            this.sharePop = !this.sharePop
        },
        //长按保存图片方法
        downloadImg() { //下载文件资源到本地,客户端直接发起一个 HTTP GET 请求,返回文件的本地临时路径
            var _this = this
            wx.downloadFile({
                url: _this.popImg,
                success (res) {
                    wx.saveImageToPhotosAlbum({  // 下载成功后再保存到本地
                        filePath: res.tempFilePath,  //返回的临时文件路径,下载后的文件会存储到一个临时文件
                        success () {
                            _this.sharePop = !_this.sharePop
                            wx.showToast({
                                title: '图片保存成功',
                                icon: 'none',
                                duration: 2000
                            })
                        }
                    })
                }
            })
        },

        //请求获取图片地址
        judgeShowPop() {//支付成功后且在重阳节活动时间内自动弹窗
        wepy.request({
            url: '/mobile/mina/checkup/product/shareUrl'
        }).then((res) => {
            this.popImg = res.data
            if(this.fromPay  && (+new Date() < new Date('10/24/2018').getTime())) {
                this.sharePop = true
                this.$apply()
            }
        })
    }
    onLoad({ orderNo, fromPay }) {   //根据来源 支付成功后出现弹层
        wx.getSetting({ //获取用户的当前设置,进行用户授权
            success (res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        fail (err) {
                            
                        }
                    })
                }
            }
        })
        this.orderNo = orderNo
        this.fromPay = fromPay
        this.judgeShowPop()
    }

相关文章

网友评论

      本文标题:小程序-长按保存图片

      本文链接:https://www.haomeiwen.com/subject/cyffzftx.html