微信小程序高级开发(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. 错误处理:在下载和保存过程中,处理可能出现的错误,并向用户提示相应的信息。

@漏刻有时

相关推荐
The_era_achievs_hero1 小时前
微信小程序71~80
微信小程序·小程序
dssxyz3 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_7 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子11 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记11 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812112 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero14 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠15 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序