微信小程序（十三）实现我的登陆和注册

登录

1. 小程序登录流程

wx.getUserInfo

// 必须是在用户已经授权的情况下调用
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo
    var nickName = userInfo.nickName
    var avatarUrl = userInfo.avatarUrl
    var gender = userInfo.gender //性别 0：未知、1：男、2：女
    var province = userInfo.province
    var city = userInfo.city
    var country = userInfo.country
  }
})

可以做过测试，看下打印

bindWechatLogin:function(){

    wx.getSetting({
      success:res=>{
        console.log("wx.getSetting",res);
      }
    });

    // 必须是在用户已经授权的情况下调用
    wx.getUserInfo({
      success: (res=> {
        console.log("------获取登陆信息",res);
      })
    })
  },

2. 注意事项

wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，<button open-type="getUserInfo"/>
需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明

3. 打开用户设置

wx.openSetting({
      success:(res=>{
        console.log("------openSetting",res);

      })
    })

关于授权

完整例子

bindWechatLogin:function(){

    wx.getSetting({
      success:res=>{
        console.log("wx.getSetting----",res);
        if(res.authSetting['scope.userInfo']){
         // 必须是在用户已经授权的情况下调用
          wx.getUserInfo({
            success: res=> {
              console.log("------获取登陆信息",res);
            }
          });
        } else {
          wx.openSetting({
            success:res=>{
              console.log("------openSetting",res);
            }
          })
        }
      }
    });

点击头像上传

bindHead:function(){
    if(!this.data.userInfo){
      wx.showToast({
        title:'还没登录',
        icon:'none'
      })
      return;
    }
    wx.showActionSheet({
      itemList: ["查看我的头像","从相册选择"],
      success:res=>{
        console.log("showActionSheet",res);
        let index = res.tapIndex;
        if(index == 0) {
          urls:[this.data.head[0]]
        } else if(index == 1){
          wx.chooseImage({
            count: 1,
            sizeType:["compress"],
            sourceType:["album,camera"],
            success:res => {
              this.setData({
                head:res.tempFilePaths
              })
            }
          })
        }
      }
    })
  },

退出登录

bindLogout: function () {
    if (!this.data.userInfo) {
      wx.showToast({
        title: '还没有登陆',
        icon: 'none'
      })
      return;
    }
    api.unlogin().then(res => {
      wx.removeStorageSync('userInfo');
      wx.removeStorageSync('cookie');
      this.setData({
        userInfo: wx.getStorageSync('userInfo'),
        head: "/images/user_head.png"
      })
    })
  },

因为，在封装请求登陆判断，保存了cookie，所以退出，不但删除storage，还要清除cookie

2. 注册

界面和api我就不贴图了

bindNameInput: function(event) {
    this.setData({
      username: event.detail.value
    });
  },

  bindPwdInput: function(event) {
    this.setData({
      password: event.detail.value
    });
  },

  bindRePwdInput: function(event) {
    this.setData({
      repassword: event.detail.value
    });
  },

  bindRegister: function() {
    api.register({
      username: this.data.username,
      password: this.data.password,
      repassword: this.data.repassword
    }).then(res => {
      wx.setStorageSync("userInfo", res.data);
      wx.navigateBack({
        delta: 2
      });
    });
  },

几个关键点

1. input 字段值获取。event.detail.value
2. wx.setStorageSync("userInfo", res.data); 成功注册后和app一样保存用户信息
3. wx.navigateBack 跳回，delta 是跳转回来的层数。

多说一句，整个13篇文章，你一定多少感觉到了，微信小程序就是MVVM的实现。这个系列基本结束。