vue中uni-app实现⼩程序登录注册功能
思路:
1.使⽤的open-type="getUserInfo" 获取⽤户信息,将⽤户信息保存到userinfoDetails对象中去。
<button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button>
2.使⽤ uni.login() 获取code,并且把code传给后台,后台会返回openid
3.使⽤vuex和本地缓存保存相关状态值
备注vuex和本地缓存的区别:
vuex是响应式更新,页⾯不刷新数据也会实时更新,但是页⾯⼀刷新,数据可能会失效
本地缓存不会响应式更新,但是⼀刷新本地缓存就会更新。所以⼆者结合使⽤,前端⼩⽩不知道这个做法是否科学,我把调⽤登录注册的⽅法封装到公共⽅法⾥
代码如下
import store from '@/store'
const app = {
apiUrl: 'hoxxxxxxxxop/', //请求的地址
_getuserinfo(res,ppid) {
var that = this
var userinfoDetails = {}
userinfoDetails = res.detail.userInfo
provider: 'weixin',
success: function () {
uni.login({
success:function(res){
uni.showLoading({
title: '登陆中...',
mask: false
});
url: that.apiUrl + 'small/id?code=' + de,
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"));
delete userinfoDetails.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
})
storemit('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) {
var that = this
如何制作app小程序
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
})
storemit('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
})
}
}
})
}
}
export default app;
在index.vue调⽤
⽤Vuex中的isloginStatus和缓存中的StorageloginStatus来控制是否显⽰登录的按钮
<button v-if="isloginStatus || StorageloginStatus" type="primary" class="reserve-btn" @click="goreserve">跳转</button> <button v-else type="primary" class="reserve-btn" open-type="getUserInfo" @getuserinfo="getuserinfo">登录</button> import app from '../../common/config.js'
export default {
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 = StorageSync('StorageloginStatus')
},
methods: {
// 获取⽤户信息
getuserinfo(res) {
app._getuserinfo(res,this.ppid) // 封装好的⽅法 res是返回的⽤户信息,ppid是⼆维码携带的参数
},
/
/ 当注册或者登录成功显⽰路由按钮
goreserve() {
console.log('去挂号了')
}
}
}
vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.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
}
},
})
export default store
总结
以上所述是⼩编给⼤家介绍的vue中uni-app 实现⼩程序登录注册功能,希望对⼤家有所帮助,如果⼤家有任何疑问请给我留⾔,⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持!
如果你觉得本⽂对你有帮助,欢迎转载,烦请注明出处,谢谢!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。