Einführung in die Methode zum Speichern von Online-Bildern im WeChat-Applet (Codebeispiel)

Der Inhalt dieses Artikels ist eine Einführung in die Methode zum Speichern von Netzwerkbildern im WeChat-Applet. Ich hoffe, dass er für Sie hilfreich ist.

Diese Funktion erfordert das Hinzufügen einer App-ID für normale Tests.

In der Dokumentation des Miniprogramms haben wir erfahren, dass wx.saveImageToPhotosAlbum zum Speichern von Bildern im Album verwendet wird.

Aber wenn Sie genauer hinschauen, werden Sie feststellen, dass der FilePath-Parameter dieser Schnittstelle nur temporäre Dateipfade oder permanente Dateipfade akzeptiert und keine Netzwerkbildpfade unterstützt, was bedeutet, dass wir diese Schnittstelle nicht aufrufen können direkt. .

Sie müssen die Datei also zuerst lokal herunterladen, indem Sie wx.downloadFile verwenden.

Aber es ist erwähnenswert, dass das Miniprogramm nur mit dem angegebenen Domainnamen kommunizieren kann. Das heißt, bevor wir das Bild herunterladen, müssen wir die Entwicklungseinstellungen der öffentlichen WeChat-Plattform aufrufen legitimer Domänenname von uploadFile.

Der Beispielcode lautet wie folgt:

<!-- 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)
        }
      })
    });
  },
})

Dann können Sie das Bild theoretisch speichern... Wenn ein Benutzer zum ersten Mal die Funktion zum Speichern von Bildern in unserem Miniprogramm nutzt, erscheint ein Autorisierungs-Pop- Wenn der Benutzer wischt und klickt, um die Autorisierung zu verweigern, und dann erneut klickt, um das Bild zu speichern, wird er feststellen, dass nichts passiert. . .

Der Grund dafür ist, dass dieses Autorisierungs-Popup-Fenster nur einmal angezeigt wird. Wir müssen also eine Möglichkeit finden, dem Benutzer eine erneute Autorisierung zu ermöglichen. Zu diesem Zeitpunkt dachte ich darüber nach, wx.authorize zu verwenden.

Aber nach dem Testen stellte ich fest, dass nach der Verwendung von wx.authorize der Fehler „authorize:fail auth deny“ gemeldet wird. Nachdem wir die Informationen konsultiert hatten, erfuhren wir:

Wenn der Benutzer diese Berechtigung nicht akzeptiert oder abgelehnt hat, wird ein Popup-Fenster angezeigt, in dem der Benutzer gefragt wird, und der Benutzer kann nur die Schnittstelle aufrufen Nachdem Sie auf „Zustimmen“ geklickt haben, können Sie die Schnittstelle direkt aufrufen Der Fail-Callback wird direkt eingegeben. Entwickler werden gebeten, mit Szenarien kompatibel zu sein, in denen Benutzer die Autorisierung verweigern.

emmm... Natürlich entspricht die Wirkung nicht unseren Erwartungen, sodass wir sie nur auf andere Weise ändern können. Zu diesem Zeitpunkt dachte ich darüber nach,

zu verwenden, um in der Interaktion ein Eingabeaufforderungs-Popup-Fenster zu erstellen, das den Benutzer zur erneuten Autorisierung anleitet:

<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>

rrree

Endlich ist es geschafft~

<button open-type="openSetting"/> Referenz für diesen Artikel: WeChat Mini Program Development Grundlegendes Tutorial https://www.html.cn/study/20.html

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zum Speichern von Online-Bildern im WeChat-Applet (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!