vue中uni-app 实现小程序登录注册功能

2023-08-11 22:20:04 66

思路：

1.使用微信的 open-type="getUserInfo"获取用户信息，将用户信息保存到userinfoDetails对象中去。

预约挂号

2.使用 uni.login()获取code,并且把code传给后台，后台会返回openid

3.使用vuex和本地缓存保存相关状态值

备注vuex和本地缓存的区别:

vuex是响应式更新,页面不刷新数据也会实时更新,但是页面一刷新,数据可能会失效

本地缓存不会响应式更新,但是一刷新本地缓存就会更新。所以二者结合使用，前端小白不知道这个做法是否科学，

我把调用登录注册的方法封装到公共方法里

代码如下

importstorefrom'@/store'
constapp={
apiUrl:'https://hoxxxxxxxxop.com/',//请求的地址
_getuserinfo(res,ppid){
varthat=this
varuserinfoDetails={}
userinfoDetails=res.detail.userInfo
uni.getUserInfo({
provider:'weixin',
success:function(){
uni.login({
success:function(res){
uni.showLoading({
title:'登陆中...',
mask:false
});
uni.request({
url:that.apiUrl+'small/id?code='+res.code,
success:(res)=>{
console.log(res)
if(res.data.openid){
userinfoDetails.openid=res.data.openid
userinfoDetails=JSON.parse(JSON.stringify(userinfoDetails).replace(/avatarUrl/g,"headimgurl"));
userinfoDetails=JSON.parse(JSON.stringify(userinfoDetails).replace(/gender/g,"sex"));
userinfoDetails=JSON.parse(JSON.stringify(userinfoDetails).replace(/nickName/g,"nickname"));
deleteuserinfoDetails.language;
userinfoDetails.ppid=ppid||''
console.log(userinfoDetails)
uni.setStorageSync('userinfoDetails',userinfoDetails)
}
if(res.data.status==0){
that.sendInfo(userinfoDetails)//用户还没注册过需调用此方法
console.log('我还没有注册')
}else{
uni.showToast({
title:'登录成功',
icon:'success',
duration:2000
})
store.commit('login',res.data)//vuex的方法，存openid，userinfo，和更改isloginstatus状态值
uni.setStorageSync('StorageloginStatus',true)//补充本地存储localStorage解决vuex刷新数据不保留
uni.setStorageSync('Storageopenid',res.data.openid)
uni.setStorageSync('Storageuserinfo',res.data.userinfo)
}
if(res.data.status==0&&res.data.userinfo==0){
uni.showToast({
title:'登录失败',
duration:2000
})
}
}
})
}
})
}
});
},
sendInfo(userinfoDetails){
varthat=this
uni.request({
url:this.apiUrl+'sm/vip',//注册接口
data:userinfoDetails,
method:'POST',
success:(res)=>{
if(res.data.userinfo==1){
uni.hideLoading()
uni.showToast({
title:'注册成功',
icon:'success',
duration:2000
})
store.commit('login',res.data)//vuex的方法，存openid，userinfo，和更改isloginstatus状态值
uni.setStorageSync('StorageloginStatus',true)
uni.setStorageSync('Storageopenid',res.data.openid)
uni.setStorageSync('Storageuserinfo',res.data.userinfo)
}else{
uni.hideLoading()
uni.showToast({
title:res.data.msg,
duration:2000
})
}
}
})
}
}
exportdefaultapp;

在index.vue调用

用Vuex中的isloginStatus和缓存中的StorageloginStatus来控制是否显示登录的按钮

跳转
登录
importappfrom'../../common/config.js'
exportdefault{
data(){
return{
ppid:"",
StorageloginStatus:false
}
},
computed:mapState({
isloginStatus:state=>state.isloginStatus,
}),
onLoad(option){
this.ppid=this.scene_decode(option.scene).ppid//封装的scene_decode()方法
this.StorageloginStatus=uni.getStorageSync('StorageloginStatus')
},
methods:{
//获取用户信息
getuserinfo(res){
app._getuserinfo(res,this.ppid)//封装好的方法res是微信返回的用户信息，ppid是二维码携带的参数
},
//当注册或者登录成功显示路由按钮
goreserve(){
console.log('去挂号了')
}
}
}

vuex

importVuefrom'vue'
importVuexfrom'vuex'

Vue.use(Vuex)

conststore=newVuex.Store({
state:{
isloginStatus:false,
userinfo:"",//状态值
openid:"",
userinfoDetails:{},//头像姓名城市等。。。
ppid:""
},
mutations:{
login(state,res){
state.isloginStatus=true,
state.userinfo=res.userinfo,//如果userinfo==1--->已登录
state.openid=res.openid
},
saveUserinfoDetails(state,res){
state.userinfoDetails=res
},
savePPid(state,id){
stage.ppid=id//存ppid
}
},
})
exportdefaultstore

总结

以上所述是小编给大家介绍的vue中uni-app实现小程序登录注册功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

vue中uni-app 实现小程序登录注册功能

热门推荐

随机推荐