DDR爱好者之家 Design By 杰米
最近用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 "htmlcode">//选择图片 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) }) }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年11月26日
2024年11月26日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]