uni-app 實現小程序登錄註冊功能

思路：

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