下载海报和分享好友

一、效果图

 

 

 

 

 

 二、代码

①、wxml

<button bindtap="clickme">
  clickme
</button>



<!--屏幕背景变暗的背景  -->
<view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></view>
  <!--弹出框  -->
<view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">
    <view class="home">
    <view class="home1">
      <view class="home2" bindtap="downloadImages">
        <button class="btn1">
            <image src="/image/onload.png" style="width:50px;height:50px;"></image>
        </button>
        <!-- <image src="/images/onload.png" style="width:50px;height:50px;"></image> -->
      </view>
      <view class="home3">下载海报</view>
    </view>

    <view class="home1">
      <view class="home2">
        <button class="btn1" open-type="share" bindopensetting="callback">
            <image src="/image/wechat1.png" style="width:50px;height:50px;"></image>
        </button>
      </view>
      <view class="home3">发送好友</view>
    </view>
    </view>
    <view class="blan"></view>
    <view class="cancel" bindtap="hideModal">取消</view>

    <!-- 取消下面宽点 -->
    
</view>

    <view wx:if="{{showModalStatus}}"  class="chat2">
        <image src="{{posterUrl}}" class="img"></image>
    </view>

②、js

Page({
    data: {
        
        shareName: null,
        posterUrl: 'https://dinghuo.fxsoft88.com/file/getImage/GOODS_1/05029-11-MGOODS-1.png',
    },

    downloadImages: function() {

        this.setData({
            showModalStatus: false
        })
        
        //复制图片
        //this.share();
        wx.getSetting({
          success: (res) => {
            console.log("scope.writePhotosAlbum的状态", res.authSetting['scope.writePhotosAlbum']);
            if (res.authSetting['scope.writePhotosAlbum'] == false) {
              wx.openSetting({
                success(settingdata) {
                  console.log("======settingdata=======", settingdata)
                },
                fail(res) {
                  console.log("再次发起授权失败了")
                }
              })
            }
          }
        })
    
    
    
        let img1 = [];
        img1.push(this.data.posterUrl);
        
    
        console.log("uri", img1);
        let count = 0;
        for (let i = 0; i < img1.length; i++) {
    
          wx.downloadFile({
            url: img1[i],
            success: function(res) {
              console.log("图片保存到本地", res);
              //图片保存到本地
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
                success: function(data) {
                  count++;
                  wx.showLoading({
                    title: '保存中...',
                    mask: true,
                  });
                  console.log("count", count);
                  console.log("img1.length=", img1.length);
                  if (img1.length === count) {
                    if (img1.length === count) {
                      wx.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 1000
                      })
                    } else {
                      wx.showToast({
                        title: '请重新保存',
                        duration: 1000
                      })
                    }
                  }
    
                  console.log("data:",data);
                },
                fail: function(err) {
                  console.log("err=", err);
                  if (err.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
                    wx.showToast({
                      title: '请授权下载',
                      duration: 1000
                    })
                    console.log("用户一开始拒绝了，再次发起授权")
                    console.log('打开设置窗口')
    
                  }
                }
              })
            },
            fail: function(err) {
              wx.showToast({
                title: '请重新下载',
                duration: 1000
              })
            }
          })
        }
      },


    //点击我显示底部弹出框
    clickme: function () {

        this.showModal();
        //生成图片

        
    },
    //显示对话框
    showModal: function () {
        // 显示遮罩层
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
            showModalStatus: true
        })
        setTimeout(function () {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export()
            })
        }.bind(this), 200)
    },
    //隐藏对话框
    hideModal: function () {
        // 隐藏遮罩层
        var animation = wx.createAnimation({
            duration: 200,
            timingFunction: "linear",
            delay: 0
        })
        this.animation = animation
        animation.translateY(300).step()
        this.setData({
            animationData: animation.export(),
        })
        setTimeout(function () {
            animation.translateY(0).step()
            this.setData({
                animationData: animation.export(),
                showModalStatus: false
            })
        }.bind(this), 200)
    },



})

③、wxss

/* 下弹窗 */
.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
/*对话框 */
.commodity_attr_box {
  height: 350rpx;
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
  border-top-left-radius: 10rpx;
  border-top-right-radius: 10rpx;
}

.icon{
    position: fixed;
    flex-direction: row;
    height: 200rpx;
}

.onload{
    width: 25%;
}

.home{
  width: 90%;
  height: 200rpx;
  background-color: rgb(255, 255, 255);
  margin-left: 5%;
  display: flex;
  flex-direction: row;
  border-radius: 20rpx;
  
  
}

.home1{
  width: 25%;
  display: flex;
  height: 200rpx;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 22rpx;
  
}

.home2{
  display: flex;
  
}


.home3{
  display: flex;
  margin-top: 20rpx;
}

.blan{
    height: 1rpx;
    background-color: rgba(66, 77, 68, 0.096);
}

.cancel{
    height: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 150rpx;
}




.chat2{
  position: fixed;
  top: 10%;
  left: 125rpx;
  z-index: 1000;
  width: 80%;
  border-radius: 20rpx;
}
.chat2::after{
  border: 0;
}
.chat2 .img{
  position: absolute;
  height: 900rpx;
  width: 500rpx;
  border-radius: 20rpx;
}

.btn1 {
  background-color: white;
  display: flex;
  justify-content: right;
  margin-top: 5px;
}
.btn1::after {
  border-radius: 98rpx;
  border: 0; 
}