1.登录功能实现方式：

  系统有自己的用户体系，调用系统的登录接口，传入用户名和密码后进行登录；
  系统没有用户体系，使用微信code直接注册用户后登录。

两种登录模式适用与不同的系统场景，

    本系统是为公司内部使用，公司外部的人员不能登录，此时系统就需要有独立的用户体系，后端提供登录接口，小程序调用登录接口传入用户名和密码后登录。
    本系统是C端用户系统，任何人都可以访问，此时就可以用第2种方式进行登录，直接用微信的code作为用户标识注册登录系统。

2.登录流程设计

image.png

3.登录步骤实现

（1）用户登录状态判断

用户登录状态可以通过全局变量来实现，由于本人不懂怎样设置全局变量，所以我用Storage数据来实现。进入小程序时获取Storage数据中的登录数据，里面包含用户的token值，时间戳等信息。如果Storage数据中没有登录数据，则用户是未登录状态，否则是已登录。

   onLoad() {
        //进入页面检查是否存在缓存的登录数据信息，存在时说明不是第一次登录  
        const loginData = uni.getStorageSync('accessToken')
        if (!loginData) {
            console.log('登录数据不存在')
            return
        } else {
            console.log('登录数据存在', loginData)
            this.userInfo = uni.getStorageSync('userinfo')       //获得用户微信的昵称和头像
            const accessToken = loginData.data                   //获得用户token
            const oldtime = loginData.time                       //上次登录时保存的时间戳
            const newtime = Date.parse(new Date()) / 1000        //当前的时间戳
            //token设置有效期为7天，7天内判定登录状态loginStatus为true
            newtime - oldtime <= 604800 ? this.loginStatus = true : this.loginStatus = false    
            console.log('this.loginStatus',this.loginStatus)
        }
    },

（2）未登录状态，点击“登录”按钮后，弹出授权，调用uni.getUserProfile获取用户的昵称和微信号等信息

    <view class="login-box" v-if="!loginStatus">
        <view class="userName">您还未登录</view>
        <view class="button-box">
            <view class="login-in" @click="loginHandler">登录</view>
        </view>
    </view>
    <view class="login-box" v-else>
        <view class="userName">欢迎您：{{userInfo.nickName}}</view>
        <view class="button-box">
            <view class="login-out" @click="checkoutHandler">退出</view>
        </view>
    </view>

    loginHandler() {
            uni.getUserProfile({
                desc: "为了给用户提供更好的服务",
                success: (res) => {
                    uni.setStorageSync('userinfo', res.userInfo)   //把微信信息保存到Storage
                    this.userInfo = res.userInfo
                    this.wxLogin()                                 //调用wxLogin() 获取用户登录凭证code
                },
                fail: (err) => {
                    uni.showToast({
                        icon: "none",
                        title: '用户拒绝授权'
                      })
                    }
                  })
                },

（3）调用uni.login获取用户登录凭证code

        //获取微信code
        wxLogin() {
            uni.login({
                success: (res) => {
                    //console.log(res)
                    this.params.code = (res.code)
                    this.handleLogin()             //向后端发起登录请求
                }
            })
        },

（4）把code传给后端登录接口，进行登录操作

  此处需要后端的同事提供登录接口，大家也可以用我的接口进行测试： https://pcrm.xiaozhiinfo.com/api/login-with-wechat-code      

（5）登录成功后，保存用户信息到Storage

   //通过微信Code直接登录
        async handleLogin() {
            const logindata = await request({
                url: '/login-with-wechat-code',
                method: 'POST',
                data: {
                    code: this.params.code
                },
            })
            console.log("登录请求完成,打印登录数据", logindata)
            if (logindata.code != 0) {                    //如果返回的code不等于0，返回登录失败提示信息
                return uni.showToast({
                    title: logindata.message
                })
            } else {
                this.loginStatus = true                            //登录状态修改为true
                uni.setStorageSync('accessToken', {                //把登录返回的token信息保存到Storage
                    data: logindata.data,
                    time: Date.parse(new Date()) / 1000,           //记录当前时间戳
                })
                uni.showToast({
                    title: '登录成功'
                })
            }
        },

        //退出登录 
        checkoutHandler() {
            this.loginStatus = false
            uni.clearStorageSync('accessToken')
            uni.clearStorageSync('userinfo')
        },

到此登录功能完成了，此登录流程没有要求用户授权手机号，只需获取了用户的微信昵称和微信号，对于用户来说比较友好。
我是今年3月份开始自学前端的，没有任何编程基础，写的代码可能存在很多缺陷或不足，望大家看到后能指正，感谢！！