小程序登录

app.js 

const api = require('./config/config.js');

App({

// 小程序启动生命周期

onLaunch: function () {

let that = this;

// 检查登录状态

that.checkLoginStatus();

},

// 检查本地 storage 中是否有登录态标识

checkLoginStatus: function () {

let that = this;

let loginFlag = wx.getStorageSync('loginFlag');

if (loginFlag) {

// 检查 session_key 是否过期

wx.checkSession({

// session_key 有效(为过期)

success: function () {

// 直接从Storage中获取用户信息

let userStorageInfo = wx.getStorageSync('userInfo');

if (userStorageInfo) {

that.globalData.userInfo = JSON.parse(userStorageInfo);

} else {

that.showInfo('缓存信息缺失');

console.error('登录成功后将用户信息存在Storage的userStorageInfo字段中，该字段丢失');

}

},

// session_key 过期

fail: function () {

// session_key过期

that.doLogin();

}

});

} else {

// 无登录态

that.doLogin();

}

},

// 登录动作

doLogin: function (callback = () => { }) {

let that = this;

wx.login({

success: function (loginRes) {

if (loginRes.code) {

/*

* @desc: 获取用户信息 期望数据如下

*

* @param: userInfo [Object]

* @param: rawData [String]

* @param: signature [String]

* @param: encryptedData [String]

* @param: iv [String]

**/

wx.getUserInfo({

withCredentials: true, // 非必填, 默认为true

success: function (infoRes) {

console.log(infoRes, '>>>')

// 请求服务端的登录接口

wx.request({

url: '’,

data: {

code: loginRes.code, // 临时登录凭证

rawData: infoRes.rawData, // 用户非敏感信息

signature: infoRes.signature, // 签名

encryptedData: infoRes.encryptedData, // 用户敏感信息

iv: infoRes.iv // 解密算法的向量

},

success: function (res) {

console.log('login success');

res = res.data;

if (res.result == 0) {

that.globalData.userInfo = res.userInfo;

wx.setStorageSync('userInfo', JSON.stringify(res.userInfo));

wx.setStorageSync('loginFlag', res.skey);

callback();

} else {

that.showInfo(res.errmsg);

}

},

fail: function (error) {

// 调用服务端登录接口失败

that.showInfo('调用接口失败');

console.log(error);

}

});

},

fail: function (error) {

// 获取 userInfo 失败，去检查是否未开启权限

wx.hideLoading();

that.checkUserInfoPermission();

}

});

} else {

// 获取 code 失败

that.showInfo('登录失败');

console.log('调用wx.login获取code失败');

}

},

fail: function (error) {

// 调用 wx.login 接口失败

that.showInfo('接口调用失败');

console.log(error);

}

});

},

// 检查用户信息授权设置

checkUserInfoPermission: function (callback = () => { }) {

wx.getSetting({

success: function (res) {

if (!res.authSetting['scope.userInfo']) {

wx.openSetting({

success: function (authSetting) {

console.log(authSetting)

}

});

}

},

fail: function (error) {

console.log(error);

}

});

},

// 获取用户登录标示 供全局调用

getLoginFlag: function () {

return wx.getStorageSync('loginFlag');

}, 

// 封装 wx.showToast 方法

showInfo: function (info = 'error', icon = 'none') {

wx.showToast({

title: info,

icon: icon,

duration: 1500,

mask: true

});

},

// app全局数据

globalData: {

userInfo: null

}

});

index.js

/** index.js **/

//获取app实例
const app = getApp();

