mpvue開發小程序小總結

最近用mpvue開發了一個小程序，現總結一下碰見的問題及解決方案

1.項目中數據請求用到了fly.io，封裝成request.js如下：

import wx from 'wx'
import Fly from 'flyio'
import store from '../store/index'

const fly = new Fly()

fly.config.baseURL = process.env.BASE_URL
fly.config.timeout = 5000

//http 請求攔截器
fly.interceptors.request.use((config) => {
  wx.showNavigationBarLoading()//導航條加載動畫
  //給所有請求添加自定義header
  if (store.getters.accessToken) {
    config.headers['Authorization'] = `JWT ${store.getters.accessToken}`
  }
  config.headers['X-Tag'] = 'flyio'
  return config
})

//http 響應攔截器
fly.interceptors.response.use((response) => {
    wx.hideNavigationBarLoading()//導航條加載動畫
    const res = response.data
    if (res.status === 0 && (res.errCode === 401 || res.errCode === 403)) {
      //跳轉到登錄頁面
      wx.redirectTo({
        url: '/pages/welcome/main',
      })
    }
    return res
  },
  (err) => {
    wx.hideNavigationBarLoading()//導航條加載動畫
    //發生網絡錯誤後會走到這裏
    return Promise.reject(err.response)
  },
)

export default fly

2.有關登錄的處理：
這個項目中用到了一個登錄頁，用戶登錄態失效也會跳轉到登錄頁
login.js

import wx from 'wx'
import { loginByCode } from '../api/weAppAuth' //登錄接口
import store from '../store'

/**
 * 登錄
 * @returns {Promise<any>}
 */
export function weAppLogin () {
  return new Promise((resolve, reject) => {
    // 先調用 wx.login 獲取到 code
    wx.login({
      success: (res) => {
        wx.getUserInfo({
          lang: 'zh_CN',
          success: ({rawData, signature, encryptedData, iv, userInfo}) => {
            let data = {
              code: res.code,
              rawData,
              signature,
              encryptedData,
              iv,
              userInfo,
            }
            // console.log(JSON.stringify(data))
            loginByCode(data).then(res => {
              // 該爲我們後端的邏輯 若code > 0爲登錄成功，其他情況皆爲異常 （視自身情況而定）
              if (res.status === 1) {
               // 保存用戶信息相關操作
               ...
                resolve(res)
              } else {
                reject(res)
              }
            }).catch(err => {
              reject(err)
            })
          },
          // 若獲取不到用戶信息 （最大可能是用戶授權不允許，也有可能是網絡請求失敗，但該情況很少）
          fail: (err) => {
            reject(err)
          },
        })
      },
    })
  })
}

welcome.vue

 <button
        class="default-btn "
        open-type="getUserInfo"
        @getuserinfo="onGotUserInfo"
        type="primary"
      >
        微信登錄
</button>

 methods: {
      //登錄
      onGotUserInfo ({mp}) {
        const {detail} = mp
        if (!detail.rawData) {
          Dialog({
            title: '重新授權',
            message: '需要獲取您的公開信息（暱稱、頭像等），請點擊"微信登錄"進行授權',
            confirmButtonText: '確定',
            confirmButtonColor: '#373737',
          })
        } else {
          weAppLogin().then(res => {
            console.log(res)
            Toast({
              type: 'success',
              message: '登錄成功',
              selector: '#zan-toast-test',
              timeout:1000
            })
            setTimeout(() => {
              wx.switchTab({
                url: '/pages/index/main',
              })
            }, 1000)
          }).catch(err => {
            console.log(err)
          })
        }
      },
    },

3.支付、下載圖片方法封裝成promise

import wx from 'wx'

/**
 * 支付
 * @param data
 * @returns {Promise<any>}
 */
export function wechatPay (data) {
  const {timeStamp, nonceStr, signType, paySign} = data
  return new Promise((resolve, reject) => {
    wx.requestPayment({
      timeStamp: timeStamp,
      nonceStr: nonceStr,
      package: data.package,
      signType: signType,
      paySign: paySign,
      success: (res) => {
        resolve(res)
      },
      fail: (err) => {
        reject(err)
      },
    })
  })
}

