微信小程序高级开发(2):保存远程海报图片到相册（权限检查、下载图片、保存图片、错误处理）

 <view style="width: 100%;float:left;">
            <view style="width: 100%;float: left;">
                <view class="button" bindtap="openPosterWin" style="background-image: linear-gradient(to bottom, #fcfdff, #c6d9ff);color:#2570ff;font-weight:bold;">
                    <icon class="iconfont lock-fenxiang" style="font-size: 48rpx;margin-right: 20rpx;"></icon>分享
                </view>
                <button class="button" open-type="contact" style="background-image: linear-gradient(to bottom, #fffdf9, #ffe1bb);color:#ff8b09;font-weight:bold;">
                    <icon class="iconfont lock-kefu3" style="font-size: 46rpx;margin-right: 20rpx;"></icon>联系客服
                </button>
            </view>
        </view>

整体功能概述

此微信小程序旨在提供一个简单的交互功能，用户点击保存按钮后，程序会将指定的图片下载并保存到用户的手机相册中。在实现过程中，需要处理权限问题，确保程序在没有相册保存权限时能正确请求权限，以及在下载和保存图片过程中能处理各种可能出现的错误。

1. 编写 wxml 文件

<!-- 分享海报弹窗 -->
<view wx:if="{{posterWin}}">
    <view class="weui-mask {{posterWin ? 'weui-animate_fade-in' : 'weui-animate_fade-out'}}" bindtap="close"></view>
    <!-- 弹窗内容 -->
    <view class="poster-popup">
        <!-- 自适应窗口的图片 -->
        <image src="{{imgUrl}}" mode="widthFix" class="poster-image"></image>
        <!-- 保存图片按钮 -->
        <button bindtap="saveImageToAlbum" class="save-button">保存图片</button>
    </view>
</view>

2. 编写 js 文件

在 js 文件中实现按钮点击事件的处理函数，该函数将完成下载图片和保存到相册的操作。需要注意的是，由于微信小程序的安全机制，保存图片前需要先将图片下载到本地临时文件，同时要处理可能出现的权限问题。

// pages/index/index.js
Page({
  saveImageToAlbum: function () {
    const imageUrl = 'https://iot.***.net/login_side_bg.png';

    // 检查是否有保存图片到相册的权限
    wx.getSetting({
      success: (res) => {
        if (!res.authSetting['scope.writePhotosAlbum']) {
          // 如果没有权限，请求权限
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => {
              // 权限请求成功，下载图片并保存到相册
              this.downloadAndSaveImage(imageUrl);
            },
            fail: () => {
              // 权限请求失败，提示用户手动开启权限
              wx.showModal({
                title: '提示',
                content: '请在设置中开启保存图片到相册的权限',
                confirmText: '去设置',
                success: (res) => {
                  if (res.confirm) {
                    wx.openSetting();
                  }
                }
              });
            }
          });
        } else {
          // 已有权限，直接下载图片并保存到相册
          this.downloadAndSaveImage(imageUrl);
        }
      }
    });
  },

  downloadAndSaveImage: function (imageUrl) {
    // 下载图片
    wx.downloadFile({
      url: imageUrl,
      success: (res) => {
        if (res.statusCode === 200) {
          // 下载成功，保存图片到相册
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: () => {
              wx.showToast({
                title: '保存成功',
                icon: 'success'
              });
            },
            fail: (err) => {
              wx.showToast({
                title: '保存失败',
                icon: 'none'
              });
              console.error('保存图片失败:', err);
            }
          });
        } else {
          wx.showToast({
            title: '下载图片失败',
            icon: 'none'
          });
          console.error('下载图片失败，状态码:', res.statusCode);
        }
      },
      fail: (err) => {
        wx.showToast({
          title: '下载图片失败',
          icon: 'none'
        });
        console.error('下载图片失败:', err);
      }
    });
  }
});

3. 编写 wxss 文件（可选）

可以根据需要编写 wxss 文件来美化界面。

/* pages/index/index.wxss */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  padding: 10px 20px;
  font-size: 16px;
}

代码说明

1. 权限检查：在点击按钮时，首先检查是否有保存图片到相册的权限。如果没有权限，请求用户授权；如果已有权限，直接下载并保存图片。
2. 下载图片 ：使用 wx.downloadFile 方法将图片下载到本地临时文件。
3. 保存图片 ：使用 wx.saveImageToPhotosAlbum 方法将下载的图片保存到相册。
4. 错误处理：在下载和保存过程中，处理可能出现的错误，并向用户提示相应的信息。

---

@漏刻有时