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;
}
代码说明
- 权限检查:在点击按钮时,首先检查是否有保存图片到相册的权限。如果没有权限,请求用户授权;如果已有权限,直接下载并保存图片。
- 下载图片 :使用
wx.downloadFile
方法将图片下载到本地临时文件。 - 保存图片 :使用
wx.saveImageToPhotosAlbum
方法将下载的图片保存到相册。 - 错误处理:在下载和保存过程中,处理可能出现的错误,并向用户提示相应的信息。
@漏刻有时