我这个小白主要用的是vuex结合着uni-app自带的本地缓存调用
APIuni.setStorageSync('key', value)、uni.getStorageSync('key')
1、根目录新建store/index.js
import Vue from "vue"; import Vuex from "vuex" Vue.use(Vuex); const store = new Vuex.Store({ state: { // 是否登录标识 hasLogin: false, // 账号数据 userInfo: { id: "", nikeName: '', userName: '', phone: '', avatarUrl: '', openId: '', } }, mutations: { // login 登录 login(state, userInfo) { // state.hasLogin = true; state.userInfo = userInfo; uni.setStorageSync('userInfo', userInfo) }, // logout 注销 logout(state) { state.userInfo = {}; state.hasLogin = false; uni.clearStorageSync('userInfo'); } } }) export default store
2、main.js配置
3、在需要使用的页面引入
<template> <view class="login"> <view @click="hidenLoginPopup" class="login-popup"> <view class="login-text"> <text style="font-size: 28rpx;letter-spacing: 4rpx;">您還未登錄</text> <text style="font-size: 22rpx;color: #999;">相關操作涉及到用戶信息，請登錄后再試</text> </view> <view class="btn"> <!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="left-btn" size="mini" type="default"></button> --> <button @click.stop="goRegister" class="left-btn" type="default" size="mini">开户</button> <button @click.stop="goLogin" class="right-btn" size="mini" type="default">登录</button> </view> </view> </view> </template> <script> import { mapMutations } from 'vuex'; export default { data() { return { code: '', areaId: '1', // 加密数据 encryptedData: '', iv: '', rawData: '', signature: '' }; }, methods: { ...mapMutations(['login']), goRegister() { console.log('getuserinfo', !uni.getStorageSync('userInfo')); if (!uni.getStorageSync('userInfo')) { uni.getUserProfile({ desc: '獲取您的昵稱、頭像、地區及性別', success: infoRes => { console.log('userInfo-res', infoRes); if (infoRes.errMsg === 'getUserProfile:ok') { uni.setStorageSync('encryptedData', infoRes.encryptedData); uni.setStorageSync('iv', infoRes.iv); uni.setStorageSync('signature', infoRes.signature); this.login(infoRes.userInfo); uni.navigateTo({ url: '/platforms/mp-weixin/register/registerVersion' }); } else { uni.showToast({ title: '授權失敗', icon: 'error' }); } }, fail: err => { console.log('userInfo-err', JSON.stringify(err)); } }); } else { console.log('uni.navigateTo'); uni.navigateTo({ url: '/platforms/mp-weixin/register/registerVersion' }); } }, goLogin() { if (!uni.getStorageSync('userInfo')) { uni.getUserProfile({ desc: '獲取您的昵稱、頭像、地區及性別', success: infoRes => { console.log('userInfo-res', infoRes); if (infoRes.errMsg === 'getUserProfile:ok') { uni.setStorageSync('encryptedData', infoRes.encryptedData); uni.setStorageSync('iv', infoRes.iv); uni.setStorageSync('rawData', infoRes.rawData); uni.setStorageSync('signature', infoRes.signature); this.login(infoRes.userInfo); uni.navigateTo({ url: '/platforms/mp-weixin/register/registerVersion' }); } else { uni.showToast({ title: '授權失敗', icon: 'error' }); } }, fail: err => { console.log('userInfo-err', JSON.stringify(err)); } }); } else { uni.navigateTo({ url: '/platforms/mp-weixin/register/registerVersion' }); } }, hidenLoginPopup() { this.$store.state.hasLogin = 1; } } }; </script> <style lang="scss"> </style>
这个不是很完善，只是基本用法，我这个菜鸡还在研究中。。。。完善了回头就来修改
