小程序实现保存图片到手机

小程序实现保存图片到手机上

废话不多说直接上代码

.wxml

<image class="img" src="{{photoUrl}}" bindtap='onPreviewImage'></image><button wx:if="{{!isAuthSavePhoto}}" bindtap="onSaveToPhone"  class="btn button-hover" >保存图片到手机</button><button wx:else bindtap="showModal"  class="btn button-hover" >            保存图片到手机</button>

.js

Page({data: {photoUrl: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1003256280,1176261798&fm=26&gp=0.jpg",isAuthSavePhoto: false,},// 保存图片到手机onSaveToPhone() {this.getSetting().then((res) => {// 判断用户是否授权了保存到本地的权限if (!res.authSetting['scope.writePhotosAlbum']) {this.authorize().then(() => {this.savedownloadFile(this.data.photoUrl)this.setData({isAuthSavePhoto: false})}).catch(() => {wx.showToast({title: '您拒绝了授权',icon: 'none',duration: 1500})this.setData({isAuthSavePhoto: true})})} else {this.savedownloadFile(this.data.photoUrl)}})},//打开设置，引导用户授权onOpenSetting() {wx.openSetting({success: (res) => {console.log(res.authSetting)if (!res.authSetting['scope.writePhotosAlbum']) {wx.showToast({title: '您未授权',icon: 'none',duration: 1500})this.setData({// 拒绝授权isAuthSavePhoto: true})} else {// 接受授权this.setData({isAuthSavePhoto: false})this.onSaveToPhone() // 接受授权后保存图片}}})},// 获取用户已经授予了哪些权限getSetting() {return new Promise((resolve, reject) => {wx.getSetting({success: res => {resolve(res)}})})},// 发起首次授权请求authorize() {return new Promise((resolve, reject) => {wx.authorize({scope: 'scope.writePhotosAlbum',success: () => {resolve()},fail: res => { //这里是用户拒绝授权后的回调console.log('拒绝授权')reject()}})})},savedownloadFile(img) {this.downLoadFile(img).then((res) => {return this.saveImageToPhotosAlbum(res.tempFilePath)}).then(() => {})},//单文件下载(下载文件资源到本地)，客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径。downLoadFile(img) {return new Promise((resolve, reject) => {wx.downloadFile({url: img,success: (res) => {console.log('downloadfile', res)resolve(res)}})})},// 保存图片到系统相册saveImageToPhotosAlbum(saveUrl) {return new Promise((resolve, reject) => {wx.saveImageToPhotosAlbum({filePath: saveUrl,success: (res) => {wx.showToast({title: '保存成功',duration: 1000,})resolve()}})})},// 弹出模态框提示用户是否要去设置页授权showModal() {wx.showModal({title: '检测到您没有打开保存到相册的权限，是否前往设置打开？',success: (res) => {if (res.confirm) {console.log('用户点击确定')this.onOpenSetting() // 打开设置页面          } else if (res.cancel) {console.log('用户点击取消')}}})}
})

有什么问题欢迎评论留言，我会及时回复你的

小程序实现保存图片到手机相关推荐

微信小程序之保存图片到手机相册设置白名单
又到周五了,好开心,又能休息了!遇到的工作问题也应该清仓了. 微信小程序开发的时候,微信小程序不能分享朋友圈怎么办?这难不倒我们开发人员,可以生成小程序二维码分享到朋友圈! 上一次主要给大家讲解了怎么 ...
微信小程序例子-保存图片到手机相册
1.效果展示 2.关键代码 1)WXML文件保存图片到手机相册 2)JS文件 var IMG_URL =''//图片链接 https开头 Page({ data:{ img_url:IMG_URL ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序---授权保存图片或视频，拒绝后不在出现弹窗---自定义组件弹窗
微信小程序授权保存图片后拒绝授权,(当拒绝授权后,微信再次调用保存不在出现授权弹窗): 这么一来,微信提供给开发者的解决方法就是跳入设置页面里面让用户自己打开权限. 那么今天自己自定义了一个组件. 根 ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序客服系统手机版五大功能介绍
很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时 ...
微信小程序：添加到手机通讯录
微信小程序:添加到手机通讯录 wxml: <button class="spbg" bindtap="addPhone">存入手机通讯录</b ...
小程序HCE能力开放,手机秒变公交卡
小程序HCE能力开放,手机秒变公交卡没带零钱,忘带交通卡,赶时间上班,肿么破? 近期,微信开放HCE能力,并发布小程序HCE+二维码智慧乘车方案,只需几步,手机秒变公交卡,公共交通出行不再是难题. ...
vue开发微信小程序用户授权和手机授权（UNI开发）
vue开小程序用户授权,手机授权 **1.vue页面的两个点击事件 ** <view class="text-area"><button open-type=& ...
微信小程序通过保存图片分享到朋友圈
说明首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面 ...

小程序实现保存图片到手机

小程序实现保存图片到手机上

小程序实现保存图片到手机相关推荐

最新文章

热门文章