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

これで、理論的には画像を保存できます... ユーザーがミニ プログラムで画像を保存する機能を初めて使用するとき、認証ポップアップが表示されます。ユーザーがスライドしてクリックして認証を拒否し、もう一度クリックして画像を保存すると、何も起こらないことがわかります。 。 。

この問題が発生する理由は、この認証ポップアップ ボックスが 1 回しか表示されないためです。そのため、ユーザーが再度認証できるようにする方法を見つける必要があります。この時、wx.authorize.

を使おうと思ったのですが、試してみたところ、wx.authorizeを使うとauthorize:fail authdenyというエラーが報告されることが分かりました。その後、情報を調べた結果、次のことがわかりました。

ユーザーがこの権限を承認または拒否しなかった場合、ポップアップ ウィンドウが表示され、ユーザーに尋ねられ、ユーザーはインターフェイスを呼び出すことしかできません。同意するためにクリックした後、ユーザーが承認した場合は、インターフェイスを直接呼び出すことができます。ユーザーが承認を拒否した場合、ポップアップ ウィンドウは表示されませんが、インターフェイスは失敗します。コールバックは直接入力されます。開発者は、ユーザーが承認を拒否するシナリオに対応することが求められます。

emmm... もちろん、効果は私たちの期待と一致しないので、別の方法で変更するしかありません。この時点で、

を使用して、ユーザーに再認証を促すためのプロンプト ポップアップ ボックスをインタラクション内に作成することを考えました。

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

ついに、これで完成です~

この記事の参考資料: WeChat ミニプログラム開発の基本チュートリアル https://www.html.cn/study/20.html

以上がWeChat アプレットでオンライン写真を保存する方法の紹介 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。