詳解mpvue開發(fā)小程序小總結(jié)

最近用mpvue開發(fā)了一個小程序，現(xiàn)總結(jié)一下碰見的問題及解決方案

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、成都做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出遼陽免費做網(wǎng)站回饋大家。

1.項目中數(shù)據(jù)請求用到了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()//導(dǎo)航條加載動畫
 //給所有請求添加自定義header
 if (store.getters.accessToken) {
  config.headers['Authorization'] = `JWT ${store.getters.accessToken}`
 }
 config.headers['X-Tag'] = 'flyio'
 return config
})

//http 響應(yīng)攔截器
fly.interceptors.response.use((response) => {
  wx.hideNavigationBarLoading()//導(dǎo)航條加載動畫
  const res = response.data
  if (res.status === 0 && (res.errCode === 401 || res.errCode === 403)) {
   //跳轉(zhuǎn)到登錄頁面
   wx.redirectTo({
    url: '/pages/welcome/main',
   })
  }
  return res
 },
 (err) => {
  wx.hideNavigationBarLoading()//導(dǎo)航條加載動畫
  //發(fā)生網(wǎng)絡(luò)錯誤后會走到這里
  return Promise.reject(err.response)
 },
)

export default fly

2.有關(guān)登錄的處理：

這個項目中用到了一個登錄頁，用戶登錄態(tài)失效也會跳轉(zhuǎn)到登錄頁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) => {
  // 先調(diào)用 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) {
        // 保存用戶信息相關(guān)操作
        ...
        resolve(res)
       } else {
        reject(res)
       }
      }).catch(err => {
       reject(err)
      })
     },
     // 若獲取不到用戶信息 （最大可能是用戶授權(quán)不允許，也有可能是網(wǎng)絡(luò)請求失敗，但該情況很少）
     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: '重新授權(quán)',
      message: '需要獲取您的公開信息（昵稱、頭像等），請點擊"微信登錄"進行授權(quán)',
      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)
   },
  })
 })
}

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轉(zhuǎn)換成file文件
export function Base64ToBlob (urlData) {
 // 去掉url的頭，并轉(zhuǎn)換為byte
 let bytes = window.atob(urlData.split(',')[1])

 // 處理異常,將ascii碼小于0的轉(zhuǎn)換為大于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服務(wù)器再執(zhí)行其余操作：

//選擇圖片
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=>{
    //執(zhí)行剩余步驟
    }).catch(err=>{
     console.log(err)
  })
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：詳解mpvue開發(fā)小程序小總結(jié)
URL地址：http://chinadenli.net/article42/pgpgec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、網(wǎng)站內(nèi)鏈、響應(yīng)式網(wǎng)站、外貿(mào)建站、品牌網(wǎng)站設(shè)計、定制網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

詳解mpvue開發(fā)小程序小總結(jié)