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


Posted in Javascript onOctober 12, 2019

思路:

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

Javascript 相关文章推荐
javascript getElementsByClassName实现代码
Oct 11 Javascript
判断js对象是否拥有某一个属性的js代码
Aug 16 Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
angular4应用中输入的最小值和最大值的方法
May 17 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
解决vue路由name同名,路由重复的问题
Aug 05 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 #Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 #Javascript
vue中添加与删除关键字搜索功能
Oct 12 #Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
jquery 时间戳转日期过程详解
Oct 12 #jQuery
JS数组splice操作实例分析
Oct 12 #Javascript
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
逆序二维数组插入一元素的php代码
2012/06/08 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php 多文件上传的实现实例
2016/10/23 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
Javascript 多浏览器兼容总结(实战经验)
2013/10/30 Javascript
jQuery对Select的操作大集合(收藏)
2013/12/28 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
jquery+css3实现会动的小圆圈效果
2016/01/27 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
JS实现简单的二元方程计算器功能示例
2017/01/03 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
qrcode生成二维码微信长按无法识别问题的解决
2019/04/04 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
2019/05/17 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python2.x版本中maketrans()方法的使用介绍
2015/05/19 Python
Python使用Matplotlib实现雨点图动画效果的方法
2017/12/23 Python
简单了解django文件下载方式
2020/02/10 Python
python爬虫基础知识点整理
2020/06/02 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
美国知名的女性服饰品牌:LOFT(洛芙特)
2016/08/05 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
给护士表扬信
2014/01/19 职场文书
低碳生活倡议书
2014/04/14 职场文书
商场父亲节活动方案
2014/08/27 职场文书