国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 編程 > JavaScript > 正文

詳解mpvue開發小程序小總結

2019-11-19 13:25:17
字體:
來源:轉載
供稿:網友

最近用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_URLfly.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)   },  }) })}

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.Bucketexport 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)  })}

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 邹城市| 保山市| 安陆市| 汶上县| 垫江县| 花莲县| 蒙阴县| 正宁县| 武鸣县| 板桥市| 怀来县| 鄂尔多斯市| 越西县| 琼结县| 霞浦县| 阿克苏市| 涞源县| 阿图什市| 辉县市| 新巴尔虎右旗| 太白县| 长治市| 天等县| 陵川县| 建昌县| 新宁县| 合水县| 酒泉市| 屏东市| 太保市| 南江县| 青岛市| 克山县| 大连市| 成都市| 肃宁县| 荔浦县| 剑阁县| 耿马| 富平县| 安化县|