小程序分析

Posted 2020-12-08 Akby

封装登录功能：模板复用方式

通过 wxlogin（布尔值）状态来处理是否登录，以及显示和隐藏

检测登录状态的方法

一、 登录：

1. 允许授权：

//处理允许登录的功能 processLogin(e) { console.log(‘点击允许获取用户信息：‘,e) if (!e.detail.userInfo) { wx.showToast({ title: ‘已取消‘, icon: ‘none‘, }) return; }

//调用register方法将用户信息存入后台数据库
AUTH.register(this);

},

//存入用户数据到后台数据库 async function register(page) { console.log(‘register::::‘,this) let _this = this;

//调用wx.login获取code凭证 wx.login({
success: function (res) { let code = res.code; // 微信登录接口返回的 code 参数，下面注册接口需要用到

  //获取用户信息
  wx.getUserInfo({
    success: function (res) {
      console.log(‘wx.getUserInfo:‘,res)
      let iv = res.iv;
      let encryptedData = res.encryptedData;
      let referrer = ‘‘ // 推荐人
      let referrer_storge = wx.getStorageSync(‘referrer‘);
      if (referrer_storge) {
        referrer = referrer_storge;
      }
      // 下面开始调用注册接口，写入后台数据库
      //接口文档：https://api.it120.cc/doc.html#/%E5%89%8D%E7%AB%AFapi%E6%8E%A5%E5%8F%A3%E6%96%87%E6%A1%A3/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/registerComplexUsingPOST_15


      WXAPI.register_complex({
        code: code,
        encryptedData: encryptedData,
        iv: iv,
        referrer: referrer
      }).then(function (res) {

        //写入数据库成功后，调用自己封装的login方法
        _this.login(page);
      })
    }
  })
}

}) }

//login登录方法,从后台数据库读取用户写，并onshow重新展示

async function login(page){ const _this = this wx.login({ success: function (res) { console.log(‘开始登录啦！‘,res) WXAPI.login_wx(res.code).then(function (res) {
console.log(‘获取code‘,res)
if (res.code == 10000) { // 去注册 //_this.register(page) return; } if (res.code != 0) { // 登录错误 wx.showModal({ title: ‘无法登录‘, content: res.msg, showCancel: false }) return; } wx.setStorageSync(‘token‘, res.data.token) wx.setStorageSync(‘uid‘, res.data.uid) if ( page ) { page.onShow() } }) } }) }

2.// 检测登录状态，返回 true / false async function checkHasLogined() { const token = wx.getStorageSync(‘token‘) if (!token) { return false } const loggined = await checkSession() if (!loggined) { wx.removeStorageSync(‘token‘) return false } const checkTokenRes = await WXAPI.checkToken(token) if (checkTokenRes.code != 0) { wx.removeStorageSync(‘token‘) return false } return true }

3. 获取用户信息： _this.getUserApiInfo();

   //获取登录后的用户信息 getUserApiInfo: function () { var that = this;

   //获取用户信息，当然可以自己封装userDetail接口来获取 WXAPI.userDetail(wx.getStorageSync(‘token‘)).then(function (res) { console.log(‘用户详情：：：‘,res); if (res.code == 0) { let _data = {} _data.apiUserInfoMap = res.data if (res.data.base.mobile) { _data.userMobile = res.data.base.mobile } if (that.data.order_hx_uids && that.data.order_hx_uids.indexOf(res.data.base.id) != -1) { _data.canHX = true // 具有扫码核销的权限 } that.setData(_data); } })

展现到个人中心的页面上（包括用户名和头像）

4.登录后获取个人资产： _this.getUserAmount();

//封装用户个人资产方法（包括余额，积分。。。。。） getUserAmount: function () { var that = this;

//调用封装的获取用户信息的请求接口，也可自己按照咱们自己的封装去请求
WXAPI.userAmount(wx.getStorageSync(‘token‘)).then(function (res) {
  console.log(‘用户‘,res)
  if (res.code == 0) {
    that.setData({
      balance: res.data.balance.toFixed(2),  //处理成保留两位小数的余额
      freeze: res.data.freeze.toFixed(2),
      score: res.data.score,
      growth: res.data.growth
    });
  }
})

}

退出登录：

loginOut(){

//清缓存
AUTH.loginOut()

//跳转到我的页面
wx.reLaunch({
  url: ‘/pages/my/index‘
})

}