微信小程序登录功能实现方案

1. 打开即弹出授权登录

// app.js
App({
  onLaunch() {
    this.checkAuth()
  },
  checkAuth() {
    wx.getSetting({
      success: res => {
        if (!res.authSetting['scope.userInfo']) {
          wx.redirectTo({ url: '/pages/login/login' })
        } else {
          this.getUserProfile()
        }
      }
    })
  }
})

2. 取消登录与点击登录逻辑

<!-- login.wxml -->
<button wx:if="{{!userInfo}}" open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登录</button>
<button wx:else bindtap="logout">退出登录</button>

// login.js
Page({
  data: { userInfo: null },
  
  onGetUserInfo(e) {
    if (e.detail.userInfo) {
      // 同意授权
      this.loginSuccess(e.detail.userInfo)
    } else {
      // 取消授权
      wx.showToast({ title: '已取消登录', icon: 'none' })
    }
  },
  
  logout() {
    this.setData({ userInfo: null })
    // 清除store中的用户信息
    getApp().globalData.userInfo = null
  }
})

3. 用户信息存储到store

// store.js
const store = {
  state: {
    userInfo: wx.getStorageSync('userInfo') || null
  },
  setUserInfo(userInfo) {
    this.state.userInfo = userInfo
    wx.setStorageSync('userInfo', userInfo)
  }
}
export default store

4. 修改用户信息与渲染

// profile.js
import store from '../../store'

Page({
  onLoad() {
    this.setData({ user: store.state.userInfo })
  },
  
  updateUser() {
    wx.getUserProfile({
      desc: '更新用户资料',
      success: res => {
        store.setUserInfo(res.userInfo)
        this.setData({ user: res.userInfo })
      }
    })
  }
})

5. 取消登录显示默认信息

// home.js
Page({
  data: {
    user: {
      nickName: '游客',
      avatarUrl: '/images/default-avatar.png'
    }
  },
  
  onShow() {
    if (store.state.userInfo) {
      this.setData({ user: store.state.userInfo })
    }
  }
})

6. 购物车关联store

// cart.js
import store from '../../store'

Page({
  data: { cartItems: [] },
  
  addToCart(item) {
    store.state.cart.push(item)  // 全局购物车
    this.setData({ cartItems: store.state.cart })
  }
})

7. 分包配置与预下载

// app.json
{
  "pages": [
    "pages/home/home",
    "pages/login/login"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": ["pages/cart/cart", "pages/profile/profile"]
    }
  ],
  "preloadRule": {
    "pages/home/home": {
      "network": "all",
      "packages": ["packageA"]
    }
  }
}

关键实现说明：

1. 授权流程：使用wx.getSetting检测授权状态，未授权时跳转登录页
2. 全局状态管理：通过globalData和本地存储实现简易store
3. 用户信息处理：
   • 授权成功：更新store和页面数据
   • 取消授权：保持默认状态
   • 退出登录：清除存储数据
4. 购物车关联：所有页面共享store中的购物车数据
5. 分包优化：
   • 购物车和个人中心独立分包
   • 首页预加载分包资源
   • 分包大小控制在2MB内

注意：2022年起微信调整用户信息获取策略，需使用<button open-type="getUserInfo">组件触发授权，直接调用wx.getUserInfo不再返回敏感信息。