微信小程序保存图片到相册

目录

微信小程序实现将图片保存到手机相册（方案一）

微信小程序实现将图片保存到手机相册（方案二）

微信小程序之点击复制文本到剪贴板

微信小程序---判断是IOS还是安卓

微信小程序分享图片给微信好友

---

微信小程序实现将图片保存到手机相册（方案一）

首先我们需要调用wx.downloadFile方法下载文件资源到本地，然后利用wx.saveImageToPhotosAlbum方法保存图片到系统相册，需要注意的是这样写很可能会因为没有权限而导致下载不了图片，所以我们最后还需要给接口一个调用失败的回调函数，以此来获取权限，最后这个小功能就实现啦。

<!-- 按钮触发事件 -->
<button bindtap="downloadImg">点击下载图片</button>
 
 
const app = getApp(); //获取app实例
Page({
    data: {
        modalType: false, //弹框默认不显示
        imgUrl: "https://s1.ax1x.com/2022/04/11/LV4c4J.jpg", //模拟图片
    },
    // 点击下载图片事件
    downloadImg() {
        wx.showLoading({
            title: '加载中...'
        });
        //wx.downloadFile方法：下载文件资源到本地
        wx.downloadFile({
            url: this.data.imgUrl, //图片地址
            success: function (res) {
                //wx.saveImageToPhotosAlbum方法：保存图片到系统相册
                wx.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath, //图片文件路径
                    success: function (data) {
                        wx.hideLoading(); //隐藏 loading 提示框
                        wx.showModal({
                            title: '提示',
                            content: '保存成功',
                            modalType: false,
                        })
                    },
                    // 接口调用失败的回调函数
                    fail: function (err) {
                        if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny" || err.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
                            wx.showModal({
                                title: '提示',
                                content: '需要您授权保存相册',
                                modalType: false,
                                success: modalSuccess => {
                                    wx.openSetting({
                                        success(settingdata) {
                                            console.log("settingdata", settingdata)
                                            if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限成功,再次点击图片即可保存',
                                                    modalType: false,
                                                })
                                            } else {
                                                wx.showModal({
                                                    title: '提示',
                                                    content: '获取权限失败，将无法保存到相册哦~',
                                                    modalType: false,
                                                })
                                            }
                                        },
                                        fail(failData) {
                                            console.log("failData", failData)
                                        },
                                        complete(finishData) {
                                            console.log("finishData", finishData)
                                        }
                                    })
                                }
                            })
                        }
                    },
                    complete(res) {
                        wx.hideLoading(); //隐藏 loading 提示框
                    }
                })
            }
        })
    }
})

微信小程序实现将图片保存到手机相册（方案二）

在微信小程序中要保存图片到本地相册，需要获取相册权限。总之整个功能实现下来需要如下几个小程序的API：wx.getSetting，wx.authorize，wx.openSetting，wx.downloadFile，wx.saveImageToPhotosAlbum

openSetting,【打开小程序设置页】有坑，是官方的问题，这里出现授权弹框，如果你点击拒绝再次引导授权流程弹框不会立马弹出（官方解释说因为频繁代用授权会带来各种一系列问题），如果想马上再次弹出授权弹框需要通过button来解决。
点击查看官方解释

//再次打开授权引导
 
方法1：使用 button 组件来使用此功能，示例代码如下：
<button open-type="openSetting" bindopensetting="callback">打开设置页</button>
 
方法2:由点击行为触发wx.openSetting接口的调用，示例代码如下：
<button bindtap="openSetting">打开设置页</button>  openSetting() {  wx.openSetting()}

 wx.downloadFile 保存图片的时候，打印成功回调里边会有tempFilePath 后缀名不正确格式。（Android机会有这种情况，iOS不清楚），就回导致后续wx.saveImageToPhotosAlbum方法是出现错误：文件格式类型错误问题

有的说dowloadFile的url值要是jpg格式的，但是我试png也可以，具体情况具体分析。

var fileN=new Date().valueOf();
//filePath指定文件下载后存储的路径，wx.env.USER_DATA_PATH
var fileP=wx.env.USER_DATA_PATH+'/'+fileN+'.jpg'
wx.dowloadFile({
	url:'你的图片url地址',
	filePath:fileP,//这里要加这个filePath属性
	success:(res)=>{
		var filePath=res.filePath;
		wx.saveImageToPhotosAlbum({
			filePath,
			success:(res)=>{
				console.log('保存成功')
			}
		})
	}
	
})
 

完整代码

<image src="{{url}}"></image>
 <view bindtap="clickSaveImg" class="save-code"></view>
 
Page({
	data:{
		url:'',//图片地址
	},
	clickSaveImg(){//先授权相册
		wx.getSetting({
			success:res=>{
				if(!res.authSetting['scope.writePhotosAlbum']){//未授权的话发起授权
					wx.authorize({
						scope:'scope.writePhotosAlbum',
						success:()=>{//用户允许授权，保存到相册
							this.saveImg();
						},
						fail:()=>{//用户拒绝授权，然后就引导授权（这里的话如果用户拒绝，不会立马弹出引导授权界面，坑就是上边所说的官网原因）
							wx.openSetting({
								success:()=>{
									wx.authorize({
										scope:'scope.writePhotosAlbum',
										succes:()=>{//授权成功，保存图片
										this.saveImg();
											
										}
									})
								}
							})
						}
					})
				}else{//已经授权
					this.saveImg();
				}
			}
		})
	},
	
	saveImg(){//保存到相册
		let {url} = this.data;
		wx.downloadFile({//这里如果有报错就按照上边的解决方案来处理
			url:url,
			success:(res)=>{
				wx.saveImageToPhotosAlbum({
					filePath:res.tempFilePath,
					success:(res)=>{
						wx.showToast({
							title:'保存成功！'
						})
					},
					faile:(err)=>{
						console.log('失败！')
					}
				})
			}
		})
	},
 
})

 最后一个坑

在开发者工具和手机打开调试都可以成功保存图片，但是关了调试，就不可以保存。这个时候需要登录到微信小程序后台(开发->开发设置)，查看downloadFile合法域名 中有没有配置合法域名，也就是下载图片路径的白名单，你的图片路径域名需要在这里配置，才可以！然后就可以保存图片！！！

微信小程序之点击复制文本到剪贴板

<view>内容：{{contents}} </view>
<view  bindtap='copyText' data-text="{{contents}}">复制</view>
 
Page({
  data: {
    contents:'这是可以复制的文字,粘贴后即可看到效果'
  },
  copyText: function (e) {
    console.log(e)
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },
})

微信小程序---判断是IOS还是安卓

 let res = wx.getSystemInfoSync();
 if(res.platform == 'ios')   //ios
  if(res.platform == 'android')  //安卓
    if(res.platform == 'devtools')  //开发者工具

微信小程序分享图片给微信好友

shareImg(){
  wx.downloadFile({
    url: 'https://xxx.jpg',//分享的图片的链接
    success: (res) => {
      wx.showShareImageMenu({
        path: res.tempFilePath
      })
    }
  })
},