详解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{ 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{ resolve(res) }).catch(err=>{ reject(err) }) }) }, handleSubmit(){ this.upload().then(res=>{ //执行剩余步骤 }).catch(err=>{ console.log(err) }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。