微信小程序开发实战第5章 API应用案例（上）.pptxVIP

第5章 API应用案例（上）【案例1】用户登录【案例3】天气预报查询【案例2】个人中心【案例4】查看附近的美食餐厅学习目标掌握小程序网络请求服务器数据方法了解小程序位置信息、设备应用API的使用掌握登录、交互反馈、分享API的用法了解腾讯地图SDK用法掌握掌握4123了解目录5.4【案例3】天气预报查询【案例4】查看附近的美食餐厅【案例2】个人中心【案例1】用户登录?点击查看本节相关知识点?点击查看本节相关知识点?点击查看本节相关知识点?点击查看本节相关知识点知识架构5.1 【案例1】用户登录14实现用户登录案例分析2前导知识3搭建开发者服务器知识架构5.1 【案例1】用户登录5检查用户是否已经登录76获取用户信息开放数据校验与解密知识架构5.2 【案例2】个人中心1案例分析2前导知识3实现底部标签页切换4编辑个人资料知识架构5.2 【案例2】个人中心5订单物流查询76选择收货地址客服联系电话知识架构5.3 【案例3】天气预报查询1案例分析2前导知识3动态获取输入的城市名54渲染界面展示数据请求天气接口数据知识架构5.4 【案例4】查看附近的美食餐厅1案例分析2前导知识3设计地图界面54视野变化获取中心点坐标单击控件回到中心点5.1 【案例1】用户登录1 案例分析 用户登录是微信小程序必不可少的环节，一个完整的登录功能还包括用户的信息获取、登录的状态判定等。下图为未登录和已登录页面效果图。已登录示例未登录示例5.1 【案例1】用户登录2 前导知识 小程序通过微信官方提供的，获取微信提登录能力供的用户身份标识，建立用户体系。用户登录流程时序图（右图所示）：5.1 【案例1】用户登录2 前导知识 用户登录流程需要小程序、开发者服务器和微信接口服务3个角色的参与，下面介绍这3个角色的作用：小程序：用户使用的客户端，由于小程序运行在微信之上，因此小程序可以通过API获取微信用户的身份信息。开发者服务器：小程序的后端服务器，用于为小程序用户提供服务。微信接口服务：微信为开发者服务器提供的接口。5.1 【案例1】用户登录2 前导知识 登录流程具体细节：小程序获取code。小程序将code发送给开发者服务器。开发者服务器通过微信接口服务校验登录凭证。开发者服务器自定义登录态。5.1 【案例1】用户登录2 前导知识 数据缓存：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的数据缓存API如下表所示：方式名称说明异步wx.setStorage()将数据存储在本地缓存中指定的key中wx.getStorage()从本地缓存中异步获取指定key的内容wx.getStorageInfo()异步获取当前storage的相关信息wx.removeStorage()从本地缓存中移除指定key同步wx.setStorageSync()wx.setStorage()的同步版本wx.getStorageSync()wx.getStorage()的同步版本wx.getStorageInfoSync()wx.getStorageInfo()的同步版本wx.removeStorageSync()wx.removeStorage()的同步版本5.1 【案例1】用户登录2 前导知识 保存数据缓存示例代码如下：// 保存数据缓存wx.setStorage({ key: key, // 本地缓存中指定的key data: value, // 需要存储的内容（支持对象或字符串） success: res = {}, // 接口调用成功的回调函数 fail: res = {} // 接口调用失败的回调函数})5.1 【案例1】用户登录2 前导知识 获取缓存数据示例代码如下：// 获取数据缓存wx.getStorage({ key: key, // 本地缓存中指定的 key success: res = { // 接口调用成功的回调函数 console.log(res.data) }, fail: res = {} // 接口调用失败的回调函数})5.1 【案例1】用户登录3 搭建开发者服务器 本节选择使用Node.js搭建开发者服务器，安装Node.js，创建项目：初始化项目，将会自动创建package.json配置文件。npm init –y安装Express框架和request模块。npm install express –savenpm install request --save安装nodemon监控文件修改（如果已经安装则跳过此步）。npm install nodemon -g5.1 【案例1】用户登录3 搭建开发者服务器 执行上述命令后，在项目目录下创建index.js文件，编写代码如下