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

xml 复制代码
 <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 文件

xml 复制代码
<!-- 分享海报弹窗 -->
<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 文件中实现按钮点击事件的处理函数,该函数将完成下载图片和保存到相册的操作。需要注意的是,由于微信小程序的安全机制,保存图片前需要先将图片下载到本地临时文件,同时要处理可能出现的权限问题。

javascript 复制代码
// 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 文件来美化界面。

css 复制代码
/* 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. 错误处理:在下载和保存过程中,处理可能出现的错误,并向用户提示相应的信息。

@漏刻有时

相关推荐
YoloMari2 小时前
组件中的emit
前端·javascript·vue.js·微信小程序·uni-app
一只风里8 小时前
头像生成小程序搭建(免费分享)
微信小程序·小程序·uniapp·头像框小程序·头像生成·流量主·壁纸头像
V+zmm101348 小时前
食堂订餐小程序ssm+论文源码调试讲解
java·数据库·微信小程序·小程序·毕业设计
说私域8 小时前
私域流量池构建与转化策略:以开源链动2+1模式AI智能名片S2B2C商城小程序为例
大数据·人工智能·小程序·开源
weixin_418654699 小时前
Cursor 帮你写一个小程序
小程序·cursor ai
计算机-秋大田11 小时前
微信阅读网站小程序的设计与实现(LW+源码+讲解)
spring boot·后端·微信·微信小程序·小程序·课程设计
你我哈1 天前
微信小程序-点餐(美食屋)02开发实践
微信小程序·小程序·html·php·美食
会发光的猪。1 天前
如何获取小程序的code在uniapp开发中
前端·小程序·uni-app
至尊鸡1 天前
今天也是记录小程序进展的一天(破晓时8)
前端·科技·小程序·前端框架