Click here for WeChat code snippet, This function requires adding an appid to perform normal testing.
We know from the mini program documentation, It is used to save pictures to the album.
However, if you look closely, you will find that the filePath parameter of this interface only accepts temporary file paths or permanent file paths and does not support network image paths, which means that we cannot directly call this interface. .
Therefore, you need to download the file locally and use 。
But it is worth noting that the mini program can only communicate with the specified domain name on the Internet. That is to say, before downloading the picture, we need to first set up the uploadFile legal domain name in the development settings of the WeChat public platform.
The sample code is as follows:
<!-- -->
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">Save the picture</button>
//
const app = getApp()
Page({
data: {
url: '/u/23024075?s=460&v=4'
},
// Save the picture saveImage() {
('downloadFile', {
url:
})
.then(res => ('saveImageToPhotosAlbum', {
filePath:
}))
.then(res => {
// do something
({ title: 'Save successfully ~',icon: 'none' });
})
.catch(err) => {
(err);
// If the user cancels it himself, save the picture // if (~('cancel')) return;
})
},
/**
* Convert callback to readable promise
* @returns [promise]
*/
wxToPromise(method, opt) {
return new Promise((resolve, reject) => {
wx[method]({
...opt,
success(res) {
&& ();
resolve(res)
},
fail(err) {
&& ();
reject(err)
}
})
});
},
})
Then theoretically, you can save the picture... The first time a user uses the save picture function in our mini program is that an authorization pops up. If the user clicks the user and refuses authorization, clicks to save the picture again, and then he will find that there is no reaction. . .
The reason for this is that this authorization pop-up box will only appear once, so we have to find a way to get the user to reauthorize it again. I thought about using it now .
However, after testing, it is found that after using it, an error of authorize:fail auth deny will be reported. Then after checking the information, I learned that:
- If the user has not accepted or rejected this permission, a pop-up window will ask the user, and the user can only call the interface after clicking to agree;
- If the user is authorized, the interface can be called directly;
- If the user has refused authorization, a pop-up window will not appear, but will directly enter the interface fail callback. Please compatible with the scenario where the user refuses to authorize.
emmm... Of course, this effect does not meet our expectations, so we can only change the method. At this time, I thought of using <button open-type="openSetting"/> to create a prompt box on the interaction to guide the user to re-authorize:
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">Save the picture</button>
<!-- A simple version tip -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
<view class="dialog">
This is a prompt to prompt the user to authorize
<view class="dialog-footer">
<button
class="btn"
open-type="openSetting"
bindtap="confirm" >
Authorization
</button>
<button class="btn" bindtap="cancel">Cancel</button>
</view>
</view>
</view>
const app = getApp()
Page({
data: {
url: '/u/23024075?s=460&v=4',
showDialog: false,
},
saveImage() {
('downloadFile', {
url:
})
.then(res => ('saveImageToPhotosAlbum', {
filePath:
}))
.then(res => {
(res);
// ();
({
title: 'Save successfully ~',
icon: 'none',
});
})
.catch(({ errMsg }) => {
(errMsg)
// if (~('cancel')) return;
if (!~('auth')) {
({ title: 'Image saving failed, try again later', icon: 'none' });
} else {
// Call authorization prompt pop-up box ({
showDialog: true
})
};
})
},
// callback to promise
wxToPromise(method, opt) {
return new Promise((resolve, reject) => {
wx[method]({
...opt,
success(res) {
&& ();
resolve(res)
},
fail(err) {
&& ();
reject(err)
}
})
});
},
confirm() {
({
showDialog:false
})
},
cancel() {
({
showDialog: false
})
}
})
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.