5.1【案例1】用户登录

5.1.1 案例分析

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

5.1.2 前导知识

小程序通过微信官方提供的，获取微信提登录能力供的用户身份标识，建立用户体系。==用户登录流程==时序图（下图所示）：

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

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

登录流程==具体细节==：

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

==数据缓存==：缓存数据，从而在小程序退出后再次打开时，可以从缓存中读取上次保存的数据，常用的==数据缓存API==如下表所示：

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

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

5.1.3 搭建开发者服务器

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

1. 初始化项目，将会自动创建package.json配置文件。
2. 安装Express框架和request模块。
3. 安装nodemon监控文件修改（如果已经安装则跳过此步）。

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

1. 引入Express框架和request模块，配置appid和secret。
2. 模拟数据库。
3. 请求登录接口，校验登录凭证的微信接口URL地址。
4. 处理判断语句代码。
5. 暴露对外访问接口地址。

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

5.1.4 实现用户登录

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

请求login登录接口。

执行上述代码，控制台中打印出login code和token的值。

在开发者服务器的控制台中，打印出login code和session的值。

5.1.5 检查用户是否已经登录

==注意==：
判断数据缓存中是否存在token如果存在，取出数据缓存中的token值，不用再执行登录操作。需要注意的是，token有可能会过期，需要重新登录，这就需要从数据缓存中取出token后，先验证token是否过期，再使用token。

进入app.js中编写checkLogin()函数，判断token是否存在。

如果token存在，判断token是否有效。

修改app.js中onLaunch()函数，用于在小程序启动后检查用户是否已经登录，如果没有登录则执行登录操作。

5.1.6 获取用户信息

==获取用户信息==的两种常用方式如下：

• 使用< open-data>组件的方式。
• 单击按钮提示授权的方式。

1. 使用< open-data>组件来获取
   ==特点==：不需要用户授权，可以直接显示用户的头像、昵称、性别等，适合只用来展示信息的情况。
2. 单击按钮提示授权的方式
   ==用法==：如果“!hasUserInfo”值为true，表示没有获取到用户信息，显示“获取头像昵称”按钮；如果值为false，则将用户信息显示在页面中。
   
   
   ==用法==：在app.js文件的onLaunch()函数中，编写如下代码，在下次启动时判断是否已经授权。
   
   ==用法==：在app.js文件的globalData中增加userInfo，编写如下代码。
   
   ==调用==：在其他页面通过app.globalData.userInfo获取到用户信息。

5.1.7 开放数据校验与解密

==使用场景==：开发者服务器想要获取用户信息，需要在小程序端通过
wx.request()请求来获取。
==使用弊端==：无法辨别数据的真伪。
==解决办法==：利用小程序提供的开放数据的校验和解密机制。

5.2【案例2】个人中心

5.2.1 案例分析

个人中心案例设计了两个标签页，“首页”展示个人的基本信息及简单的自我介绍；“个人中心”底部标签页==任务需求==如下：
==展示个人资料==：展示头像、昵称、性别等信息。
==订单物流查询==：输入订单号和快递公司查询物流信息。
==选择收货地址==：调用开放接口，访问系统收货地址，进行选择。
==客服联系电话==：调用开放接口， 访问通讯录，拨打客服电话。

同时设计两个标签页，通过这两个标签页来实现页面之间的跳转。
==任务需求==如下：

• 实现标签页与标签页之间的跳转
• 实现标签页与非标签页之间的跳转。
• 实现非标签页与非标签页之间的跳转

页面效果图：

5.2.2 前导知识

1. wx.switchTab（只能跳转到tabBar页面，并关闭其他所有非tabBar页面）
   ==wx.switchTab常用属性==：
2. wx.navigateTo（跳转到应用内的某个页面，且保留当前页面）
3. wx.redirectTo（跳转到应用内的某个页面，且关闭当前页面）
   ==wx. navigateTo、wx.redirectTo常用属性==：
4. wx. reLaunch（关闭所有页面，打开到应用内的某个页面。既能跳转到标签页，又能跳转到非标签页）
5. wx.chooseImage() 从本地相册选择图片或使用相机拍照
6. wx.chooseAddress()调起用户编辑收货地址原生界面
7. wx.makePhoneCall()调起用户通讯录，拨打电话

5.2.3 实现底部标签页切换

在“首页”中单击头像上方提示语“点我跳转”，进入到 “个人中心页面”；这两个页面都属于tabBar页面，所以使用wx.swichTab或者wx.reLaunch方式。

1. 在app.js文件，配置tabBar
2. 在index.wxml文件，为头像绑定changeImage()函数
3. 在index.js文件，编写changeImage()函数

5.2.4 编辑个人资料

1. 进入详情页
2. 上传头像
3. 进入修改资料详情页单击“修改资料按钮”
4. 进入个人资料修改页提交表单

5.2.5 订单物流查询

在本任务中，将会实现订单物流查询功能，在“个人中心”页单击“订单物流查询”跳转到 pages/order/order“订单查询”页面。
==功能需求==如下：

• 选择快递公司。
• 输入运单号。
• 单击查询按钮，在页面下方展示物流信息。

5.2.6 选择收货地址

在本任务中，将会实现选择收货地址功能，在“个人中心”页单击“选择收货地址”跳转到 pages/address/address “收货地址”页面。
==功能需求==如下：

• 单击“获取收货地址”按钮，进行地址选择。
• 在收货地址表单中会渲染数据。

5.2.7 客服联系电话

在本任务中，将会实现拨打电话功能。
==功能需求==如下：

• 在“个人中心”页单击“客服联系方式”。
• 绑定拨打电话事件。
• 调用拨打电话API（wx.makePhoneCall）。

5.3【案例3】天气预报查询

5.3.1 案例分析

天气查询小程序，可以查询今日的天气状况，实时温度等信息。
==功能需求==如下：

• 设置input输入框，在搜索框中输入要查询的城市名称。
• 设置button按钮，单击搜索图标调用接口进行查询。
• 将查询数据展示在页面中。

5.3.2 前导知识

wx.request 发起HTTPS网络请求，一个小程序，同时只能有5个网络请求连接

5.3.3 动态获取输入的城市名

5.3.4 请求天气接口数据

5.3.5 渲染界面展示数据

5.4【案例4】查看附近的美食餐厅

5.4.1 案例分析

该案例使用腾讯地图SDK，配合地图组件和API进行调用，实现查看附近的美食餐厅小程序。
==功能需求==如下：

• 初始化地图组件。
• 单击banner图跳转到优惠券页面。
• 触发图标回到中心点位置。
• 页面中用图标标记搜索到的附近餐厅。

页面效果图：

5.4.2 前导知识

1. 腾讯地图SDK接入。

• 申请开发者密钥。下载微信小程序JavaScriptSDK。登录微信公众平台，设置request合法域名。引入SDK核心代码。

1. wx.getSystemInfo()获取设备的高度和宽度，示例代码如下：
2. markers标记点，示例代码如下：
3. controls 地图显示控件，示例代码如下：

5.4.3 设计地图界面

5.4.4 单击控件回到中心点

5.4.5 视野变化获取中心点坐标

总结

本章介绍了微信小程序中的API功能，包括使用小程序开放接口获取用户的信息、授权登录、添加用户收货地址，调起相机、相册选择图片等，同时也使用腾讯地图插件SDK定位附近的美食餐厅。根据POST和GET两种请求方式，介绍了不同数据类型之间的转换规则。学习本章后，读者需要掌握小程序中常用的API方法，熟练地进行与服务器的数据交互，实现项目产品需求。