微信小程序开发项目实战教程 课件 项目3：用户信息模块

项目3：用户信息模块的知识点解析微信小程序开发项目实战教程CONTENTS01rpx尺寸机制02AppID与AppSecret03wx.showLoading接口04wx.login接口05wx.request接口06WXML组件的条件渲染07WXSS样式的条件选择08wx.showToast接口09globalData参数PART01rpx尺寸机制01rpx尺寸机制核心概念rpx(responsivepixel)是小程序独有的动态尺寸单位，能根据屏幕宽度自动适配。换算原理规定屏幕宽度为750rpx。如iPhone6宽375px，则1rpx=0.5px，框架自动计算物理像素。适配优势实现多端自动适配，无需编写复杂的媒体查询，极大简化了布局开发工作。开发实践以iPhone6(750px)为设计标准，直接将px替换为rpx使用。750rpxPART02AppID与AppSecret02AppID与AppSecretAppID(小程序ID)作用：小程序的唯一身份标识，用于区分不同项目，是微信生态中的应用名片。

获取：登录微信公众平台→开发管理→开发设置。AppSecret(小程序密钥)作用：与AppID配对的密钥，用于后端服务器向微信服务器发起敏感请求（如获取OpenID）。

获取：同开发设置页面，点击“重置”按钮获取。安全警示：AppSecret是极其重要的敏感信息，绝对不能在前端代码中暴露，必须妥善保管在后端服务器中。PART03wx.showLoading接口03wx.showLoading接口功能概述显示加载动画提示框，告知用户正在进行耗时异步操作（如网络请求），防止重复操作。核心用法wx.showLoading({title:'登录中...',//提示文字});使用场景与注意事项在用户触发操作时立即调用，操作完成后（无论成败）必须调用wx.hideLoading()关闭。效果预览PART04wx.login接口04wx.login接口接口功能调用微信登录，获取用户的临时登录凭证code。这是小程序实现微信快捷登录的第一步。核心机制不直接返回用户信息，仅返回有效期为5分钟的code。code是后端服务器换取用户唯一标识（OpenID）的关键凭证。代码示例wx.login({success:(res)=>{if(res.code){console.log('Code:',res.code);}else{

console.log('登录失败');}}});控制台输出示例PART05wx.request接口05wx.request接口核心用法示例wx.request({url:'/api/login',method:'POST',data:{code:res.code,//登录凭证appid:'your-appid'},success:(response)=>{console.log('返回数据：',response.data);}});功能与作用小程序与后端交互的核心API，相当于网页开发中的XMLHttpRequest。在登录案例中，负责将code、AppID发送给后端，换取用户OpenID和个人信息。后端返回数据示例PART06WXML组件的条件渲染06WXML组件的条件渲染核心功能与原理根据数据的布尔值结果，动态决定是否渲染组件。当条件为true时渲染wx:if块，为false时渲染wx:else块。案例应用：用户登录状态判断场景：根据页面data中的patientInfo是否为null来判断。逻辑：若为null，显示“未登录”提示；若有数据，显示真实用户名。核心代码实现<!--WXML代码示例--><viewwx:if="{{patientInfo==null}}">未登录</view><viewwx:else>{{patientInfo.p_name}}</view>PART07WXSS样式的条件选择07WXSS样式的条件选择核心概念与应用场景动态样式绑定根据数据状态动态切换CSS类名，实现颜色、大小或显隐等视觉效果的变化，无需重复编写组件。三元表达式语法class="{{condition?'classA':'classB'}}"案例：电子诊疗卡状态切换根据patientInfo是否为空，动态改变按钮颜色：未登录时显示灰色，登录成功后显示绿色，提供直观的视觉反馈。代码实现示例WXML结构层<viewclass="{{patientInfo==null?'e-card-unlogin':'e-card'}}">电子诊疗卡</view>WXSS样式层/*未登录状态样式*/.e-card-unlogin{color:rgb(153,153,153);}/*登录成功状态样式*/.e-card{color:rgb(40,167,69);}PART08wx.showToast接口08wx.showToast接口功能概述用于展示操作结果（成功/失败/提示）的轻量级消息框，默认1.5秒后自动消失。核心用法示例wx.showToast({title:'登录失败',

icon:'error',duration:2000});与showLoading的区别showToast侧重结果反馈，自动消失；showLoading侧重过程展示，需手动调用hideLoading关闭。PART09globalData参数09globalData参数核心概念小程序的全局数据存储区，生命周期与小程序一致。数据定义在app.js中，可被所有页面和组件访问。主要作用存储跨页面共享的公共数据，如用户登录状态、个人信息、全局配置等，避免重复请求或传递参数。典型应用场景登录成功后，将用户身份信息存入globalData，个人中心等页面可直接读取，无需重新获取。1.在app.js中定义全局数据App({globalData:{userInfo:null//初始化用户信息}});2.在页面中访问与修改//获取小程序实例constapp=get