index.wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 登陆组件弹窗 -->
<van-popup show="{{ loginBtn }}" round position="bottom" custom-style="height: 24%" bind:close="onClose" duration="246">
  <view class="loginPanel">
    <view class="panel-title">我想要你的头像和昵称，可以嘛~</view>
    <view class="panel-btns">
      <van-button type="info" round bind:click="onClose">不可以</van-button>
      <van-button type="primary" round bind:click="_login">好的</van-button>
    </view>
  </view>
</van-popup>
<!-- 内容 -->
<block wx:if="{{!loginShow}}">
  <view class="loginok">
    <view>韩小韩博客 wwww.vvhan.com</view>
    <view>登录成功</view>
    <image src="{{userInfo.avatarUrl}}" mode="widthFix" />
    <view>Nick：{{userInfo.nickName}}</view>
    <view>OpenId：{{userInfo.openid}}</view>
  </view>
</block>
<block wx:else>
  <van-button class="loginbtn" plain type="info" bind:click="onClose">点击登录</van-button>
</block>

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const app = getApp();
Page({
  data: {
    // 登陆按钮现实隐藏
    loginBtn: false,
    // 全局是否登陆
    loginShow: false,
    // 用户信息
    userInfo: {},
  },
  async onLoad() {
    const _res = await app._checkLogin();
    this.setData({
      loginBtn: _res,
      loginShow: _res,
      userInfo: app.globalData.userInfo,
    });
  },
  // 登陆
  async _login() {
    const _res = await app._getUserInfo();
    _res &&
      this.setData({
        userInfo: app.globalData.userInfo,
        loginBtn: false,
      }),
      this.onLoad();
  },
  // 关闭登陆弹窗
  onClose(e) {
    this.setData({
      loginBtn: e.type == "click" ? !this.data.loginBtn : false,
    });
  },
});

app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
App({
  onLaunch: function () {
    // 全局变量
    this.globalData = {
      openId: wx.getStorageSync('openId'),
      userInfo: wx.getStorageSync('userInfo')
    };
    if (!wx.cloud) {
      console.error('请使用 2.2.3 或以上的基础库以使用云能力');
    } else {
      wx.cloud.init({
        // env 参数说明：
        //   env 参数决定接下来小程序发起的云开发调用（wx.cloud.xxx）会默认请求到哪个云环境的资源
        //   此处请填入环境 ID, 环境 ID 可打开云控制台查看
        //   如不填则使用默认环境（第一个创建的环境）
        // env: 'my-env-id',
        traceUser: true,
      });
    }
    // 微信小程序获取版本更新
    const updateManager = wx.getUpdateManager()
    updateManager.onCheckForUpdate(function (res) {
      // 请求完新版本信息的回调
    })
    updateManager.onUpdateReady(function () {
      wx.showModal({
        title: '小韩提示',
        content: '新版来袭，速来体验！',
        success: function (res) {
          if (res.confirm) {
            updateManager.applyUpdate()
          }
        }
      })
    })
    updateManager.onUpdateFailed(function () {
      // 新版本下载失败
    });

    // 获取OpedId
    this._getOpenId()
  },
  // 获取用户OpenId
  _getOpenId() {
    ((this.globalData.openId || '') == '') && wx.cloud.callFunction({
      name: 'login'
    }).then(res => {
      this.globalData.openId = res.result.openid;
      wx.setStorageSync('openId', res.result.openid)
    }).catch(res => {
      console.error(res)
    });
  },
  // 判断是否登陆
  async _checkLogin() {
    const _this = this
    return new Promise((resolve) => {
      wx.checkSession({
        success: function (_res) {
          const _userInfo = wx.getStorageSync('userInfo');
          resolve((_userInfo || '') === '')
        },
        fail: async function (_res) {
          await wx.login({})
          resolve(true)
        }
      })
    })
  },
  // 获取用户信息并存储
  async _getUserInfo() {
    return new Promise((resolve) => {
      wx.getUserProfile({
        desc: 'get用户信息',
        success: async res => {
          res.userInfo.openid = this.globalData.openId
          this.globalData.userInfo = res.userInfo
          wx.setStorageSync('userInfo', res.userInfo)
          resolve(true)
        },
        fail: () => {
          resolve(false)
        }
      });
    })
  },
});
});