微信小程序用户登录代码

以下是微信小程序用户登录的代码示例：

在app.js中定义全局变量

App({
  globalData: {
    userInfo: null
  }
})

在登录页面的js文件中编写登录函数

// 获取应用实例
const app = getApp()

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse) {
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function (e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

在登录页面的wxml文件中添加登录按钮

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo">获取头像昵称</button>
    <block wx:if="{{hasUserInfo}}">
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
</view>

在app.json文件中添加权限设置

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/login/login"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

以上就是微信小程序用户登录的代码示例，可以根据实际需求进行修改和完善。

在登录页面的wxss文件中添加样式

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
  margin-bottom: 16rpx;
}

.userinfo-nickname {
  font-size: 28rpx;
}

在app.js中添加登录函数

// 登录
wx.login({
  success: res => {
    // 发送 res.code 到后台换取 openId, sessionKey, unionId
    wx.request({
      url: 'https://example.com/login',
      data: {
        code: res.code
      },
      success: res => {
        // 登录成功，保存用户信息到全局变量
        app.globalData.userInfo = res.data.userInfo
        // 跳转到首页
        wx.switchTab({
          url: '/pages/index/index',
        })
      }
    })
  }
})

在后台服务器中处理登录请求，获取用户信息并返回给小程序

// 登录接口
app.post('/login', async (req, res) => {
  const { code } = req.body
  const { openid, session_key } = await getOpenidAndSessionKey(code)
  const userInfo = await getUserInfo(openid)
  res.json({
    openid,
    session_key,
    userInfo
  })
})

// 获取openid和session_key
function getOpenidAndSessionKey(code) {
  return new Promise((resolve, reject) => {
    wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
        appid: 'your appid',
        secret: 'your secret',
        js_code: code,
        grant_type: 'authorization_code'
      },
      success: res => {
        resolve(res.data)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

// 获取用户信息
function getUserInfo(openid) {
  return new Promise((resolve, reject) => {
    // 根据openid从数据库中获取用户信息
    // 如果用户不存在，则创建一个新用户并返回
    // 如果用户存在，则返回用户信息
    resolve({
      nickname: '小明',
      avatarUrl: 'https://example.com/avatar.jpg'
    })
  })
}

以上就是微信小程序用户登录的完整代码示例，包括前端和后端的代码。需要注意的是，实际开发中还需要考虑用户授权、登录态维护、安全性等问题，需要根据实际情况进行完善。