免费PHP建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码

标题: 微信小程序的image怎么可以长按保存到手机 [打印本页]
作者: admin    时间: 7 天前
标题: 微信小程序的image怎么可以长按保存到手机
首先，在WXML文件中为Image组件添加bindlongtap属性绑定长按事件，例如：<image src="{{imageUrl}}" bindlongtap="saveImage" />‌




JS：
  1. Page({
  2.   data: {
  3.     imageUrl: '图片路径' // 可以是网络或本地路径
  4.   },
  5.   saveImage: function(e) {
  6.     const url = e.currentTarget.dataset.src || this.data.imageUrl;
  7.     const that = this;
  8.     wx.getSetting({
  9.       success(res) {
  10.         if (!res.authSetting['scope.writePhotosAlbum']) {
  11.           wx.authorize({
  12.             scope: 'scope.writePhotosAlbum',
  13.             success() {
  14.               that.saveImageToAlbum(url);
  15.             },
  16.             fail() {
  17.               wx.showModal({
  18.                 title: '提示',
  19.                 content: '需要开启相册权限才能保存图片',
  20.                 success(res) {
  21.                   if (res.confirm) {
  22.                     wx.openSetting();
  23.                   }
  24.                 }
  25.               });
  26.             }
  27.           });
  28.         } else {
  29.           that.saveImageToAlbum(url);
  30.         }
  31.       }
  32.     });
  33.   },
  34.   saveImageToAlbum: function(url) {
  35.     const that = this;
  36.     wx.getImageInfo({
  37.       src: url,
  38.       success(res) {
  39.         wx.saveImageToPhotosAlbum({
  40.           filePath: res.path,
  41.           success() {
  42.             wx.showToast({ title: '保存成功', icon: 'success' });
  43.           },
  44.           fail() {
  45.             wx.showToast({ title: '保存失败', icon: 'none' });
  46.           }
  47.         });
  48.       },
  49.       fail() {
  50.         wx.showToast({ title: '图片加载失败', icon: 'none' });
  51.       }
  52.     });
  53.   }
  54. });
复制代码






欢迎光临 免费PHP建站系统_社区团购SaaS_商城系统_软件开发_虚拟币交易所系统_矿机系统_微信钻石投票系统_成品源码 (https://ourphp.net/club/) Powered by Discuz! X3.2