微信小程序 登录、动态tabBar

1. 登录

1）微信环境中登录 2）企业微信中登录

调微信的登录接口 -> 返回code -> 用code请求接口拿到openId -> 用手机号（微信返回加密的encryptedData）和openid 拿到token -> 登陆成功

2. 动态tabBar

实乃小程序之大坑！！！qswl！！！ 注：使用了自定义tabbar则 wx.hideTabBar()和wx.showTabBar()失效，可以通过单独设置路由来隐藏tabBar也可以通过js控制

1）手写 2）官方使用custom-tab-bar

两种都尝试了，最后还是选择了手写。 一、手写 用自带的 UI组件写样式，相当于写两套主页，就是不用小程序的任何东西，纯手写。 二、官方推荐自定义tabBar（由于项目用的是tsx，并且是类组件，不是components，所以传值不方便，而且有很多奇 奇怪怪的异常报错...） 新建一个与pages同级的 custom-tab-bar 文件夹 (可以去github上直接拿demo)

index.js

Component({
  data: {
    selected: 0,
    color: '#CECECE',
    selectedColor: '#476853',
    backgroundColor: '#FFFFFF',
    borderStyle: 'black',
    list: [],
    studentTabList: [
      {
        pagePath: '/pages/home/index/index', // 注意这里的路径与app.config不同，一定要带 /
        iconPath: '/assets/footer-bar/home.png', // 注意这里的路径与app.config不同，一定要带 /
        selectedIconPath: '/assets/footer-bar/home_active.png', // 同上
        text: '课程'
      },
    ],
    teacherTabList: [
      {
        pagePath: '/pages/home/index/index',
        iconPath: '/assets/footer-bar/table.png',
        selectedIconPath: '/assets/footer-bar/table_active.png',
        text: '课程表'
      },
      {
        pagePath: '/pages/user/index/index',
        iconPath: '/assets/footer-bar/user.png',
        selectedIconPath: '/assets/footer-bar/user_active.png',
        text: '我的'
      }
    ]
  },
  attached() {
    // 在组件实例进入页面节点树时执行
    let type = wx.getStorageSync('type') || 'teacher' // 登录之后拿到登录者身份 学生或老师
    if (type == 'student') {
      this.setData({
        list: this.data.studentTabList
      })
    } else {
      this.setData({
        list: this.data.teacherTabList
      })
    }
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({ url })
      this.setData({
        selected: data.index
      })
    }
  }
})

app.config.js

  tabBar: {
    custom: true,
    color: '#CECECE',
    selectedColor: '#476853',
    backgroundColor: '#FFFFFF',
    borderStyle: 'black',
    list: [ // 所有可能的tabBar
      {
        pagePath: 'pages/home/index/index',
        iconPath: 'assets/footer-bar/table.png',
        selectedIconPath: 'assets/footer-bar/table_active.png',
        text: '课程表'
      },
      {
        pagePath: 'pages/home/index/index',
        iconPath: 'assets/footer-bar/home.png',
        selectedIconPath: 'assets/footer-bar/home_active.png',
        text: '课程'
      },
      {
        pagePath: 'pages/user/index/index',
        iconPath: 'assets/footer-bar/user.png',
        selectedIconPath: 'assets/footer-bar/user_active.png',
        text: '我的'
      }]
  }
}