超能刚哥

两个微信SDK相关的脚本

发表于2016-10-19
两个微信SDK相关的脚本

都没啥技术含量,一个是对微信SDK的几个API的简单封装,包括chooseImage,previewImage,uploadImage以及scanQRCode,其中对chooseImage,uploadImage和scanQRCode进行了基于Promise的封装,代码如下:

// 初始化微信SDK
export const initializeWeixin = () => {

  if (wx && wx.ready) {

    wx.ready(() => {

      // 微信SDK状态
      window.__WEIXIN_READY__ = true

      // 获取网络状态
      wx.getNetworkType({
        success: (res) => {
          window.__NETWORK_TYPE__ = res.networkType
        },
        fail: () => {
          window.__NETWORK_TYPE__ = 'unknow'
        }
      })

    })

  }

}

// 调用微信选择图片功能
export const chooseImage = (count = 1) => {

  return new Promise((resolve, reject) => {

    if (window.__WEIXIN_READY__) {

      wx.chooseImage({
        count: count, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function (res) {
          resolve(res.localIds)
        },
        fail: function() {
          reject({
            status: -2,
            msg: '选择图片失败'
          })
        }
      })

    } else {
      reject({
        status: -1,
        msg: '微信SDK还未初始化'
      })
    }

  })

}

// 调用微信预览图片功能
export const previewImage = (current, urls) => {

  if (window.__WEIXIN_READY__) {

    wx.previewImage({ current, urls })

  } else {
    reject({
      status: -1,
      msg: '微信SDK还未初始化'
    })
  }

}

// 上传图片到微信服务器
export const uploadImage = (localId, showProgressTip = true) => {

  return new Promise((resolve, reject) => {

    if (window.__WEIXIN_READY__) {

      wx.uploadImage({
        localId: localId, // 默认9
        isShowProgressTips: showProgressTip ? 1 : 0, // 默认为1,显示进度提示
        success: function (res) {
          resolve(res.serverId)
        },
        fail: function() {
          reject({
            status: -2,
            msg: '图片上传失败'
          })
        }
      })

    } else {
      reject({
        status: -1,
        msg: '微信SDK还未初始化'
      })
    }

  })

}

// 调用微信扫码功能
export const scanQRCode = () => {

  return new Promise((resolve, reject) => {

    if (window.__WEIXIN_READY__) {

      wx.scanQRCode({
        needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
        scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
        success: function (res) {
          resolve(res.resultStr)
        },
        fail: function() {
          reject({
            status: -2,
            msg: '扫码失败'
          })
        }
      })

    } else {
      reject({
        status: -1,
        msg: '微信SDK还未初始化'
      })
    }

  })

}

另外又集成上面的chooseImage,previewImage和uploadImage实现了一个微信图片上传辅助类,目前已经用在了实际项目中,代码如下:

/**
 * 微信图片选择和上传辅助类
 */

// 引入上面封装好的三个方法
import { chooseImage, previewImage, uploadImage } from './utils/weixin'

export default class ImageUploadHelper{

  constructor(options = {}) {

    this.__options = {...{
      max: 9
    }, ...options}
    this.__images = []

  }

  // 选择图片方法
  chooseImage(upload = false) {

    // 达到最大限制后不允许再选择
    if (this.__images.length >= this.__options.max ) {
      return false
    }

    let __choosedImages = []

    // 每次可选择数量自动调整
    chooseImage(this.__options.max - this.__images.length).then((res) => {

      // 只选择单张图片返回的不是数组,需要进行适配
      if (typeof res === 'string' ) {

        __choosedImages = [{
          localId: res,
          locked: false,
          serverId: null 
        }]

      } else {

        __choosedImages = res.map((item) => {
          return {
            localId: item,
            locked: false,
            serverId: null 
          }
        })

      }

      this.__images = [ ...this.__images, ...__choosedImages ]

      // 如果指定选择完后立即上传
      if (upload) {
        this.uploadImage(__choosedImages)
      }

      this.onChoose(this.__images, __choosedImages)
      this.onChange(this.__images)

    })

  }

  // 主动获取图片列表方法
  getImages() {

    return this.__images

  }

  previewImage(image) {

    previewImage(image.localId || image, this.__images.map((image) => {
      return image.localId
    }))

  }

  // 根据图片的localId或者serverId来删除图片
  removeImage(image) {

    let index = this.__images.findIndex((item) => {
      return item.localId === image || item.serverId === image
    })

    this.__images.splice(index, 1)
    this.onChange(this.__images)
    this.onDelete(this.__images, image, index)

  }

  // 批量递归上传图片到微信服务器
  uploadImage(images, index = 0) {

    images = images || this.__images

    if (index >= images.length) {
      return false
    }

    if (images[index] && images[index].localId && images[index].locked === false && images[index].serverId === null) {

      images[index].locked = true

      uploadImage(images[index].localId).then((res) => {

        images[index].serverId = res
        images[index].locked = false
        this.uploadImage(images, index + 1)
        this.onChange(this.__images)
        this.onUpload(this.__images, images[index])

      }).catch(() => {

        // 上传错误时解锁此图片并上传下一张
        images[index].locked = false
        this.uploadImage(images, index + 1)

      })

    } else {

      //当前图片无法被上传时跳过并上传下一张
      this.uploadImage(images, index + 1)

    }

  }

  onChange(images) {}
  onDelete(images, deletedImage, deletedIndex) {}
  onChoose(images, choosedImages) {}
  onUpload(images, uploadedImage) {}

}
该文章暂无评论,赶快抢占沙发!

发表评论

电子邮件地址不会被公开。 必填项已用*标注