相思资源网 Design By www.200059.com
最近用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)
})
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
标签：
mpvue,小程序
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无详解mpvue开发小程序小总结的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。