详解mpvue开发小程序小总结


Posted in Javascript onJuly 25, 2018

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
pjblog中的UBBCode.js
Apr 25 Javascript
Javascript 面向对象 继承
May 13 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
通过javascript把图片转化为字符画
Oct 24 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
PHP捕捉异常中断的方法
Oct 24 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
input输入框内容实时监测(附代码)
Aug 15 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
Promise.all中对于reject的处理方法
Aug 01 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
Bootstrap table表格初始化表格数据的方法
Jul 25 #Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
Jul 24 #Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 #Javascript
vue实现底部菜单功能
Jul 24 #Javascript
vue 下列表侧滑操作实例代码详解
Jul 24 #Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
Jul 24 #Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 #Javascript
You might like
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
Javascript匿名函数的一种应用 代码封装
2010/06/27 Javascript
event.X和event.clientX的区别分析
2011/10/06 Javascript
JavaScript表达式:URL 协议介绍
2013/03/10 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
一个JS函数搞定网页标题(title)闪动效果
2014/05/13 Javascript
Javascript 拖拽的一些简单的应用(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
2015/12/24 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
微信小程序之电影影评小程序制作代码
2017/08/03 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
深入学习js函数的隐式参数 arguments 和 this
2019/06/24 Javascript
Vue搭建后台系统需要注意的问题
2019/11/08 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
python excel使用xlutils类库实现追加写功能的方法
2018/05/02 Python
python绘制直方图和密度图的实例
2019/07/08 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
平面设计师工作职责范文
2013/12/03 职场文书
护士演讲稿范文
2014/01/05 职场文书
教师绩效考核方案
2014/01/21 职场文书
跟单业务员岗位职责
2014/03/08 职场文书
个人银行贷款担保书
2014/04/01 职场文书
大足石刻导游词
2015/02/02 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
原告代理词范文
2015/05/25 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书