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

说明
✎ 5.1 【案例1】用户登录
2 前导知识
保存数据缓存示例代码如下：
// 保存数据缓存 wx.setStorage({
key: 'key', data: 'value', success: res => {}, fail: res => {} })
// 本地缓存中指定的key // 需要存储的内容（支持对象或字符串） // 接口调用成功的回调函数 // 接口调用失败的回调函数
const wx = {
appid: '',
// 需要填写开发者的AppID
secret: ''
// 需要填写开发者的AppSecret
}
✎ 5.1 【案例1】用户登录
3 搭建开发者服务器
② 模拟数据库。
var db = { session: {}, user: {}
}
// 模拟数据库 // 保存openid和session_key的会话信息 // 保存用户记录，如用户名、积分等数据
✎ 5.1 【案例1】用户登录
2 前导知识
数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数
据缓存API如下表所示：
方式
异步
同步
名称
wx.setStorage() wx.getStorage() wx.getStorageInfo() wx.removeStorage() wx.setStorageSync() wx.getStorageSync() wx.getStorageInfoSync() wx.removeStorageSync()
未登录示例
已登录示例
✎ 5.1 【案例1】用户登录
2 前导知识
小程序通过微信官方提供的，获取 微信提登录能力供的用户身份标识 ，建立用户体系。用户登录流程时 序图（右图所示）：
✎ 5.1 【案例1】用户登录
2 前导知识
用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与， 下面介绍这3个角色的作用： 小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的
将数据存储在本地缓存中指定的key中 从本地缓存中异步获取指定key的内容 异步获取当前storage的相关信息 从本地缓存中移除指定key wx.setStorage()的同步版本 wx.getStorage()的同步版本 wx.getStorageInfo()的同步版本 wx.removeStorage()的同步版本
// 接口调用失败的回调函数
✎ 5.1 【案例1】用户登录
3 搭建开发者服务器
本节选择使用Node.js搭建开发者服务器，安装Node.js，创建项目： ① 初始化项目，将会自动创建package.json配置文件。
npm init –y
② 安装Express框架和request模块。
npm install express –save npm install request --save
第5章 API应用案例（上）
微信 小程序
• 【案例1】用户登录 • 【案例3】天气预报查询
• 【案例2】个人中心 • 【案例4】查看附近的美食餐厅
✎
学习目标
1
掌握小程序网络请求服务器
数据方法
了解小程序位置信息、
4
设备应用API的使用
掌握登录、交互反馈、 2
分享API的用法
了解腾讯地图SDK用法 3
③ 安装nodemon监控文件修改（如果已经安装则跳过此步）。
npm install nodemon -g
✎ 5.1 【案例1】用户登录
3 搭建开发者服务器
执行上述命令后，在项目目录下创建index.js文件，编写代码如下：
① 引入Express框架和request模块，配置appid和secret。
✎ 5.1 【案例1】用户登录
2 前导知识
获取缓存数据示例代码如下：
// 获取数据缓存 wx.getStorage({
key: 'key', success: res => {
console.log(res.data) }, fail: res => {} })
// 本地缓存中指定的 key // 接口调用成功的回调函数
身份信息。 开发者服务器：小程序的后端服务器，用于为小程序用户提供服务。 微信接口服务：微信为开发者服务器提供的接口。
✎ 5.1 【案例1】用户登录
2 前导知识
登录流程具体细节： 小程序获取code。 小程序将code发送给开发者服务器。 开发者服务器通过微信接口服务校验登录凭证。 开发者服务器自定义登录态。
✎
目录
【案例1】用户登录
☞点击查看本节相关知识点
【案例2】个人中心
☞点击查看本节相关知识点
【案例3】天气预报查询
☞点击查看本节相关知识点
【案例4】查看附近的美食餐厅
☞点击查看本节相关知识点
✎ 5.1 【案例1】用户登录
1 案例分析
用户登录是微信小程序必不可少的环节，一个完整的登录功能还包括用户的信息获取、登录的状态 判定等。下图为未登录和已登录页面效果图。
✎ 5.1 【案例1】用户登录
3 搭建开发者服务器③来自请求登录接口，校验登录凭证的微信接口URL地址。
app.post('/login', (req, res) => { var url = 'https:///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}) })
const express = require('express')
const bodyParser = require('body-parser')
const request = require('request')
const app = express()
e(bodyParser.json())