uni-app微信小程序登录开发

1. 开发准备

在开始开发前，需要先进行一些准备工作：

- 安装uni-app的开发环境，详见uni-app官方文档；
- 创建一个微信小程序开发者账号，获取小程序的AppID；
- 在小程序管理后台中，开启“获取用户信息”权限和“登录”权限。

2. 登录流程

在uni-app中，可以使用uni.login()方法进行微信登录。该方法返回一个promise对象，表示登录是否成功。在登录成功后，可以使用uni.getUserInfo()方法获取用户信息。

具体的登录流程如下：

- 调用uni.login()方法进行微信登录，并获取到code值；
- 将code值发送到后端服务器，后端服务器根据code值获取到用户的openid和session_key；
- 将openid和session_key存储到本地storage中，用于后续的用户认证；
- 根据获取到的用户openid，可以将用户与后端系统中的用户进行关联。

3. 获取用户信息

在登录成功后，可以使用uni.getUserInfo()方法获取用户信息。该方法返回一个promise对象，表示获取用户信息是否成功。在获取成功后，可以将用户信息展示到页面上，或者将用户信息发送到后端服务器。

具体的获取用户信息流程如下：

- 调用uni.getUserInfo()方法获取用户信息；
- 将获取到的用户信息展示到页面上，或者将用户信息发送到后端服务器。

4. 完整代码示例

下面是一个完整的uni-app微信小程序登录开发示例代码：

<template>
  <view class="container">
    <view class="userinfo">
      <button @tap="login" v-if="!hasUserInfo">微信登录</button>
      <image :src="userInfo.avatarUrl" v-if="hasUserInfo" />
      <text>{{userInfo.nickName}}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        userInfo: {},
        hasUserInfo: false
      }
    },
    methods: {
      login() {
        uni.login({
          success: res => {
            if (res.code) {
              // 将code发送到后端服务器
              uni.request({
                url: 'https://example.com/login',
                data: {
                  code: res.code
                },
                success: res => {
                  // 将openid和session_key存储到本地storage
                  uni.setStorageSync('openid', res.data.openid)
                  uni.setStorageSync('session_key', res.data.session_key)
                }
              })
            } else {
              console.log('登录失败：' + res.errMsg)
            }
          }
        })
      },
      getUserInfo() {
        uni.getUserInfo({
          success: res => {
            this.userInfo = res.userInfo
            this.hasUserInfo = true
            // 将用户信息发送到后端服务器
            uni.request({
              url: 'https://example.com/userInfo',
              data: {
                openid: uni.getStorageSync('openid'),
                userInfo: res.userInfo
              }
            })
          }
        })
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }

  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
</style>

在上面的代码中，当用户点击“微信登录”按钮时，会调用login()方法进行微信登录，并将获取到的openid和session_key存储到本地storage中。当用户点击“获取用户信息”按钮时，会调用getUserInfo()方法获取用户信息，并将用户信息发送到后端服务器。在页面上，会根据hasUserInfo变量的值来决定是否展示用户信息。