详解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 相关文章推荐
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
Mar 01 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jQuery中mouseover事件用法实例
Dec 26 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JavaScript禁止微信浏览器下拉回弹效果
May 16 Javascript
浅谈ES6 模板字符串的具体使用方法
Nov 07 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
javascript实现手动点赞效果
Apr 09 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
Apr 27 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP面向对象继承用法详解(优化与减少代码重复)
2016/12/02 PHP
js批量设置样式的三种方法不推荐使用with
2013/02/25 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
jquery mobile changepage的三种传参方法介绍
2013/09/13 Javascript
全面理解面向对象的 JavaScript(来自ibm)
2013/11/10 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
2014/06/10 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
2017/03/23 jQuery
jQuery实现动态删除LI的方法
2017/05/30 jQuery
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
vue-cli创建的项目,配置多页面的实现方法
2018/03/15 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
js实现多个倒计时并行 js拼团倒计时
2019/02/25 Javascript
el-form 多层级表单的实现示例
2020/09/10 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
python之import机制详解
2014/07/03 Python
python+selenium实现163邮箱自动登陆的方法
2017/12/31 Python
python把转列表为集合的方法
2019/06/28 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python 五子棋如何获得鼠标点击坐标
2019/11/04 Python
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
澳大利亚最受欢迎的美发用品目的地:AMR
2019/08/28 全球购物
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
2014年三八妇女节活动方案
2014/02/28 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
经典演讲稿汇总
2014/05/19 职场文书
观看焦裕禄观后感
2015/06/09 职场文书
与死神共舞观后感
2015/06/15 职场文书
教师节大会主持词
2015/07/06 职场文书
小学生运动会广播
2015/08/19 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python