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

原创

已于 2022-06-16 23:20:06 修改 · 2.7k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

于 2022-06-16 23:12:22 首次发布

本文介绍了如何在vue的uni-app中利用微信API获取用户信息和code，结合后台交互实现登录注册功能。同时探讨了vuex与本地缓存的区别，指出vuex提供响应式更新但可能在刷新后失效，而本地缓存不响应式但刷新后仍有效。作者将登录注册方法封装为公共方法，并在index.vue中结合Vuex的状态管理和本地缓存控制登录按钮的显示。

使用微信的 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)