Page({
  data: {
    userInfo: {},   // 用户信息
    hasLogin: wx.getStorageSync('loginFlag')
      ? true
      : false     // 是否登录，根据后台返回的skey判断
  },

  // 检查本地 storage 中是否有skey登录态标识
  checkLoginStatus: function () {

    let that = this;

    let loginFlag = wx.getStorageSync('loginFlag');

    if (loginFlag) {
      // 检查 session_key 是否过期
      wx.checkSession({
        // session_key 有效(未过期)
        success: function () {
          // 获取用户头像/昵称等信息
          that.getUserInfo();
        },

        // session_key 已过期
        fail: function () {
          that.setData({
            hasLogin: false
          });
        }
      });

    } else {
      that.setData({
        hasLogin: false
      });
    }
  },

  /**
   * 执行登录操作
   */
  doLogin: function () {
    let that = this;
    wx.showLoading({
      title: '登录中...',
      mask: true
    });
    app.doLogin(that.getUserInfo);
  },

  
  /**
   * 从 globalData 中获取 userInfo
   */
  getUserInfo: function () {
    let that = this;

    let userInfo = app.globalData.userInfo;

    console.info('userInfo is:', userInfo);

    if (userInfo) {
      that.setData({
        hasLogin: true,
        userInfo: userInfo
      });
      wx.hideLoading();
    } else {
      console.log('globalData中userInfo为空');
    }
  },
  /**
     * 跳转到关注的活动，这里如果还没登录，就显示弹窗说清先登录，如果已经登录了就再显示已关注活动页面
     */
  attentionActivity: function () {
    // let hasLogin = this.data.hasLogin
    let hasLogin = !this.data.hasLogin
    if (hasLogin) {
      wx.navigateTo({
        url: '../../pages/attentionactivity/attentionactivity',
      })
    } else {
      app.showInfo('亲，请先登录再查看');
    }
  },
  management: function () {
    //这里我假定hasLogin是true，实际这里hasLogin是false的，因为还没有端口，发送请求失败
    let hasLogin = !this.data.hasLogin
    if (hasLogin) {
      wx.navigateTo({
        url: '../../pages/management/management',
      })
    } else {
      app.showInfo('亲，请先登录再查看');
    }
  },
  onLoad: function () {
    this.checkLoginStatus();
  },

  onShow: function () {
    let that = this;
    that.setData({
      userInfo: app.globalData.userInfo
    });
  }
})

index.html

<!--index.wxml-->
<view class="user-container bg-white">

  <view class="userinfo">

    <block wx:if="{{!hasLogin}}">
      <image class="userinfo-avatar" src="../../images/unlogin.png" background-size="cover" catchtap="doLogin"></image>
      <text class="userinfo-nickname">点击登录</text>
    </block>

    <block wx:else>
      <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>

  </view>

</view>
<view class="tab-container">

  <view class='tab-item' catchtap='attentionActivity'>
    <view>
      <image src="../../images/211铃铛.png" mode="aspectFit" class="tab-icon"></image>
    </view>
    <view>
      关注的活动
    </view>
    <view>
      <image src="../../images/三角形.png" mode="aspectFit" class="tab-icon"></image>
    </view>


  </view>
  <view class='tab-item'>
    <view>
      <image src="../../images/感叹号.png" mode="aspectFit" class="tab-icon"></image>
    </view>
    <view>
    我的失物招领
    </view>
    <view>
      <image src="../../images/三角形.png" mode="aspectFit" class="tab-icon"></image>
    </view>
  </view>
  <view class='tab-item'>
    <view>
      <image src="../../images/添加.png" mode="aspectFit" class="tab-icon"></image>
    </view>
    <view>
  发布活动
    </view>
    <view>
      <image src="../../images/三角形.png" mode="aspectFit" class="tab-icon"></image>
    </view>
  </view>
  <view class='tab-item' catchtap='management'>
    <view>
      <image src="../../images/闹钟.png" mode="aspectFit" class="tab-icon"></image>
    </view>
    <view>
      管理
    </view>
    <view>
      <image src="../../images/三角形.png" mode="aspectFit" class="tab-icon"></image>
    </view>
  </view>
  <view class='tab-item'>
    <view>
      <image src="../../images/信封.png" mode="aspectFit" class="tab-icon"></image>
    </view>
    <view>
    关于我们
    </view>
    <view>
      <image src="../../images/三角形.png" mode="aspectFit" class="tab-icon"></image>
    </view>


  </view>
  


</view>
<!-- <view class="tab-container bg-white">

    <view class="tab-item border-bottom">
        <view>
            <image src="../../images/211铃铛.png" mode="aspectFit" class="tab-icon"></image>
            <text class="tab-text">关注的活动</text>

        </view>
        
        <text class="tab-text" wx:if="{{hasLogin}}">{{userInfo.balance}}</text>
        <text class="tab-text" wx:else></text>
    </view>

    <view class="tab-item" hover-class="tab-item-hover" catchtap="goMyBooks">
        <view>
            <image src="../../images/down.png" mode="aspectFit" class="tab-icon"></image>
            <text class="tab-text">已购</text>
        </view>
        
        <view class="tab-arrow"></view>
    </view>
</view> -->