微信小程序实战-第5章 API应用案例(上)

微信小程序实战-第5章 API应用案例(上)

5.1 【案例1】用户登录

5.1.1案例分析

用户登录是微信小程序必不可少的环节，一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。

5.1.2前导知识

用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与，下面介绍这3个角色的作用：

• 小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的身份信息。
• 开发者服务器：小程序的后端服务器，用于为小程序用户提供服务。
• 微信接口服务：微信为开发者服务器提供的接口。

登录流程具体细节：

• 小程序获取code。
• 小程序将code发送给开发者服务器。
• 开发者服务器通过微信接口服务校验登录凭证。
• 开发者服务器自定义登录态。

保存数据缓存示例代码如下：

// 保存数据缓存
wx.setStorage({
   
  key: 'key',		// 本地缓存中指定的key
  data: 'value',		// 需要存储的内容（支持对象或字符串）
  success: res => {
   },              // 接口调用成功的回调函数	
  fail: res => {
   }		// 接口调用失败的回调函数
})

获取缓存数据示例代码如下：

// 获取数据缓存
wx.getStorage({
   
  key: 'key',		// 本地缓存中指定的 key
  success: res => {
   		// 接口调用成功的回调函数
    console.log(res.data)
  }, 
  fail: res => {
   }		// 接口调用失败的回调函数
})

5.1.3搭建开发者服务器

本节选择使用Node.js搭建开发者服务器，安装Node.js，创建项目：

1. 初始化项目，将会自动创建package.json配置文件。

npm init –y

2. 安装Express框架和request模块。

npm install express –save
npm install request --save

3. 安装nodemon监控文件修改（如果已经安装则跳过此步）。

npm install nodemon -g

执行上述命令后，在项目目录下创建index.js文件，编写代码如下：

1. 引入Express框架和request模块，配置appid和secret。

const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()
app.use(bodyParser.json())
const wx = {
   
  appid: '',	// 需要填写开发者的AppID
  secret: ''	// 需要填写开发者的AppSecret
}

2. 模拟数据库。

var db = {
   	// 模拟数据库
  session: {
   },	// 保存openid和session_key的会话信息
  user: {
   }		// 保存用户记录，如用户名、积分等数据
}

3. 请求登录接口，校验登录凭证的微信接口URL地址。

app.post('/login', (req, res) => {
   
  var url = 'https://api.weixin.qq.com/sns/jscode2session?appid=' +
  wx.appid + '&secret=' + wx.secret + '&js_code=' + req.body.code +
   '&grant_type=authorization_code'  
  request(url, (err, response, body) => {
   
     if(){
    // 此处代码判断session.openid是否存在}
     }
     res.json({
   token: token})
  })
})

4. 处理判断语句代码。

var session = JSON.parse(body)
if (session.openid) {
         
      // 用于生成token
      var token = 'token_' + new Date().getTime()
      db.session[token] = session 
}

5. 暴露对外访问接口地址。

app.listen(3000, () => {
   
  console.log('server running at http://127.0.0.1:3000')
})

保存上述代码后，执行如下命令，启动开发者服务器。

nodemon index.js

5.1.4实现用户登录

创建一个空白项目，在app.js文件中编写代码，实现小程序启动时自动执行登录操作。