解决真机wxfile与开发工具http://tmp/获取路径不同的问题

微信开发工具。实现二维码图片自定义名称保存到手机相册。在开发工具上已经实现但是由于真机上获取到的图片路径是wxfile://.但是开发者工具上是获取的http://tem。在wx.arrayBufferToBase64停用的现在,想知道什么办法可以实现这个操作。

img

img

可以借鉴下

<view class="data_list">
          <view class="data_list_left">
            头像
          </view>
          <view class="data_list_right">
            <button
              class="avatar-wrapper"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <image
                class="avatar"
                mode="aspectFill"
                :src="userInfo.avatarUrl"
              />
            </button>
          </view>
        </view>
        <view class="data_list">
          <view class="data_list_left">
            昵称
          </view>
          <view class="data_list_right">
            <input
              type="nickname"
              class="weui-input"
              placeholder="请输入昵称"
              :value="userInfo.name"
              @change="changeName"
              @input="inputName"
            >
          </view>
        </view>

可以借鉴下

<view class="data_list">
          <view class="data_list_left">
            头像
          </view>
          <view class="data_list_right">
            <button
              class="avatar-wrapper"
              open-type="chooseAvatar"
              @chooseavatar="onChooseAvatar"
            >
              <image
                class="avatar"
                mode="aspectFill"
                :src="userInfo.avatarUrl"
              />
            </button>
          </view>
        </view>
        <view class="data_list">
          <view class="data_list_left">
            昵称
          </view>
          <view class="data_list_right">
            <input
              type="nickname"
              class="weui-input"
              placeholder="请输入昵称"
              :value="userInfo.name"
              @change="changeName"
              @input="inputName"
            >
          </view>
        </view>

在微信小程序中,使用wxfile和开发工具中的http://tmp/获取的文件路径可能会不同,这是因为wxfile获取到的是本地的存储路径,而开发工具中的http://tmp/获取的是开发工具的暂存路径。

为了解决这个问题,您可以判断当前是否在开发工具中运行,如果是,则使用http://tmp/路径,否则则使用wxfile获取本地存储路径。代码示例如下:

// 判断当前是否是开发工具环境
const isDevTool = wx.getSystemInfoSync().platform === 'devtools';

let filePath;
if (isDevTool) {
  // 使用开发工具中的路径
  filePath = 'http://tmp/example.txt';
} else {
  // 使用本地存储路径
  filePath = wx.env.USER_DATA_PATH + '/example.txt';
}

// 执行读取文件操作
wx.readFile({
  filePath: filePath,
  success: function(res) {
    console.log(res.data);
  }
});

注意,在使用http://tmp/路径时,您需要确保文件已经被下载并保存到了开发工具的暂存路径中。如果您使用的是网络请求获取文件,可以使用wx.downloadFile下载并保存文件之后再使用http://tmp/路径进行访问。

针对你的问题,可以使用wx.getFileSystemManager进行文件操作,实现二维码图片的保存和加载。

具体步骤如下:

1.调用wx.downloadFile()方法下载图片,并在回调函数中获取到下载后的临时文件路径tempFilePath。

wx.downloadFile({
  url: 'http://www.example.com/qrcode.png',
  success: function(res) {
    var tempFilePath = res.tempFilePath; // 获取下载后的临时文件路径
    // 将临时文件路径保存或使用其它方法进行处理
  }
});

2.使用wx.getFileSystemManager方法实现将图片保存到手机相册,并自定义名称。

wx.getFileSystemManager().copyFile({
  srcPath: tempFilePath, // 临时文件路径
  destPath: wx.env.USER_DATA_PATH + '/customName.png', // 自定义名称,例如 'customName.png'
  success: function(res) {
    wx.showToast({
      title: '保存成功',
      icon: 'success'
    });
  },
  fail: function(err) {
    wx.showToast({
      title: '保存失败',
      icon: 'none'
    });
  }
});

3.使用wx.previewImage()方法可以预览手机相册中的图片。

wx.previewImage({
  urls: [wx.env.USER_DATA_PATH + '/customName.png'], // 手机相册中的图片路径
});

需要注意的是,使用wx.getFileSystemManager()方法操作的文件路径不能直接使用'wxfile://'进行访问,需要通过wx.env.USER_DATA_PATH获取文件路径。同时,需要在小程序的开发者工具中勾选“开发环境不校验请求域名、TLS版本及HTTPS证书”。

微信开发中,使用真机测试图片路径是以wxfile开头的,而开发工具的图片是以http开头的,如果你需要在真机中保存图片到手机相册的话,用wx.saveImageToPhotosAlbum( )可以将wxfile路径的图片存到相册,不过要先获取一下用户对保存到相册的权限

在代码中做平台判断和不同逻辑的执行。在开发者工具上执行http URL逻辑,在真机上执行wxfile://本地路径逻辑

引用chatgpt部分指引作答:
在真机上和在微信开发工具中获取到的图片路径不同是一个常见的问题。这是由于真机环境和开发工具环境之间的差异导致的。幸运的是,你可以通过以下几种方法来解决这个问题:

1 使用wx.env.USER_DATA_PATH:
在真机上,你可以使用wx.env.USER_DATA_PATH来获取一个临时文件夹路径,然后将图片保存在该路径下。这个路径在真机和开发工具中是一致的。例如:

const savePath = `${wx.env.USER_DATA_PATH}/custom_name.jpg`;
wx.saveImageToPhotosAlbum({
  filePath: savePath,
  success: function(res) {
    console.log('保存成功');
  },
  fail: function(err) {
    console.log('保存失败', err);
  }
});

2 使用云存储:
另一个解决方案是将图片上传到云存储,然后返回一个网络路径给用户保存。你可以使用微信小程序提供的云开发功能,将图片上传到云存储,并获取到图片在云存储中的网络路径,然后将该路径返回给用户。用户可以通过网络路径访问图片并保存到手机相册。

3 使用第三方服务:
如果你不想使用云存储,还可以考虑使用第三方图片存储服务,比如将图片上传到服务器,并返回一个可访问的网络路径给用户保存。

这些方法可以帮助你在真机和开发工具中都能够成功保存图片到手机相册。选择其中一种方法根据你的需求和项目情况进行实现。