模拟用户登录

1. App()函数

1.1 什么是App()函数

若要在微信小程序启动、显示、隐藏时执行某些操作，或者在各个页面中需要共享一些数据时，可以通过App()函数实现。App()函数用于注册一个微信小程序，该函数必须在app.js文件中调用，且只能调用一次。

App()函数的参数是一个对象，通过该对象可以指定应用生命周期回调函数和保存一些共享数据。

1.2 应用生命周期函数

应用生命周期函数是指微信小程序“启动→运行→销毁”期间依次调用的函数。

1.3 应用生命周期回调函数

1.4 演示App实例的获取

// getApp()函数获取微信小程序全局唯一的App实例
const app = getApp()

通过getApp()函数获取App实例之后，可以访问App实例的属性或调用App实例的方法。

注意：
定义在App()函数的参数{ }中的方法，可以直接使用this获取App实例，不必使用getApp()函数。

2 编写“用户登录”微信小程序

2 .1 准备工作

创建项目: 创建一个新的微信小程序项目，项目名称为“用户登录”，模板选择“不使用模板”。
配置导航栏： 在 pages/index/index.json 文件中配置页面导航栏。
复制素材： 复制 pages/index/index.wxss 文件和 images 文件夹。
启动服务器： 进入“服务器端”文件夹，在 index.js 文件的 wx 对象中填写自己的 appid 和 appsecret。执行命令启动服务器 node index.js 。

2.2 实现小程序启动时自动执行登录操作步骤

1. 定义页面所需的数据;
2. 在微信小程序启动时调用login()方法实现自动登录；
3. 在微信开发者工具的本地设置中勾选“不校验合法域名、web-view（业务域名）、TLS版本以及HTTPS证书”复选框。

运行程序，微信小程序控制台输出结果、服务器控制台输出结果如下图所示

微信小程序控制台输出结果：获得了login code并收到了服务器返回的token，说明登录成功。

服务器控制台输出结果：获取到login code和session，并且session中包含session_key和openid，说明用户登录凭证code验证成功。

2.3 程序代码

2.3.1 app.js 文件代码

在 app.js 文件中编写如下代码信息：

// app.js
App({
  onLaunch: function () {
    this.checkLogin(res => {
      console.log('is_login: ', res.is_login)
      if (!res.is_login) {
        this.login()
      }
    })
  },
  login: function () {
    wx.login({
      success: res => {
        console.log('login code: ' + res.code)
        wx.request({
          url: 'http://127.0.0.1:3000/login',
          method: 'post',
          data: {
            code: res.code
          },
          success: res => {
            console.log('token: ' + res.data.token)
            // 将token保存为公共 数据，用于在所有页面中共享token
            this.globalData.token = res.data.token
            // 将token保存到数据缓存
            wx.setStorage({
              key: 'token',
              data: res.data.token
            })
          }
        })
      }
    })
  },
  checkLogin: function (callback) {
    var token = this.globalData.token
    if (!token) {
      // 从数据缓存中获取token
      token = wx.getStorageSync('token')
      if (token) {
        this.globalData.token = token
      } else {
        callback({ is_login: false })
        return
      }
    }
    wx.request({
      url: 'http://127.0.0.1:3000/checklogin',
      data: { token: token },
      success: res => {
        callback({ is_login: res.data.is_login })
      }
    })
  }, 
  // 定义页面所需的数据 
  globalData: {
    token: null // 保存token
  }
})

2.3.2 编写 index.wxss 文件

在pages/index/index.wxss 文件中编写如下代码：

/**index.wxss**/
.avatar-wrapper {
  width: 160rpx;
  height: 160rpx;
  padding: 0;
  background: none;
}

.avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 20rpx;
}

.nickname {
  width: 80%;
  height: 100rpx;
  margin: 20px auto;
  border: 1px solid #000000;
  text-align: center;
}

2.3.3 编写 index.wxml 文件

在 pages/index/index.wxml文件中编写如下代码：

<!--index.wxml-->
<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  <image class="avatar" src="{{ avatarUrl }}"></image>
</button>
<input type="nickname" class="nickname" placeholder="请输入昵称" />

<button bindtap="credit">获取用户的积分</button>

2 .3.4 编写 index.wxml 文件

// index.js
const app = getApp()
const defaultAvatar = '/images/avatar.png'
Page({
  data: {
    avatarUrl: defaultAvatar,
  },

  credit: function () {
    wx.request({
      url: 'http://127.0.0.1:3000/credit',
      data: {
        token: app.globalData.token
      },
      success: res => {
        console.log(res.data)
      }
    })
  },
  onChooseAvatar: function (e) {
    console.log(e)
    const { avatarUrl } = e.detail
    this.setData({ avatarUrl })
  },  
})