微信小程序OAuth2.0登录实现与用户模块开发

如云长翩

1. 微信小程序登录模块实现详解

1.1 微信授权登录机制解析

微信小程序的授权登录机制本质上是一种OAuth2.0的简化实现。当用户已经登录微信后，小程序可以通过微信开放能力获取用户的基本信息。这种设计有以下几个关键特点：

无密码验证：用户无需记忆额外账号密码
快速注册：首次登录即完成注册流程
信息可信：用户信息来自微信官方，真实可靠

在实际开发中，我们需要使用wx.login()获取临时登录凭证code，这个code的有效期只有5分钟。获取code后，再结合用户授权的手机号信息（encryptedData和iv），即可完成完整的登录流程。

重要提示：code获取必须在页面加载时完成，如果在getphonenumber事件回调中获取会导致时序问题。这是因为微信的授权弹窗会中断JS执行流程。

1.2 登录接口实现细节

登录接口需要三个关键参数：

code：通过wx.login()获取
encryptedData：包含加密的用户信息
iv：加密算法的初始向量

后端接口示例：

typescript复制// src/services/login.ts
type LoginParams = {
  code: string
  encryptedData: string
  iv: string
}

export const postLoginWxMinAPI = (data: LoginParams) => {
  return http<LoginResult>({
    method: 'POST',
    url: '/login/wxMin',
    data,
  })
}

前端调用逻辑：

typescript复制const onGetphonenumber = async (ev) => {
  const encryptedData = ev.detail!.encryptedData!
  const iv = ev.detail!.iv!
  const res = await postLoginWxMinAPI({ code, encryptedData, iv })
  loginSuccess(res.result)
}

1.3 用户状态管理方案

登录成功后，我们需要将用户信息持久化存储。这里使用Pinia配合持久化插件实现：

typescript复制// src/stores/modules/member.ts
export const useMemberStore = defineStore(
  'member',
  () => {
    const profile = ref<LoginResult>()
    
    const setProfile = (val: LoginResult) => {
      profile.value = val
    }
    
    const clearProfile = () => {
      profile.value = undefined
    }
    
    return { profile, setProfile, clearProfile }
  },
  {
    persist: {
      storage: {
        getItem(key) {
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
          uni.setStorageSync(key, value)
        },
      },
    },
  },
)

2. 用户模块开发实践

2.1 个人信息展示优化

在个人中心页面，我们需要根据登录状态显示不同的UI：

vue复制<view class="overview" v-if="memberStore.profile">
  <navigator url="/pagesMember/profile/profile">
    <image class="avatar" :src="memberStore.profile.avatar"></image>
  </navigator>
  <view class="meta">
    <view class="nickname">
      {{ memberStore.profile.nickname || memberStore.profile.account }}
    </view>
  </view>
</view>
<view class="overview" v-else>
  <navigator url="/pages/login/login">
    <image class="avatar gray" src="default-avatar.png"></image>
  </navigator>
  <view class="meta">
    <navigator url="/pages/login/login" class="nickname">
      未登录
    </navigator>
  </view>
</view>

2.2 分包预加载最佳实践

为提高用户体验，我们可以在用户进入"我的"页面时预加载设置模块：

json复制// pages.json
{
  "preloadRule": {
    "pages/my/my": {
      "network": "all",
      "packages": ["pagesMember"]
    }
  }
}

这种预加载策略可以使跳转到设置页面的速度提升50%以上，特别是在网络状况不佳的情况下效果更为明显。

2.3 退出登录实现

退出登录需要清理用户状态并返回上一页：

typescript复制const onLogout = () => {
  uni.showModal({
    content: '是否退出登录？',
    success: (res) => {
      if (res.confirm) {
        memberStore.clearProfile()
        uni.navigateBack()
      }
    },
  })
}

3. 个人信息编辑功能实现

3.1 表单结构设计

个人信息编辑页包含以下字段：

头像（可上传修改）
昵称
性别
生日
城市
职业

关键实现代码：

vue复制<view class="form-item">
  <text class="label">性别</text>
  <radio-group v-model="form.gender">
    <label class="radio">
      <radio value="男" color="#27ba9b" />
      男
    </label>
    <label class="radio">
      <radio value="女" color="#27ba9b" />
      女
    </label>
  </radio-group>
</view>

<view class="form-item">
  <text class="label">城市</text>
  <picker 
    class="picker" 
    mode="region" 
    @change="onRegionChange"
    :value="form.region"
  >
    <view v-if="form.region">{{form.region.join(' ')}}</view>
    <view class="placeholder" v-else>请选择城市</view>
  </picker>
</view>

3.2 头像上传实现

头像上传需要处理本地文件选择和上传两个步骤：

typescript复制const uploadAvatar = async () => {
  try {
    // 选择图片
    const res = await uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album']
    })
    
    // 上传到服务器
    const uploadRes = await uni.uploadFile({
      url: '/upload/avatar',
      filePath: res.tempFilePaths[0],
      name: 'file'
    })
    
    // 更新本地数据
    form.avatar = JSON.parse(uploadRes.data).url
  } catch (error) {
    uni.showToast({ title: '上传失败', icon: 'none' })
  }
}