Lors du développement à l'aide d'uniapp, vous devez télécharger et télécharger des photos. Les méthodes d'écriture sont différentes dans l'applet H5 et WeChat.
En environnement H5
Le téléchargement dans le navigateur est un téléchargement simulé par lien hypertexte. Il n’est pas nécessaire d’obtenir d’autorisations, c’est relativement simple.
// #ifdef H5
this.isLoading = true;
let oA = document.createElement("a");
// 设置下载的文件名，不设置就是默认的
oA.download = '';
// 图片下载链接
oA.href = imgUrl;
document.body.appendChild(oA);
oA.click();
oA.remove(); // 下载之后把创建的元素删除
this.isLoading = false;
// #endif
Applet WeChat
Pour télécharger le mini-programme, vous devez d'abord obtenir l'autorisation de l'album photo.
downloadPic() {
// #ifdef MP-WEIXIN
this.checkAppRight();
// #endif
// #ifdef H5
...
// #endif
},
// 先校验权限
checkAppRight() {
// 检查是否之前就调用过uni.authorize
if (!this.isAuthorize) {
uni.authorize({
// 请求相册写入权限
scope: 'scope.writePhotosAlbum',
success: () => {
this.downloadImgOnPhone();
}
});
return;
}
// 检查当前小程序的设置信息，这个设置可以看下面的图片说明是什么设置
uni.getSetting({
// 这里可能会触发报错：this 为 undefined，建议使用箭头函数，不要使用普通函数，否则在小程序中调用this会报错。
success: (res) => {
// 如果没有相册写入权限，需要先引导用户打开设置权限
if (!res.authSetting['scope.writePhotosAlbum']) {
/* 打开设置的方法 */
uni.showModal({
title: '提示',
content: '请先在设置页面打开“保存相册”使用权限',
confirmText: '去设置',
cancelText: '取消',
success: data => {
if (data.confirm) {
uni.openSetting()
}
}
});
} else {
this.downloadImgOnPhone();
}
}
});
},
// 开始下载图片
downloadImgOnPhone() {
this.isLoading = true;
// 下载文件，必须先调用downloadFile，不然会报错。
uni.downloadFile({
url: imgUrl, // 图片链接
success: (res) => {
if (res.statusCode === 200) {
// 保存下载的文件到相册
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
this.isLoading = false;
uni.showToast({
title: '下载成功',
icon: "none",
duration: 5000
})
},
fail: (err) => {
this.isLoading = false;
uni.showToast({
title: '下载失败',
icon: "none",
duration: 5000
})
},
})
}
},
fail: (err) => {
this.isLoading = false;
uni.showToast({
title: JSON.stringify(err),
icon: "none",
duration: 5000
})
}
});
}
Pour afficher les informations de configuration du mini programme WeChat, cliquez sur Paramètres pour les afficher. L'interface uni.openSetting ouvrira cette page de paramètres :
uni.authorize demande une autorisation, ce qui déclenchera une fenêtre contextuelle en bas :
Si le mini Le programme est autorisé avec succès par l'utilisateur, la page openSetting "Ajouter à l'album" s'affiche. Si l'utilisateur désactive manuellement cette option, alors uni.authorize ne doit pas être appelé la prochaine fois, mais uni.openSettin doit être appelé pour guider le l'utilisateur d'allumer l'interrupteur.
Pour plus d'articles sur le développement d'Uniapp, vous pouvez suivre le blogueur, et ils seront mis à jour à l'avenir.
Si vous êtes intéressé par les effets de développement des composants uview, vous pouvez visiter le lien pour voir : https://ext.dcloud.net.cn/plugin?id=12603