详解mpvue开发小程序小总结.docx
- 文档编号:10019701
- 上传时间:2023-02-08
- 格式:DOCX
- 页数:12
- 大小:17.37KB
详解mpvue开发小程序小总结.docx
《详解mpvue开发小程序小总结.docx》由会员分享,可在线阅读,更多相关《详解mpvue开发小程序小总结.docx(12页珍藏版)》请在冰豆网上搜索。
详解mpvue开发小程序小总结
详解mpvue开发小程序小总结
最近用mpvue开发了一个小程序,现总结一下碰见的问题及解决方案
1.项目中数据请求用到了fly.io,封装成request.js如下:
importwxfrom'wx'
importFlyfrom'flyio'
importstorefrom'../store/index'
constfly=newFly()
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'
returnconfig
})
//http响应拦截器
fly.interceptors.response.use((response)=>{
wx.hideNavigationBarLoading()//导航条加载动画
constres=response.data
if(res.status===0&&(res.errCode===401||res.errCode===403)){
//跳转到登录页面
wx.redirectTo({
url:
'/pages/welcome/main',
})
}
returnres
},
(err)=>{
wx.hideNavigationBarLoading()//导航条加载动画
//发生网络错误后会走到这里
returnPromise.reject(err.response)
},
)
exportdefaultfly
2.有关登录的处理:
这个项目中用到了一个登录页,用户登录态失效也会跳转到登录页login.js
importwxfrom'wx'
import{loginByCode}from'../api/weAppAuth'//登录接口
importstorefrom'../store'
/**
*登录
*@returns{Promise
*/
exportfunctionweAppLogin(){
returnnewPromise((resolve,reject)=>{
//先调用wx.login获取到code
wx.login({
success:
(res)=>{
wx.getUserInfo({
lang:
'zh_CN',
success:
({rawData,signature,encryptedData,iv,userInfo})=>{
letdata={
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
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
importwxfrom'wx'
/**
*支付
*@paramdata
*@returns{Promise
*/
exportfunctionwechatPay(data){
const{timeStamp,nonceStr,signType,paySign}=data
returnnewPromise((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方法:
constCOS=require('../../static/js/cos-wx-sdk-v5')
importflyfrom'./request'
exportconstBucket=process.env.Bucket
exportconstRegion=process.env.Region
//文件扩展名提取
exportfunctionfileType(fileName){
returnfileName.substring(fileName.lastIndexOf('.')+1)
}
//名称定义
exportfunctionpath(id,type,fileType){
constdate=newDate()
constyear=date.getFullYear()
constmonth=date.getMonth()+1
constday=date.getDate()
vartime=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文件
exportfunctionBase64ToBlob(urlData){
//去掉url的头,并转换为byte
letbytes=window.atob(urlData.split(',')[1])
//处理异常,将ascii码小于0的转换为大于0
letab=newArrayBuffer(bytes.length)
letia=newUint8Array(ab)
for(leti=0;i ia[i]=bytes.charCodeAt(i) } returnnewBlob([ab],{ type: 'image/png', }) } exportconstcos=newCOS({ getAuthorization: (options,callback)=>{ leturl='/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) }) //本地测试 /*letauthorization=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){ returnnewPromise((resolve,reject)=>{ letfilePath=data letfileName=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){ letitem={ imageUrl: res.Location, } this.data.imageList.push(item) resolve(res) }else{ reject(err) } }) }) }, //上传图片 upload(){ returnnewPromise((resolve,reject)=>{ //没有图片 if(this.imageList.length===0){ letdata={ statusCode: 200, } resolve(data) return } //有图片 letall=[] for(leti=0;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) }) } 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 详解 mpvue 开发 程序 总结