微信小程序开发：一个完成下载远程图片并保存的示例

需求如下：

代码

<template>
  <div class="poster-box">
    
    <!-- 海报图片 -->
    <div v-if="active == 0" class="poster">
      <img :src="poster" class="content" mode="aspectFit">
   
    </div>
    <!-- 二维码图片 -->
    <div v-else class="qrcode">
      <img :src="code" class="code" mode="aspectFit">
    </div>
    <div class="btn-box">
      <button open-type="share">转发</button>
      <button class="primary" @click="saveImage">保存到手机</button>
    </div>
  </div>
</template>
<script>
import request from '@/utils/request'

export default {
  data () {
    return {
      active: 0,
      poster: '',// http://a.com/b.png
      code: '' // http://a.com/c.png
    }
  },
  methods: {
    // 保存图片前的授权
    saveImage () {
      var that = this

      wx.getSetting({
        success (res) {
          if (res.authSetting['scope.writePhotosAlbum'] === undefined) {
            // 首次授权
            wx.authorize({
              scope: 'scope.writePhotosAlbum',
              success () {
                that.doSaveImage()
              },
              fail () {
                // 用户拒绝了授权
              }
            })
          } else if (!res.authSetting['scope.writePhotosAlbum']) {
            // 曾经授权，但拒绝了；处理办法：提示去『设置』页面授权
            wx.showModal({
              title: '',
              content: '您曾拒绝授权当前小程序保存图片到您的手机，请按确定前往授权',
              success (res) {
                if (res.confirm) {
                  wx.openSetting({
                    success (r) {
                      if (r.authSetting['scope.writePhotosAlbum']) {
                        that.doSaveImage()
                      }
                    }
                  })
                }
              }
            })
          } else {
            // 已授权
            that.doSaveImage()
          }
        }
      })
    },
    //下载图片并保存
    doSaveImage () {
      const path = this.active === 0 ? this.poster : this.code
      wx.showLoading({
        title: '下载图片中'
      })
      wx.downloadFile({
        url: path,
        success: function (res) {
          wx.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success () {
              wx.hideLoading()
              mpvue.showToast({
                title: '保存成功'
              })
            },
            fail () {
              wx.hideLoading()
              mpvue.showToast({
                icon: 'none',
                title: '保存失败,请重试'
              })
            }
          })
        }
      })
    },

  },

  mounted () {
    // 获取图片....
  }
}
</script>
<style lang="scss" scoped>
 //...
</style>