今天就跟大家聊聊有关怎么在vue中使用uni-app 实现一个小程序登录注册功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
Vue具体轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快等优势,Vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和dom,可以大大提升访问速度和用户体验。
思路:
1.使用微信的 open-type="getUserInfo"
获取用户信息,将用户信息保存到userinfoDetails对象中去。
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来控制是否显示登录的按钮
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 实现一个小程序登录注册功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联成都网站设计公司行业资讯频道,感谢大家的支持。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。