微信小程序开发项目实战（微课版）课件 8-1 课件-用户信息页面.pptx

项目八个人信息模块开发Userinformationpage任务一用户信息页面

在小程序开发中，用户信息模块一般包括用户登录、退出登录、购物信息统计、购物金额统计等，小程序提供了各类API和组件为实现用户信息模块提供了便利。通过本项目的讲解，让同学们了解小程序用户登录的API接口、小程序与Echart.js中的柱状图、饼图和折线图相结合的使用方式等。项目八个人信息模块开发任务描述

登录退出操作提供用户登录以及维护用户的登录状态，是一个拥有用户系统的小程序应用必不可少的功能模块。小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。

用户登录流程在微信小程序中，涉及到以下三类登录方式：?自有的账号注册和登录。?使用其他第三方平台账号登录。?使用微信账号登录（即直接使用当前已登录的微信账号来作为小程序的用户进行登录）。

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

用户登录流程（1）小程序端调用wx.login函数获取code，发送给开发者服务器调用wx.login函数获取临时登录凭证code?，并回传到开发者服务器。code是临时登录凭证，每次调用wx.login函数，都会返回不同的code。

用户登录流程（2）小程序将code发送给开发者服务器在获取code后，使用wx.request()将code发送给开发者服务器。wx.request的超时时间默认为60秒，为了避免用户因网络异常或服务器问题等待回包太久，可以在app.json设置wx.request的超时时间，超时则触发fail回调。可以在开发者后台设备服务器域名，如下图所示。

用户登录流程（3）开发者服务器通过微信接口服务校验登录凭证开发者服务器将appid、appsecret、code发送给微信接口服务校验登录凭证，如果校验成功，返回session_key和openid等。图appid和appsecret

用户登录流程（4）开发者服务器自定义登录态自定义登录态与openid和session_key相关联，并把自定义登录态返回给小程序端。服务器端验证通过之后，会向客户端返回一个token，登录状态。客户端会把token保存起来。

用户登录流程wx.login(Objectobject)调用接口获取登录凭证（code）。wx.login({success(res){if(res.code){//发起网络请求wx.request({url:/onLogin,data:{code:res.code}})}else{console.log(登录失败！+res.errMsg)}}})

实现用户授权登录图未登录状态图已登录状态

实现用户授权登录打开pages/profile/profile.js文件的data对象中定义基础数据userInfo，用于获得个人信息。代码如下所示。Page({??data:?{????userInfo:}})

退出登录在日常使用小程序的过程中，不可避免地需要退出当前登录的帐号，小程序提供了退出登录的便利。退出登录的做法可以是用户头像或者使用“退出登录”按钮，找到并点击退出登录或注销账号的选项。确认退出登录操作，系统将会清除登录信息，并返回到登录前的状态。loginOut:function(){?var?that=this???wx.setStorageSync(userInfo,)???that.setData({????userInfo:??})??}打开pages/profile/profile.js文件，实现loginOut函数，使用wx.setStorageSync函数将缓存中的userInfo的值设置为空。代码如下所示。

感谢观看THANK