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

首先我们需要调用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')   //iosif(res.platform == 'android')  //安卓if(res.platform == 'devtools')  //开发者工具

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

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

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

微信小程序--保存图片到相册失败：saveImageToPhotosAlbum:fail auth deny
@wx.saveImageToPhotosAlbum 微信小程序–保存图片到相册失败:saveImageToPhotosAlbum:fail auth deny 是否授权了保存功能 wx.openS ...
（转）微信小程序保存图片到相册
这篇文章主要为大家详细介绍了微信小程序保存图片到相册权限设置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下微信小程序保存图片到相册可以分成两种:一种是保存网络图片,一 ...
微信小程序保存图片到相册步骤
/*** @description 图片长按调起菜单弹窗*/ imgLongTap(row) {console.log('图片长按', row)/* #ifdef MP-WEIXIN */uni.s ...
微信小程序保存图片到相册；uni-app小程序保存网络图片到相册；小程序保存图片到相册拒绝授权后重新拉起授权；保存图片到系统相册；小程序保存图片测试可以，真机保存图片失败
文末代码可以直接复制使用,图片修改成你的图片路径即可一.场景: 小程序点击按钮,保存项目内的静态图片或者微信头像或者后端返回的图片: 二.注意点及思路拆分: –2.1:小程序保存图片功能,必须要有s ...
有关微信小程序保存图片到相册以及当用户拒绝授权保存图片后如何重新拉起授权的详细解析
一.准备阶段保存图片到系统相册文档 uni.saveImageToPhotosAlbum({filePath: '', // 必须是本地路径success: () => {console.lo ...
微信小程序保存图片到相册，分享朋友圈的基础demo
由于微信小程序内无法直接将小程序分享到朋友圈,这时候就需要让用户生成图片到手机,才可以到朋友圈发送图片,实际效果可以看以下的小程序,,如果还有问题,可以加我QQ拿demo,785116869 分享图片 ...
微信小程序保存图片到相册授权被拒绝后重新拉取授权的方法
近期开发过小程序的童鞋应该已经知道,小程序某些接口已废弃,改用新的接口. 比如wx.getUserInfo().wx.authorize().wx.openSetting()等都将废弃,拉起不了用户授 ...
微信小程序保存图片到相册
/*** 保存到相册*/ downShareImgFun : function () {let that = this;//获取相册授权wx.getSetting({success(res) {if ...
微信小程序--保存图片到相册功能实现
项目中有个保存二维码到相册的功能,所以涉及到用户是否授权相册权限的问题.废话不多说,直接上干货- 功能逻辑: 先检查用户请求过的权限中是否允许"保存到相册"权限,如果没有请求过这个 ...
微信小程序保存图片到相册授权被拒绝后重新拉取授权
saveimg: function() {var that = this;wx.showLoading({title: '保存中',})wx.downloadFile({url: that.data. ...

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