目录
微信小程序实现将图片保存到手机相册（方案一）
微信小程序实现将图片保存到手机相册（方案二）
微信小程序之点击复制文本到剪贴板
微信小程序---判断是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('失败！')
}
})
}
})
},
})
最后一个坑文章来源：https://www.toymoban.com/news/detail-419068.html
在开发者工具和手机打开调试都可以成功保存图片，但是关了调试，就不可以保存。这个时候需要登录到微信小程序后台(开发->开发设置)，查看downloadFile合法域名 中有没有配置合法域名，也就是下载图片路径的白名单，你的图片路径域名需要在这里配置，才可以！然后就可以保存图片！！！文章来源地址https://www.toymoban.com/news/detail-419068.html
微信小程序之点击复制文本到剪贴板
<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
})
}
})
},
到了这里，关于微信小程序保存图片到相册 微信小程序实现将图片保存到手机相册（方案一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