/**
* 下載圖片到本地
* @param url
* @returns {Promise<any>}
*/
export function wechatDownload (url) {
  return new Promise((resolve, reject) => {
    wx.downloadFile({
      url: url,
      success: (res) => {
        if (res.statusCode === 200) {
          console.log(res.tempFilePath)
          let tempFilePaths = res.tempFilePath
          wx.saveImageToPhotosAlbum({
            filePath: tempFilePaths,
            success: (res) => {
              resolve(res)
            },
            fail: (err) => {
              resolve(res)
            }
          })
          /* wx.saveFile({
             tempFilePath: tempFilePaths[0],
             success: (res) => {
               resolve(res)
             },
             fail: (err) => {
               resolve(res)
             }
           })*/
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

4.使用騰訊雲存儲上傳圖片
項目中使用了cos-wx-sdk-v5
封裝upload.js方法:

const COS = require('../../static/js/cos-wx-sdk-v5')
import fly from './request'

export const Bucket = process.env.Bucket
export const Region = process.env.Region

// 文件擴展名提取
export function fileType (fileName) {
  return fileName.substring(fileName.lastIndexOf('.') + 1)
}

// 名稱定義
export function path(id, type, fileType) {
  const date = new Date()
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  var time = date.toTimeString()
  time = time.substr(0, 8)
  time = time.replace(/:/g, '-')
  return `/mobile/groups/${id}/${type}/` +
    (year + '-' + (month < 10 ? '0' + month : String(month)) + '-' +
      (day < 10 ? '0' + day : String(day)) + '-' + time) + '.' + fileType
}

// base64轉換成file文件
export function Base64ToBlob (urlData) {
  // 去掉url的頭，並轉換爲byte
  let bytes = window.atob(urlData.split(',')[1])

  // 處理異常,將ascii碼小於0的轉換爲大於0
  let ab = new ArrayBuffer(bytes.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i)
  }
  return new Blob([ab], {
    type: 'image/png',
  })
}

export const cos = new COS({
  getAuthorization: (options, callback) => {
    let url = '/qcloud/cos_sign'
    fly.request({
      url: url,
      method: 'post',
      body: {
        method: (options.Method || 'get').toLowerCase(),
        pathname: '/' + (options.Key || ''),
      },
    }).then(res => {
      callback(res.data.authorization)
    }).catch(err => {
      console.log(err)
    })

    //本地測試
    /*let authorization = COS.getAuthorization({
      SecretId: '你的id',
      SecretKey: '你的key',
      Method: options.Method,
      Key: options.Key,
    })
    callback(authorization)*/
  },
})

小程序上傳多圖時保證圖片均上傳到cos服務器再執行其餘操作：

//選擇圖片
chooseImage () {
        wx.chooseImage({
          count: this.chooseImageNum,
          sizeType: ['original'],
          sourceType: ['album', 'camera'],
          success: (res) => {
            this.imageList = [...this.imageList, ...res.tempFilePaths]
          },
        })

},

uploadImg (data, index) {
        return new Promise((resolve, reject) => {
          let filePath = data
          let fileName = path(this.id, 'test',
            fileType(filePath.substr(filePath.lastIndexOf('/') + 1))) + index
          cos.postObject({
            Bucket: Bucket,
            Region: Region,
            Key: fileName,
            FilePath: filePath,
          }, (err, res) => {
            if (res.statusCode === 200) {
              let item = {
                imageUrl: res.Location,
              }
              this.data.imageList.push(item)
              resolve(res)
            } else {
              reject(err)
            }
          })

        })
},
//上傳圖片
 upload () {
        return new Promise((resolve, reject) => {
          //沒有圖片
          if (this.imageList.length === 0) {
            let data = {
              statusCode: 200,
            }
            resolve(data)
            return
          }
          //有圖片
          let all = []
          for (let i = 0; i < this.imageList.length; i++) {
            all.push(this.uploadImg(this.imageList[i], i))
          }
          Promise.all(all).then(res => {
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        })
},

handleSubmit(){
     this.upload().then(res=>{
        //執行剩餘步驟
        }).catch(err=>{
         console.log(err)
    })
}

未完待續…