# 实战篇 6：心情签到页面开发

「新鲜天气」的心情签到页面结构比较简单，本小节主要介绍三部分内容：

使用日历插件
用户授权和登录流程
使用小程序云开发的数据库功能

# 使用日历插件

心情签到页面最重要的模块就是日历，日历使用了一个开源的日历插件，在小程序内使用插件需要经过下面三步。

# 1. 在小程序管理后台添加三方服务插件

登录小程序管理后台，依次进入「设置 -> 第三方服务」搜索日历插件的 AppID（wx92c68dae5a8bb046）就可以搜索到「极点日历」，这时候申请授权即可。

# 2. 在 app.json 中增加插件配置

第二步是在项目的 app.json 中增加 plugins 字段内容：

"plugins": {
    "calendar": {
        "version": "1.1.3",
        "provider": "wx92c68dae5a8bb046"
    }
}

@前端进阶之旅: 代码已经复制到剪贴板

# 3. 在 diary 页面增加组件配置

在 pages/diary/index.json 的页面配置中的 usingComponents 里增加 calendar 的插件地址：

{
  "usingComponents": {
    "calendar": "plugin://calendar/calendar",
    "icon": "../../components/icon/index"
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

经过上面三步之后，我们就可以在页面中使用 <calendar /> 标签了。具体日历的用法，可以参考它的 wiki 主页。

# 设置日历的心情颜色

在心情设置上，笔者设计了 5 种心情，由 5 种颜色来表示，具体数值如下：

// client/pages/diary/index.js Page data
emotions: ['serene', 'hehe', 'ecstatic', 'sad', 'terrified'],
colors: {
  serene: '#64d9fe',
  hehe: '#d3fc1e',
  ecstatic: '#f7dc0e',
  sad: '#ec238a',
  terrified: '#ee1aea'
}

@前端进阶之旅: 代码已经复制到剪贴板

签到不同的心情，最终在日历上会展现出下面的效果：

要在某天设置该天的背景颜色，需要使用日历的 days-color 属性，这里笔者将 days-color 与 daysStyle 进行绑定：

<!--diary/index.wxml-->
<calendar days-color="{{daysStyle}}" />

@前端进阶之旅: 代码已经复制到剪贴板

daysStyle 的计算和赋值是在 setCalendarColor 方法内的：

// diary/index.js
setCalendarColor(year, month) {
  year = year || new Date().getFullYear()
  month = month || new Date().getMonth() + 1
  // 从数据库读取数据
  getEmotionByOpenidAndDate(this.data.openid, year, month)
    .then((r) => {
      const data = r.data || []
      const styles = []
      const now = new Date()
      const today = dateFormat(now)
      let todayEmotion = ''
      let colors = this.data.colors
      // 遍历日期，存在表情的日期则设置对应的颜色
      data.forEach((v) => {
        let ts = v.tsModified
        let date = new Date(ts)
        let day = date.getDate()
        if (today === dateFormat(date)) {
          todayEmotion = v.emotion || ''
        }
        styles.push({
          month: 'current',
          day,
          color: 'black',
          background: colors[v.emotion]
        })
      })
      // 设置 daysStyle
      this.setData({
        lastMonth: `${year}-${('00' + month).slice(-2)}`,
        showPublish: true,
        todayEmotion,
        daysStyle: styles
      })
    })
    .catch((e) => {
      wx.showToast({
        title: '加载已签数据失败，请稍后再试',
        icon: 'none',
        duration: 3000
      })
    })
}

@前端进阶之旅: 代码已经复制到剪贴板

# 日历事件绑定

当日历切换月份的时候，我们应该获取当前切换到的月份，获取当前月份的心情数据，所以在 calendar 上绑定 dateChange 事件：

<!--diary/index.wxml-->
<calendar binddateChange="dateChange" />

@前端进阶之旅: 代码已经复制到剪贴板

// diary/index.js page
dateChange(e) {
  // console.log(e)
  let {currentYear, currentMonth} = e.detail
  this.setData({
    daysStyle: []
  })
  this.setCalendarColor(currentYear, currentMonth)
}

@前端进阶之旅: 代码已经复制到剪贴板

# 小程序用户登录和授权流程

在心情签到的功能开发中，需要得到用户信息，获取用户信息需要用户账号授权才可以。用户账号授权是小程序开发中经常碰见的技术点，本节重点介绍下小程序的登录授权机制。

小程序开发文档中有一张很完整的流程图（见下图），笔者会围绕这张图来介绍用户授权流程，然后结合云函数来实现一个获取用户授权信息的功能。

从这张图来看，整个数据通信过程包含了小程序、开发者服务器（云函数）和微信接口服务，这三方是都参与其中的，整个流程跟公众号和第三方登录授权流程都基本类似。

整个授权流程可分为下面五个步骤。

# 1. `wx.login` 获取临时登录凭证 code

「小程序」内调用 wx.login 方法，如果用户是第一次授权或者授权过期，则会弹出授权窗口，提示用户个人信息会被授权给第三方服务使用。这时候如果用户同意授权，则会拿到临时登录凭证 code，这个临时登录凭证有效期只有 5 分钟。我们拿到这个临时登录凭证需要调用「开发者服务器（云函数）」的接口，将临时凭证发送给服务器，然后「开发者服务器」调用「微信接口服务」的 jscode2session 接口获取 openid 和 session_key。

wx.login({
  success: () => {
    if (res.code) {
        // example: 081LXytJ1xxxxcdfxxx1FWxdfdsfXyth
        // 将 code 发送给开发者服务器
    }
  }
})

@前端进阶之旅: 代码已经复制到剪贴板

# 2. 获取 `openid` 和 `session_key`

微信内，同一用户在任意小程序、公众号或者服务号中，都会有一个不同的唯一标识 openid，所以可以认为，我们在应用中获取的用户 openid 是唯一的，并且该用户在另外一个应用中的 openid 跟其他应用的是不同的。

session_key 是微信服务派发给我们的一个用户登录有效性的凭证，通过它我们可以间接维护用户微信的登录态。

获取 openid 和 session_key 需要调用微信的接口： https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

这个接口的参数为：

参数	必填	说明
appid	是	小程序唯一标识
secret	是	小程序的 app secret
js_code	是	登录时获取的 code
grant_type	是	填写为 authorization_code

其中 appid 和 secret 可以在小程序管理后台找到，具体路径为「设置 -> 开发设置 -> 开发者 ID」。appid 直接可见，而 secret 需要点击「生成」链接，并用开发者账号的微信扫码才能生成，生成之后需自行保存。

secret 是授权中保证安全性的一个重要 ID，不能外泄，因此必须放在开发者自己的服务器上使用，不能直接放到前端页面调用微信服务接口，因为如果这样的话 secret 就暴露了，这也是整个授权过程需要小程序、开发者服务器、微信服务三方都介入的原因。如果忘记或泄露了 secret，需要在微信后台重置。

js_code 就是第一步中我们通过 wx.login 获取到的临时授权凭证 code。有了appid、secret和js_code，我们可以写一个云函数来请求微信的 jscode2session 接口：

// 云函数名称：jscode2session
const API_URL = 'https://api.weixin.qq.com/sns/jscode2session'
const request = require('request')
const querystring = require('querystring')
/*<jdists import="../../inline/utils.js" />*/

/*<remove>*/
const $ = require('../../inline/utils')
/*</remove>*/

exports.main = async (event) => {
  let {code} = event
  // 这里微信的 id 和 secret 从配置文件中获取
  let {id, sk} = $.getWechatAppConfig()
  const data = {
    appid: id,
    secret: sk,
    js_code: code,
    grant_type: 'authorization_code'
  }
  let url = API_URL + '?' + querystring.stringify(data)
  return new Promise((resolve, reject) => {
    request.get(url, (error, response, body) => {
      if (error || response.statusCode !== 200) {
        reject(error)
      } else {
        try {
          const r = JSON.parse(body)
          resolve(r)
        } catch (e) {
          reject(e)
        }
      }
    })
  })
}

@前端进阶之旅: 代码已经复制到剪贴板

有了 jscode2session 这个云函数，我们就可以在小程序中调用云函数，将 wx.login 获取的 code 作为参数传递过去：

关于获取到的 session_key，我们还需要注意以下两点。

由于 session_key 具有实效性，因而我们可以将 session_key 存入本地缓存，每次进入小程序的时候判断下 session_key 是否过期即可：

wx.setStorage({
  key: 'session_key',
  data: session_key
})