微信小程序开发 | API应用案例（上）

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核心代码。
2. wx.getSystemInfo()获取设备的高度和宽度，示例代码如下：
   
3. markers标记点，示例代码如下：
   
4. controls 地图显示控件，示例代码如下：
   

5.4.3 设计地图界面

5.4.4 单击控件回到中心点

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

总结

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