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

思路：1.使用微信的 open-type="getUserInfo"获取用户信息，将用户信息保存到userinfoDetails对

思路：

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

uniapp小程序 小程序登录注册