微信小程序实现一键登录

实现微信小程序的一键登录，可以使用微信开放平台提供的第三方授权登录功能。以下是具体的实现攻略：

1. 准备工作

• 首先要申请微信开放平台的帐号并完成认证
• 在开放平台中创建自己的小程序，并获取小程序的 AppID 和 AppSecret

2. 添加授权登录

将微信提供的授权登录组件添加到小程序中。

<!-- index.wxml -->
<button bindtap="handleAuth">一键登录</button>

<!-- index.js -->
Page({
  handleAuth() {
    wx.login({
      success: (res) => {
        if (res.code) {
          // 获取 code 后请求接口进行登录，详见第三步
        }
      }
    })
  }
})

3. 实现登录

根据授权成功后的 code ，请求服务器接口进行登录，并获取用户信息。

// 在服务端将 code 换取为 openid 和 session_key
const res = await request('/api/user/login', { code });

// 根据 openid 和 session_key 获取用户信息
const userInfo = await request('/api/user/info', { openid, session_key });

4. 存储用户信息

将获取到的用户信息存储到本地或者服务器端，方便后续使用。

wx.setStorageSync('userInfo', userInfo);

5. 示例说明

示例1：获取用户头像和昵称

// index.js
Page({
  data: {
    userInfo: null,
  },
  onLoad() {
    const userInfo = wx.getStorageSync('userInfo');
    this.setData({ userInfo });
  },
  handleAuth() {
    wx.login({
      success: (res) => {
        if (res.code) {
          wx.request({
            url: 'https://example.com/api/user/login',
            method: 'POST',
            data: { code: res.code },
            success: (res) => {
              const { openid, session_key } = res.data;
              wx.request({
                url: 'https://example.com/api/user/info',
                method: 'POST',
                data: { openid, session_key },
                success: (res) => {
                  const userInfo = res.data;
                  wx.setStorageSync('userInfo', userInfo);
                  this.setData({ userInfo });
                }
              })
            }
          })
        }
      }
    });
  }
})

<!-- index.wxml -->
<view wx:if="{{userInfo}}">
  <image src="{{userInfo.avatarUrl}}"></image>
  <text>{{userInfo.nickName}}</text>
</view>
<button bindtap="handleAuth">一键登录</button>

示例2：展示用户积分

// index.js
Page({
  data: {
    userInfo: null,
    score: 0,
  },
  onLoad() {
    const userInfo = wx.getStorageSync('userInfo');
    this.setData({ userInfo });
    this.loadScore();
  },
  loadScore() {
    wx.request({
      url: 'https://example.com/api/user/score',
      data: { userId: this.data.userInfo.userId },
      success: (res) => {
        this.setData({ score: res.data.score });
      }
    })
  },
  handleAuth() {
    wx.login({
      success: (res) => {
        if (res.code) {
          wx.request({
            url: 'https://example.com/api/user/login',
            method: 'POST',
            data: { code: res.code },
            success: (res) => {
              const { openid, session_key } = res.data;
              wx.request({
                url: 'https://example.com/api/user/info',
                method: 'POST',
                data: { openid, session_key },
                success: (res) => {
                  const userInfo = res.data;
                  wx.setStorageSync('userInfo', userInfo);
                  this.setData({ userInfo });
                  this.loadScore();
                }
              })
            }
          })
        }
      }
    });
  }
})

<!-- index.wxml -->
<view wx:if="{{userInfo}}">
  <text>我的积分：{{score}}</text>
</view>
<button bindtap="handleAuth">一键登录</button>

以上示例仅供参考，具体实现需要根据自己的业务需求进行调整。