js怎么实现实现微信小程序简洁登录页面

发布时间：2022-01-13 21:09:24 作者：iii
来源：亿速云阅读：415

# JS怎么实现微信小程序简洁登录页面

## 目录
1. [前言](#前言)
2. [准备工作](#准备工作)
3. [页面布局设计](#页面布局设计)
4. [JS逻辑实现](#js逻辑实现)
5. [样式优化](#样式优化)
6. [完整代码示例](#完整代码示例)
7. [常见问题解决](#常见问题解决)
8. [总结](#总结)

## 前言

微信小程序作为轻量级应用平台，登录功能是大多数小程序的基础模块。本文将详细介绍如何使用JavaScript实现一个简洁高效的微信小程序登录页面，涵盖从UI设计到后端交互的全流程实现。

## 准备工作

### 1. 开发环境配置
- 安装微信开发者工具
- 注册小程序开发者账号
- 创建新项目（选择JavaScript基础模板）

### 2. 必要权限申请
在`app.json`中配置所需权限：
```json
{
  "permission": {
    "scope.userInfo": {
      "desc": "用于获取用户基本信息"
    }
  }
}

页面布局设计

1. WXML结构

<!-- pages/login/login.wxml -->
<view class="login-container">
  <image class="logo" src="/images/logo.png"></image>
  <text class="title">欢迎使用</text>
  
  <button 
    class="login-btn"
    open-type="getUserInfo"
    bindgetuserinfo="handleGetUserInfo">
    微信一键登录
  </button>
  
  <view class="agreement">
    <checkbox checked="{{isAgreed}}"></checkbox>
    <text>我已阅读并同意</text>
    <text class="link">《用户协议》</text>
    <text>和</text>
    <text class="link">《隐私政策》</text>
  </view>
</view>

2. 设计要点

采用居中布局
使用微信标准绿色作为主色调
保持界面元素间距一致（建议使用rpx单位）
协议条款需要明显但不过分突出

JS逻辑实现

1. 基础逻辑结构

// pages/login/login.js
Page({
  data: {
    isAgreed: false,
    canIUseGetUserProfile: false
  },

  onLoad() {
    // 兼容性检查
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  
  // 其他方法...
})

2. 用户授权处理（新老版本兼容）

// 新版获取用户信息方式
handleGetUserProfile() {
  wx.getUserProfile({
    desc: '用于完善会员资料',
    success: (res) => {
      this.loginWithCode(res.userInfo)
    },
    fail: (err) => {
      console.error('授权失败:', err)
    }
  })
},

// 旧版获取用户信息
handleGetUserInfo(res) {
  if (res.detail.userInfo) {
    this.loginWithCode(res.detail.userInfo)
  } else {
    wx.showToast({
      title: '需要您的授权才能继续',
      icon: 'none'
    })
  }
},

3. 登录流程核心代码

loginWithCode(userInfo) {
  if (!this.data.isAgreed) {
    wx.showToast({
      title: '请先阅读并同意协议',
      icon: 'none'
    })
    return
  }

  wx.showLoading({ title: '登录中...' })
  
  // 获取code
  wx.login({
    success: (res) => {
      if (res.code) {
        this.sendToBackend(res.code, userInfo)
      } else {
        wx.hideLoading()
        wx.showToast({ title: '登录失败', icon: 'error' })
      }
    },
    fail: () => {
      wx.hideLoading()
      wx.showToast({ title: '登录失败', icon: 'error' })
    }
  })
},

// 与后端交互
sendToBackend(code, userInfo) {
  wx.request({
    url: 'https://yourdomain.com/api/login',
    method: 'POST',
    data: {
      code: code,
      userInfo: userInfo
    },
    success: (res) => {
      wx.hideLoading()
      if (res.data.success) {
        // 存储登录状态
        wx.setStorageSync('token', res.data.token)
        wx.navigateBack()
      } else {
        wx.showToast({ title: res.data.message, icon: 'none' })
      }
    },
    fail: (err) => {
      wx.hideLoading()
      wx.showToast({ title: '网络错误', icon: 'none' })
    }
  })
}

样式优化

1. WXSS样式设计

/* pages/login/login.wxss */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  padding: 0 60rpx;
  box-sizing: border-box;
}

.logo {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
}

.title {
  font-size: 36rpx;
  color: #333;
  margin-bottom: 80rpx;
}

.login-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  background: #07C160;
  color: white;
  font-size: 32rpx;
  margin-bottom: 40rpx;
}

.agreement {
  display: flex;
  align-items: center;
  font-size: 24rpx;
  color: #999;
}

.link {
  color: #576B95;
  margin: 0 5rpx;
}

2. 动效增强

添加按钮点击反馈：

.login-btn:active {
  opacity: 0.8;
  transform: scale(0.98);
}

完整代码示例

1. 完整WXML

<view class="login-container">
  <image class="logo" src="/images/logo.png" mode="aspectFit"></image>
  <text class="title">欢迎使用{{appName}}</text>
  
  <block wx:if="{{canIUseGetUserProfile}}">
    <button 
      class="login-btn"
      bindtap="handleGetUserProfile">
      微信一键登录
    </button>
  </block>
  <block wx:else>
    <button 
      class="login-btn"
      open-type="getUserInfo"
      bindgetuserinfo="handleGetUserInfo">
      微信一键登录
    </button>
  </block>
  
  <view class="agreement">
    <checkbox checked="{{isAgreed}}" bindtap="toggleAgreement"></checkbox>
    <text>我已阅读并同意</text>
    <text class="link" bindtap="navigateToAgreement">《用户协议》</text>
    <text>和</text>
    <text class="link" bindtap="navigateToPrivacy">《隐私政策》</text>
  </view>
</view>

2. 完整JS

Page({
  data: {
    isAgreed: false,
    canIUseGetUserProfile: false,
    appName: '我的小程序'
  },

  onLoad() {
    if (wx.getUserProfile) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  
  toggleAgreement() {
    this.setData({
      isAgreed: !this.data.isAgreed
    })
  },
  
  navigateToAgreement() {
    wx.navigateTo({
      url: '/pages/agreement/agreement'
    })
  },
  
  navigateToPrivacy() {
    wx.navigateTo({
      url: '/pages/privacy/privacy'
    })
  },
  
  handleGetUserProfile() {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        this.loginWithCode(res.userInfo)
      },
      fail: (err) => {
        console.error('授权失败:', err)
        wx.showToast({
          title: '需要您的授权才能继续',
          icon: 'none'
        })
      }
    })
  },
  
  handleGetUserInfo(res) {
    if (res.detail.userInfo) {
      this.loginWithCode(res.detail.userInfo)
    } else {
      wx.showToast({
        title: '需要您的授权才能继续',
        icon: 'none'
      })
    }
  },
  
  loginWithCode(userInfo) {
    if (!this.data.isAgreed) {
      wx.showToast({
        title: '请先阅读并同意协议',
        icon: 'none'
      })
      return
    }

    wx.showLoading({ title: '登录中...' })
    
    wx.login({
      success: (res) => {
        if (res.code) {
          this.sendToBackend(res.code, userInfo)
        } else {
          wx.hideLoading()
          wx.showToast({ title: '登录失败', icon: 'error' })
        }
      },
      fail: () => {
        wx.hideLoading()
        wx.showToast({ title: '登录失败', icon: 'error' })
      }
    })
  },
  
  sendToBackend(code, userInfo) {
    // 这里替换为你的实际API地址
    wx.request({
      url: 'https://yourdomain.com/api/login',
      method: 'POST',
      data: {
        code: code,
        userInfo: userInfo
      },
      success: (res) => {
        wx.hideLoading()
        if (res.data.success) {
          wx.setStorageSync('token', res.data.token)
          wx.setStorageSync('userInfo', userInfo)
          
          // 登录成功后跳转
          const pages = getCurrentPages()
          if (pages.length > 1) {
            wx.navigateBack()
          } else {
            wx.switchTab({
              url: '/pages/index/index'
            })
          }
        } else {
          wx.showToast({ 
            title: res.data.message || '登录失败', 
            icon: 'none' 
          })
        }
      },
      fail: (err) => {
        wx.hideLoading()
        wx.showToast({ title: '网络错误', icon: 'none' })
      }
    })
  }
})

常见问题解决

1. 授权弹窗不显示

检查open-type是否正确设置为getUserInfo
确保bindgetuserinfo事件绑定正确
在真机上测试（开发者工具可能表现不同）

2. 登录状态维护

建议使用以下方案：

// app.js
App({
  onLaunch() {
    this.checkLogin()
  },
  
  checkLogin() {
    const token = wx.getStorageSync('token')
    if (!token) {
      wx.redirectTo({
        url: '/pages/login/login'
      })
    }
  }
})

3. 样式适配问题

使用rpx代替px实现响应式布局
添加安全区域适配：

.login-container {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

总结

本文详细介绍了微信小程序登录页面的完整实现流程，包括： 1. 界面布局设计与实现 2. 新旧授权API的兼容处理 3. 登录状态管理与后端交互 4. 常见问题解决方案

通过以上实现，我们得到了一个符合微信设计规范、用户体验良好的登录页面。实际开发中，还需要根据具体业务需求进行调整，例如添加手机号登录、第三方登录等扩展功能。

最佳实践建议： 1. 始终处理用户拒绝授权的场景 2. 做好加载状态管理 3. 协议条款必须可点击查看详情 4. 定期检查微信API更新情况

希望本文能帮助你快速实现高质量的微信小程序登录功能！ “`