微信小程序：2.自定义组件Component---加一点点强的版本

在上一篇的基础上，我们这儿再加上一些东西。

上回忘记提到了‘监听’，好吧，就是观察者模式，不多说废话，直接上代码。这个是自己封的下载的组件，里面注释个人觉得够多了

/**
 * 下载的组件
 * params：{
 * initshow：是否展示组件
 * initshowprogress：是否展示进度条
 * initpath:下载路径，
 * }
 * 
 */
let downloadTask = null;
Component({
  /**
   * 组件的属性列表
   */
  properties: {

    // 是否显示下载的弹窗
    initshow: {
      type: Boolean,
      value: false,
      observer: function(newvalue, oldvalue) {
        if (newvalue && this.data.initpath) {
          wx.hideLoading();
          console.log("hello,world");
          this.getsetiingconfig();
          // this.save();
        } else {
          wx.showLoading({
            title: '正在准备下载',
          })
        }
      }
    },
    // 是否展示下载的进度条
    initshowprogress: {
      type: Boolean,
      value: true,
    },
    // 下载的路径
    initpath: {
      type: String,
      value: '',
      observer: function(newvalue, oldvalue) {
        // 如果没有下载的路径，并且当前已经打开弹窗了暂时显示转圈圈/
        if (newvalue != oldvalue && newvalue != '' && this.data.initshow) {
          this.save();
          wx.hideLoading();
        }
      }
    }
  },
  data: {
    progress: 0, //下载的进度
  },
  methods: {
    // 获取用户有没有打开下载权限
    getsetiingconfig() {
      let that = this;
      wx.getSetting({
        success(res) {
          if (res.authSetting["scope.writePhotosAlbum"] === false) {
            that.setData({
              initshow: false,
            });
            getApp().globalData.powerfail({
              content: '保存视频失败,请检查是否在设置中允许使用相册功能',
              showCancel: true,
              confirmText: '前往设置',
              successcall: function() {
                wx.openSetting({})
              },
            })
          } else {
            that.save();
          }
        }
      })
    },
    // 下载并且保存至本地
    save() {
      let that = this;
      downloadTask = wx.downloadFile({
        url: this.data.initpath,
        success: function(data) {
          wx.saveVideoToPhotosAlbum({
            filePath: data.tempFilePath,
            success(res) {
              wx.showToast({
                title: '保存成功!',
                icon: "none"
              })
            },
            fail: function() {
              getApp().globalData.powerfail({
                content: '保存失败',
              })
            },
            complete: function() {
              that.setData({
                initshow: false,
                progress: 0,
              });
              wx.hideLoading();

            }
          })
        },
        fail: () => {
          getApp().globalData.powerfail({
            content: '下载失败,请检查网络',
          })
        }
      })
      // 监听下载的进度
      downloadTask.onProgressUpdate((res) => {
        this.setData({
          progress: res.progress
        });
      })

    },
    // 取消下载
    cancelevent() {
      downloadTask.abort();
      this.setData({
        initshow: false,
        progress: 0, //进度条归0
      })
      wx.showToast({
        title: '已取消下载!',
        icon: "none",
        duration: 2000,
      });
    }
  }
})

功能

用来根据url来保存图片/视频等到本地的，流程无非就是

1.先验证用户有没有开权限给我们保存（不然下载浪费用户流量）

2.下载图片（以视频为例子）

3.保存图片

4.保存成功/失败的处理，下载取消的处理等

上面的代码写的比较简单，毕竟微信已经封装好的差不多了，而且是给人看的。备注也是不可少

其他

接下来是牵扯到的相关文件

其中的getapp().globalData.xxx大概是这样的

// import regeneratorRuntime from '/utils/runtime.js';
import ghhttp from '/utils/http.js';
import {
  powerfail,
  qcgetUserInfo
} from '/utils/functionPower.js';
//app.js
App({
  onLaunch: function() {},
  globalData: {
    ghhttp,
    qcgetUserInfo,
    powerfail,
    userInfo: null

  }
})

比较简单，有问题的，不懂的在留言吧

对了，还有一个文件

// 授权失败之后的弹窗！
const powerfail = (obj = {}) => {
  console.log(obj.successcall);
  wx.showModal({
    title: obj.title || '提示',
    content: obj.content || '',
    showCancel: obj.showCancel || false,
    cancelText: obj.cancelText || '取消',
    confirmText: obj.confirmText || '知道了',
    success(res) {
      if (res.confirm) {
        obj.successcall() || console.log("保存失败，原因暂不明确");
      } else if (res.cancel) {}
    }


  })
}
// 获取用户的个人信息,不需要开启设置
const qcgetUserInfo = data => {
  if (data.detail.userInfo) {
    getApp().globalData.userInfo = data.detail.userInfo;
    // 把个人的信息用string的形式持久化
    wx.setStorageSync(`userInfo`, JSON.stringify(data.detail.userInfo));
  } else {
    powerfail({
      content: '请在设置中打开用户信息选项',
      successcall: function() {
        wx.openSetting();
      }
    })
  }
}
export {
  powerfail,
  qcgetUserInfo
}

其他报错的，就删除了吧，或则留言，我也懒得码字，大家明白我心意就好了

然后不太明白的留言，心情好的访问下我的github给个星星

案例：github上的一个需要小星星的地址

上一篇：微信小程序：1.自定义组件Component