思路:
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: '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"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" 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 = 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 实现小程序登录注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年11月15日
2024年11月15日
- 英雄联盟第二届老头杯什么时候开始 老头杯s2赛程时间队伍名单汇总
- AI赋能卓越显示技术共筑数字未来:三星显示器产品矩阵亮相2024进博会
- 技术剖析:天玑9400如何打造移动最强GPU和游戏体验?
- 顶级装备 实力登顶:三星显示器双十一焕新升级最后冲刺
- 陈影《绝色靓声》WAV+CUE
- 龚玥《禅是一枝花(6N纯银SQCD)》原抓WAV+CUE
- 刘德丽《寂寞在唱歌HQCD+A2HD5》[WAV+CUE]
- 萧亚轩《钻石糖》金牌大风[WAV+CUE][989M]
- 王菲《王菲精选-菲卖品》环球唱片SHM-SACD[ISO][1.9G]
- 孙露《一抹伤HQ》头版限量[WAV+CUE][1G]
- 黄安.1989-一切从头(TP版)【天际唱片】【FLAC分轨】
- 群星.1994-浓情蜜意情歌精丫华纳】【WAV+CUE】
- 邓丽君.1983-淡淡幽情(2022环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 试音天碟《专业测试第一天碟》经典天碟精选[WAV分轨][1G]
- 试音典范 《情惹发烧情HQCD》人声发烧极品 [WAV+CUE][1G]