[移动开发]微信小程序登录注册流程（获取手机号）

手机号

这是采用微信小程序 静默登陆 无需用户手动输入 信息 只需点击按钮进行授权，便可获取到相关信息 进行一个用户的注册和登录
其实在这些登录流程中，前端能做的是比较少的，提供一个按钮去触发获取手机号 和用户信息 这里要分 两步授权
如果想要获取到用户手机号 和用户信息 这里是隔离操作 相当于 不能一个按钮就完成

业务需求是这样的：小程序点进来之后，需要获取手机号，发送到后台，再通过授权获取用户信息（头像和昵称），保存登录态

其实对登录态尚存在一些不理解之处 后面再补充

// 获取手机号
  getPhoneNumber(e) {
    var codeObj = e.detail.code;
    // 以下请求应该放在服务端，但是前端可以先进行初步测试
        wx.request({
          url: 'https://api.weixin.qq.com/cgi-bin/token', //接口地址
          data: {
            appid: "appid",  //需要开通企业账号权限  用测试号也行
            secret: "secret", // 这个测试号也有
            grant_type: "client_credential",//这个写死的
          },
          success: (obj) => {
          //会获取到token
            let token = obj.data.access_token
            wx.request({
              url: `https://api.weixin.qq.com/wxa/business/getuserphonenumber?access_token=${token}`,
              method:"post",
              data: {
                code:codeObj,
              },
              success:(phone)=>{
                 let phoneObj = phone.data.phone_info.phoneNumber;
                  console.log("手机号=", phoneObj)
                  wx.setStorage({ //存储数据并准备发送给下一页使用
                    key: "userPhone",
                    data: phoneObj,
                  })
              }
            })
          },
          fail: failObj => {
            console.log('获取手机号失败', failObj);
          }
        })
  },

获取手机号后 进入登录流程

上面只是单纯的拿到用户在微信端的手机号，并还没有进入到微信定义的“静默登录态”流程，传统的登录是由后端给的token去维护用户的登录态，微信小程序是微信根据用户使用时长去返回随机的token,这个目前对业务影响不大

  // 获取用户头像
  login() {
    // 获取用户头像信息
    wx.getUserProfile({
      desc: '用于完善用户资料',
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
        })
        wx.setStorageSync("userInfo", res.userInfo)
        // 确认同意获取用户头像之后 才会进入登录态
        wx.login({
          // 要改成箭头函数  不然没有this
          success: (loginRes) => {
            let code = loginRes.code
            console.log(loginRes);
            if (code) {
              this.getToken(code)
            }
          }
        });
      }
    })
  },
  // 获取token  获取到token之后  每次向后端发送请求都携带这个token就能知道这个用是谁  进行了哪些操作
  getToken(code) {
    wx.request({
      url: 'https://api.weixin.qq.com/sns/jscode2session',
      data: {
      appid: appid,
      secret: appSecret,
      js_code: code,
      grant_type: "authorization_code",
      },
      success: (res) => {
        try {
          if (res.data.ret) {
            wx.setStorageSync('token', res.data.token)
          }
        } catch (e) {
          wx.showToast({
            title: '登录失败',
          })
        }

      }
    })
  },

补充 ： 获取手机号的code和登录的code是两码事 官网也有说明