1.使用微信的 open-type="getUserInfo" 获取用户信息，将用户信息保存到userinfoDetails对象中去。
<button v-else type="primary" open-type="getUserInfo" @getuserinfo="getuserinfo">预约挂号</button>
2.使用 uni.login() 获取code,并且把code传给后台，后台会返回openid
3.使用vuex和本地缓存保存相关状态值
备注vuex和本地缓存的区别:
vuex是响应式更新,页面不刷新数据也会实时更新,但是页面一刷新,数据可能会失效
本地缓存不会响应式更新,但是一刷新本地缓存就会更新。所以二者结合使用，前端小白不知道这个做法是否科学，
我把调用登录注册的方法封装到公共方法里
代码如下
import store from '@/store' const app = { apiUrl: 'https://hoxxxxxxxxop.com/', //请求的地址 _getuserinfo(res,ppid) { var that = this var userinfoDetails = {} 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")); 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 }) 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) { var that = 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 }) } } }) } } export default app;
在index.vue调用
用Vuex中的isloginStatus和缓存中的StorageloginStatus来控制是否显示登录的按钮
<button v-if="isloginStatus || StorageloginStatus" type="primary" @click="goreserve">跳转</button> <button v-else type="primary" 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 = uni.getStorageSync('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 实现小程序登录注册功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: