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

 更新时间:2019年10月12日 15:55:20   作者:houqq  
这篇文章主要介绍了uni-app 实现小程序登录注册功能,文中给大家介绍了实现思路,以及vuex和本地缓存的区别,需要的朋友可以参考下

思路:

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?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" 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 实现小程序登录注册功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • vue如何使用swiper插件修改左右箭头的默认样式

    vue如何使用swiper插件修改左右箭头的默认样式

    这篇文章主要介绍了vue如何使用swiper插件修改左右箭头的默认样式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue-cli2 构建速度优化的实现方法

    vue-cli2 构建速度优化的实现方法

    这篇文章主要介绍了vue-cli2 构建速度优化的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue开发之watch监听数组、对象、变量操作分析

    Vue开发之watch监听数组、对象、变量操作分析

    这篇文章主要介绍了Vue开发之watch监听数组、对象、变量操作,结合实例形式分析了vue.js使用Watch针对数组、对象、变量监听相关操作技巧,需要的朋友可以参考下
    2019-04-04
  • 使用Vant完成DatetimePicker 日期的选择器操作

    使用Vant完成DatetimePicker 日期的选择器操作

    这篇文章主要介绍了使用Vant完成DatetimePicker 日期的选择器操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue 检测用户上传图片宽高的方法

    vue 检测用户上传图片宽高的方法

    这篇文章主要介绍了vue 检测用户上传图片宽高的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • vue分片上传视频并转换为m3u8文件播放的实现示例

    vue分片上传视频并转换为m3u8文件播放的实现示例

    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,本文主要介绍了vue分片上传视频并转换为m3u8文件播放的实现示例,感兴趣的可以了解一下
    2023-11-11
  • @error函数vue图片加载失败空白页解决方案

    @error函数vue图片加载失败空白页解决方案

    这篇文章主要介绍了@error函数vue图片加载失败空白页解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue顶部菜单栏实现小结

    vue顶部菜单栏实现小结

    这篇文章主要介绍了vue顶部菜单栏实现小结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-06-06
  • vue中使用 pako.js 解密 gzip加密字符串的方法

    vue中使用 pako.js 解密 gzip加密字符串的方法

    这篇文章主要介绍了vue项目中 使用 pako.js 解密 gzip加密字符串 的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    这篇文章主要介绍了vue中echarts的用法及与elementui-select的协同绑定操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11

最新评论