小程式公共方法及請求封裝-圖片視訊上傳

阿新 • • 發佈：2021-09-07

⭐ 小程式公共方法及請求封裝

app.js

/**
 * app.js
 * author: J1ay
 * 小程式部分公共方法封裝
**/

App({
  onLaunch() {
   	// wx.getUpdateManager 在 1.9.90 才可用，請注意相容
		const updateManager = wx.getUpdateManager()
		updateManager.onCheckForUpdate(function (res) {
			// 請求完新版本資訊的回撥
			// console.log(res.hasUpdate)
		})
		updateManager.onUpdateReady(function () {
			wx.showModal({
				title: '更新提示',
				content: '新版本已經準備好，是否馬上重啟小程式？',
				success: function (res) {
					if (res.confirm) {
						// 新的版本已經下載好，呼叫 applyUpdate 應用新版本並重啟
						updateManager.applyUpdate()
					}
				}
			})
		})
		updateManager.onUpdateFailed(function () {
			// 新的版本下載失敗
		})
  },

  // 正則表示式封裝
  regExps: {
    email: /^[0-9a-zA-Z_]+@[0-9a-zA-Z_]+[\.]{1}[0-9a-zA-Z]+[\.]?[0-9a-zA-Z]+$/,    //郵箱
    phone: /^(?:1\d{2})-?\d{5}(\d{3}|\*{3})$/,    //手機號碼
  },

  // 七牛雲上傳多張圖片 預設上傳圖片 type = 1 視訊
  qiniuToUpload(type, callFn){
    let that = this
    that.request('get', '/shifu/index/api_upload_qiniu_get_token', {}, function (res) {
      if (res.error_code == 0) {
        that.globalData.upload_host = res.data.upload_host
        that.globalData.img_domain = res.data.host 
        that.uploadFile(res.data.token, type, callFn)
      } else {
        wx.showToast({
          title: res.error_message,
          icon: 'none'
        })
      }
    }, (err) => {})
  },

  // 上傳 預設上傳圖片; type = 1 是視訊
  uploadFile(token, type, callFn) {
    let that = this
    if (type == 1) {
      wx.chooseVideo({
        success(res) {
          const tempFilePaths = res.tempFilePath
          wx.showLoading({
            title: '拼命上傳中',
          })
          wx.uploadFile({
            url: that.globalData.upload_host,
            filePath: tempFilePaths,
            name: 'file',
            formData: {
              'token': that.data.token
            },
            success(res) {
              const data = JSON.parse(res.data)
              callFn && callFn(data);
            },
            fail: (res) => {
              wx.showToast({
                title: res.errMsg,
                icon: 'none'
              })
            },
            complete() {
              wx.hideLoading()
            }
          })
        }
      })
    }
    else {
      wx.chooseImage({
        count: 9,
        success(res) {
          console.log(res)
          // tempFilePath可以作為img標籤的src屬性顯示圖片
          const tempFilePaths = res.tempFilePaths
          wx.showLoading({
            title: '拼命上傳中',
          })
          for (let i = 0; i < tempFilePaths.length; i++) {
            wx.uploadFile({
              url: that.globalData.upload_host,
              filePath: tempFilePaths[i],
              name: 'file',
              formData: {
                'token': token,
              },
              success(res) {
                console.log(res)
                const data = JSON.parse(res.data)
                callFn && callFn(data);
              },
              fail: (res) => {
                wx.showToast({
                  title: res.errMsg,
                  icon: 'none'
                })
              },
              complete() {
                if (i == tempFilePaths.length - 1) {
                  wx.hideLoading()
                }
              }
            })
          }
        }
      })
    }
  },


  // 請求方法封裝
  request(type,url,obj,callback) {
    wx.showLoading({
      title: '拼命載入中',
    })
    let that = this
    let openid = wx.getStorageSync('openid') ? wx.getStorageSync('openid'): that.globalData.openid;
    let appid =  that.globalData.appid
    // 不是登入介面
    if(url!='/api/login') {
      // 視介面所需引數而定
      obj=Object.assign(obj,{'openid':openid});
      obj=Object.assign(obj,{'appid':appid});
    }
    let param=obj;
    wx.request({
      method: type,
      dataType: 'json',
      url: that.globalData.requestUrl + url,
      data: param,
      header: {
        'content-type': 'application/json',
      },
      success: function (res) {
        callback(res.data);
      },
      complete: function() {
        wx.hideLoading({
          success: (res) => {},
        })
      }
    })
  },
  globalData: {
    openid: '', //登入憑證
    appid: '', // 小程式
    requestUrl: '', // 請求地址
    upload_host: '', // 七牛雲上傳地址
    img_domain: '' // 檔案路徑字首
  }
})

util.js

日期格式轉換

/**
 * /utils/util.js
 * author: J1ay
 * 日期格式轉換
**/

// 日期轉換 視自己情況而定
// 預設: yyyy/mm/dd/ hh:mm:ss
// 1: yyyy-mm-dd
// 2: yyyy-mm-dd hh:mm
const formatTime = (date,type) => {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hour = date.getHours()
  const minute = date.getMinutes()
  const second = date.getSeconds()
  if (type == 1) {
    return `${[year, month, day].map(formatNumber).join('-')}`
  }
  else if (type == 2) {
    return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute].map(formatNumber).join(':')}`
  }
  else {
     return `${[year, month, day].map(formatNumber).join('/')} ${[hour, minute, second].map(formatNumber).join(':')}`
  }
}
 
const formatNumber = n => {
  n = n.toString()
  return n[1] ? n : `0${n}`
}

module.exports = {
  formatTime
}

使用示例

/**
 * index.js
 * author: J1ay
 * 公共方法使用示例
**/

let app = getApp()
let utils = require("../../utils/util")

Page({
  data: {

  },
  onLoad: function (options) {
      // 請求方法
      app.request('get/post 請求方法','介面請求地址', {xxx:yy (請求引數，可以為空)}, function(res){
          console.log(res)
      })
      //如：
      app.request('post','/api/getUserInfo', {}, function(res){
          console.log(res)
      })
      // 測試手機號格式
      console.log(app.regExps.phone.test("13605862404"))
      // 轉換日期格式
      console.log(utils.formatTime(new Date(), 1))
      
      // 上傳圖片
      app.qiniuToUpload(0,function(res){
          console.log(res)
      })
  },
})

小程式公共方法請求封裝下載地址

將不定期補充更新~