详解mpvue开发小程序小总结Word下载.docx
《详解mpvue开发小程序小总结Word下载.docx》由会员分享，可在线阅读，更多相关《详解mpvue开发小程序小总结Word下载.docx（12页珍藏版）》请在冰点文库上搜索。
constres=response.data
if（res.status===0&
&
（res.errCode===401||res.errCode===403））{
//跳转到登录页面
wx.redirectTo（{
url:
'
/pages/welcome/main'
}）
returnres
},
（err）=>
//发生网络错误后会走到这里
returnPromise.reject（err.response）
）
exportdefaultfly
2.有关登录的处理：
这个项目中用到了一个登录页，用户登录态失效也会跳转到登录页login.js
import{loginByCode}from'
../api/weAppAuth'
//登录接口
../store'
/**
*登录
*@returns{Promise<
any>
}
*/
exportfunctionweAppLogin（）{
returnnewPromise（（resolve,reject）=>
//先调用wx.login获取到code
wx.login（{
success:
（res）=>
wx.getUserInfo（{
lang:
zh_CN'
（{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:
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'
weAppLogin（）.then（res=>
console.log（res）
Toast（{
type:
success'
登录成功'
selector:
#zan-toast-test'
timeout:
1000
setTimeout（（）=>
wx.switchTab（{
/pages/index/main'
},1000）
console.log（err）
3.支付方法封装成promise
*支付
*@paramdata
exportfunctionwechatPay（data）{
const{timeStamp,nonceStr,signType,paySign}=data
wx.requestPayment（{
timeStamp:
timeStamp,
nonceStr:
nonceStr,
package:
data.package,
signType:
signType,
paySign:
paySign,
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<
+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<
bytes.length;
i++）{
ia[i]=bytes.charCodeAt（i）
returnnewBlob（[ab],{
image/png'
exportconstcos=newCOS（{
getAuthorization:
（options,callback）=>
leturl='
/qcloud/cos_sign'
fly.request（{
url,
method:
post'
body:
（options.Method||'
get'
）.toLowerCase（）,
pathname:
/'
+（options.Key||'
'
）,
}）.then（res=>
callback（res.data.authorization）
//本地测试
/*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'
this.imageList=[...this.imageList,...res.tempFilePaths]
},
uploadImg（data,index）{
letfilePath=data
letfileName=path（this.id,'
test'
fileType（filePath.substr（filePath.lastIndexOf（'
）+1）））+index
cos.postObject（{
Bucket:
Bucket,
Region:
Region,
fileName,
FilePath:
filePath,
},（err,res）=>
if（res.statusCode===200）{
letitem={
imageUrl:
res.Location,
this.data.imageList.push（item）
//上传图片
upload（）{
//没有图片
if（this.imageList.length===0）{
statusCode:
200,
resolve（data）
return
//有图片
letall=[]
this.imageList.length;
all.push（this.uploadImg（this.imageList[i],i））
Promise.all（all）.then（res=>
handleSubmit（）{
this.upload（）.then（res=>
{
//执行剩余步骤
}）.catch（err=>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。
升级会员 