Introduction à la méthode de sauvegarde des images en ligne dans l'applet WeChat (exemple de code)

Le contenu de cet article est une introduction à la méthode de sauvegarde des images réseau dans l'applet WeChat (exemple de code). Il a une certaine valeur de référence. J'espère que cela vous sera utile.

Cette fonction nécessite l'ajout d'un appid pour les tests normaux.

Dans la documentation du mini programme, nous avons appris que wx.saveImageToPhotosAlbum est utilisé pour enregistrer des images dans l'album.

Mais si vous regardez de plus près, vous constaterez que le paramètre filePath de cette interface n'accepte que les chemins de fichiers temporaires ou les chemins de fichiers permanents, et ne prend pas en charge les chemins d'images réseau, ce qui signifie que nous ne pouvons pas appeler cette interface directement. .

Vous devez donc d'abord télécharger le fichier localement, en utilisant wx.downloadFile.

Mais il convient de noter que le mini programme ne peut communiquer qu'avec le nom de domaine spécifié, c'est-à-dire qu'avant de télécharger l'image, nous devons accéder aux paramètres de développement de la plateforme publique WeChat pour définir le nom de domaine. nom de domaine légitime de uploadFile.

L'exemple de code est le suivant :

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

Ensuite, théoriquement, vous pouvez enregistrer l'image... La première fois que l'utilisateur utilise la fonction d'enregistrement d'images dans notre mini programme , une fenêtre contextuelle apparaîtra. Une boîte contextuelle d'autorisation Si l'utilisateur glisse et clique pour refuser l'autorisation, puis clique à nouveau pour enregistrer l'image, il constatera que rien ne se passe. . .

La raison pour laquelle cela se produit est que cette boîte de dialogue d'autorisation n'apparaîtra qu'une seule fois, nous devons donc trouver un moyen de permettre à l'utilisateur de réautoriser à nouveau. À ce moment-là, j'ai pensé à utiliser wx.authorize .

Mais après des tests, j'ai découvert qu'après avoir utilisé wx.authorize, l'erreur « authorize:fail auth deny » serait signalée. Puis après avoir consulté les informations, nous avons appris :

Si l'utilisateur n'a pas accepté ou rejeté cette autorisation, une fenêtre pop-up apparaîtra pour demander à l'utilisateur, et l'utilisateur ne pourra qu'appeler l'interface après avoir cliqué pour accepter ;

Si l'utilisateur l'a autorisé, vous pouvez appeler directement l'interface

Si l'utilisateur a refusé l'autorisation, la fenêtre pop-up n'apparaîtra pas, mais l'interface ; le rappel en cas d'échec sera saisi directement. Il est demandé aux développeurs d'être compatibles avec les scénarios dans lesquels les utilisateurs refusent l'autorisation.

emmm... Bien entendu, l'effet n'est pas conforme à nos attentes, nous ne pouvons donc que le modifier d'une autre manière. À ce moment-là, j'ai pensé à utiliser <button open-type="openSetting"/> pour créer une boîte de dialogue d'invite dans l'interaction pour guider l'utilisateur dans la réautorisation :

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

Enfin, c'est fait~

Référence pour cet article : Tutoriel de base sur le développement de mini-programmes WeChat https://www.html.cn/study/20.html

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!