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 相关文章推荐
拖拉表格的JS函数
Nov 20 Javascript
js下通过getList函数实现分页效果的代码
Sep 17 Javascript
javascript闭包的高级使用方法实例
Jul 04 Javascript
Javascript表格翻页效果实现思路及代码
Aug 23 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
js实现点击链接后窗口缩小并居中的方法
Mar 02 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
Javascript实现倒计时(防页面刷新)实例
Dec 13 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
vue 检测用户上传图片宽高的方法
Feb 06 Javascript
JS原形与原型链深入详解
May 09 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
用函数读出数据表内容放入二维数组
2006/10/09 PHP
PHP 常见郁闷问题答解
2006/11/25 PHP
中篇:安装及配置PHP
2006/12/13 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
php实现多城市切换特效
2015/08/09 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
Jquery操作cookie记住用户名
2016/03/29 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
为JQuery EasyUI 表单组件增加焦点切换功能的方法
2017/04/13 jQuery
vue使用$emit时,父组件无法监听到子组件的事件实例
2018/02/26 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
详解Nuxt.js 实战集锦
2019/11/19 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
2020/10/20 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
Python正则表达式教程之一:基础篇
2017/03/02 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
python 利用文件锁单例执行脚本的方法
2019/02/19 Python
python3实现简单飞机大战
2020/11/29 Python
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
详解HTML5 录音的踩坑之旅
2017/12/26 HTML / CSS
乌克兰机票、铁路和巴士票、酒店搜索、保险:Tickets.ua
2020/01/11 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
自行车租赁公司创业计划书
2014/01/28 职场文书
房屋转让协议书
2014/04/11 职场文书
爱我中华演讲稿
2014/05/20 职场文书
酒店厨房管理制度
2015/08/06 职场文书
三严三实·严以修身心得体会
2016/01/15 职场文书
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL