WeChat 애플릿에 온라인 사진을 저장하는 방법 소개(코드 예)

이 글은 WeChat 애플릿(코드 예시)에서 네트워크 이미지를 저장하는 방법을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

이 기능을 사용하려면 일반적인 테스트를 위해 appid를 추가해야 합니다.

미니 프로그램 문서에서 wx.saveImageToPhotosAlbum이 앨범에 이미지를 저장하는 데 사용된다는 것을 배웠습니다.

하지만 자세히 살펴보면 이 인터페이스의 filePath 매개 변수는 임시 파일 경로나 영구 파일 경로만 허용하고 네트워크 이미지 경로는 지원하지 않으므로 이 인터페이스를 직접 호출할 수 없다는 것을 알 수 있습니다. .

그러므로 먼저 wx.downloadFile을 사용하여 로컬로 파일을 다운로드해야 합니다.

하지만 미니 프로그램은 지정된 도메인 이름으로만 통신할 수 있다는 점에 주목할 가치가 있습니다. 즉, 사진을 다운로드하기 전에 WeChat 공개 플랫폼의 개발 설정에서 uploadFile 법적 도메인 이름을 설정해야 합니다.

샘플 코드는 다음과 같습니다:

<!-- index.wxml -->
<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

// index.js
const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4'
  },

  // 保存图片
  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        // do something
        wx.showToast({ title: '保存成功~',icon: 'none' });
      })
      .catch(err) => {
        console.log(err);

        // 如果是用户自己取消的话保存图片的话
        // if (~err.errMsg.indexOf('cancel')) return;
      })
  },

  /**
   * 将 callback 转为易读的 promise
   * @returns [promise]
   */
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },
})

그러면 이론적으로 사진을 저장할 수 있습니다... 사용자가 미니 프로그램에서 사진 저장 기능을 처음 사용하면 인증 팝업 상자가 나타납니다. 사용자가 미끄러지거나 클릭하면 인증이 거부됩니다. 그런 다음 다시 클릭하여 사진을 저장하면 아무 일도 일어나지 않습니다. . .

이런 현상이 발생하는 이유는 인증 팝업창이 한 번만 나타나기 때문에 사용자가 다시 인증할 수 있도록 하는 방법을 찾아야 합니다. 이때 wx.authorize를 써볼까 생각도 했습니다.

그런데 테스트해본 결과 wx.authorize를 사용한 후에는 "authorize:fail auth Deny"라는 오류가 보고되는 것을 발견했습니다. 그런 다음 정보를 참조한 후 다음과 같은 사실을 알게 되었습니다.

사용자가 이 권한을 수락하지 않거나 거부한 경우 팝업 창이 사용자에게 표시되며 사용자는 동의를 클릭한 후에만 인터페이스를 호출할 수 있습니다. 사용자가 승인한 경우 인터페이스를 직접 호출할 수 있습니다.

사용자가 승인을 거부하면 팝업 창이 나타나지 않지만 인터페이스 실패 콜백이 직접 입력됩니다. 개발자는 사용자가 승인을 거부하는 시나리오와 호환되도록 요청받습니다.

음... 물론 효과가 기대에 미치지 못해서 다른 방법으로 변경할 수밖에 없습니다. 이때

를 사용하여 사용자에게 재인증을 안내하는 프롬프트 팝업 상자를 만드는 것을 생각했습니다.

<image class="qr-code" src="{{url}}" mode="aspectFill" />
<button class="text" bindtap="saveImage">保存图片</button>

<!-- 简陋版提示 -->
<view wx:if="{{showDialog}}" class="dialog-wrap">
  <view class="dialog">
    这是一段提示用户授权的提示语
    <view class="dialog-footer">
      <button
        class="btn"
        open-type="openSetting"
        bindtap="confirm" >
         授权
      </button>
      <button class="btn" bindtap="cancel">取消</button>
    </view>
  </view>
</view>

const app = getApp()

Page({
  data: {
    url: 'https://avatars3.githubusercontent.com/u/23024075?s=460&v=4',
    showDialog: false,
  },

  saveImage() {
    this.wxToPromise('downloadFile', {
        url: this.data.url
      })
      .then(res => this.wxToPromise('saveImageToPhotosAlbum', {
        filePath: res.tempFilePath
      }))
      .then(res => {
        console.log(res);
        // this.hide();
        wx.showToast({
          title: '保存成功~',
          icon: 'none',
        });
      })
      .catch(({ errMsg }) => {
        console.log(errMsg)
        // if (~errMsg.indexOf('cancel')) return;
        if (!~errMsg.indexOf('auth')) {
          wx.showToast({ title: '图片保存失败，稍后再试', icon: 'none' });
        } else {
          // 调用授权提示弹框
          this.setData({
            showDialog: true
          })
        };
      })
  },

  // callback to promise
  wxToPromise(method, opt) {
    return new Promise((resolve, reject) => {
      wx[method]({
        ...opt,
        success(res) {
          opt.success && opt.success();
          resolve(res)
        },
        fail(err) {
          opt.fail && opt.fail();
          reject(err)
        }
      })
    });
  },

  confirm() {
    this.setData({
      showDialog:false
    })
  },

  cancel() {
    this.setData({
      showDialog: false
    })
  }
})

<button open-type="openSetting"/>드디어 완료되었습니다~

이 기사 참조: WeChat Mini 프로그램 기본 튜토리얼 개발 https://www.html.cn/study/20.html

위 내용은 WeChat 애플릿에 온라인 사진을 저장하는 방법 소개(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!