Web前端应用开发项目式教程（基于uni-app框架） 课件 任务3　制作个人资料页

任务3制作个人资料页Web前端应用开发项目式教程（基于uni-app框架）

目录CONTENTS013.5任务实施3.7学习自评Part13.1任务描述3.2任务效果3.4知识储备3.8课后练习3.9任务拓展3.3学习目标3.6任务测试

本任务将制作“启嘉校园”项目的个人资料页面，该页面主要用于修改用户基本信息，包括用户的头像、昵称、个性签名、性别、手机号和微信号。

3.1任务描述

3.2任务效果个人资料页效果图

3.3学习目标能力目标素养目标知识目标通过学习使用正则表达式完成手机号、微信号等信息的验证的方法，培养学习者发现问题、分析问题、解决问题的能力。通过实现“用户扩展资料区域”中用户信息显示的功能，强化学习者个人信息保护意识。通过巩固拓展的练习，培养学习者脚踏实地、躬身力行的实践精神。掌握uni-apppicker滚动选择器组件的使用。掌握uni-appinput单行输入框组件的使用。掌握uni-appimage图片组件的使用。掌握uni.showToast消息提示方法的使用。掌握uni-app页面跳转方法的使用。掌握正则表达式的使用。能够使用picker组件完成滚动选择性别。能够使用input组件完成内容的输入。能够使用image组件完成图像的展示及缩放、裁剪等操作。能够使用uni.showToast方法完成消息提示。能够使用uni-app页面跳转方法实现页面间跳转。能够使用正则表达式完成手机号、微信号等信息的验证。

3.4知识储备属性名类型默认值说明平台差异说明rangeArray/Array<Object>[]mode为selector或multiSelector时，range有效range-keyString当range是一个Array＜Object＞时，通过range-key来指定Object中key的值作为选择器显示内容3.4.1picker组件

picker组件是一种能够在移动端应用中选择一项或多项数据的UI组件，可从底部弹起。支持五种选择器分别为：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器，默认为普通选择器。@changeEventHandlevalue改变时触发change事件，event.detail={value:value}

3.4知识储备3.4.2input组件

input组件是一种常用的表单输入控件，用于接收用户输入的数据。它支持多种类型的输入，如文本、数字、密码等，也支持自定义输入框样式、事件等。属性名类型默认值说明平台差异说明confirm-typeStringdone设置键盘右下角按钮的文字，仅在type="text"时生效微信小程序、App、H5、快手小程序、京东小程序confirm-holdBooleanfalse点击键盘右下角按钮时是否保持键盘不收起App(3.3.7+)、H5(3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序@inputEventHandle当键盘输入时，触发input事件，event.detail={value}@confirmEventHandle点击完成按钮时触发，event.detail={value:value}快手小程序不支持

3.4知识储备属性名类型默认值说明平台差异说明srcString图片资源地址modeString'scaleToFill'图片裁剪、缩放的模式lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效微信小程序、百度小程序、抖音小程序、飞书小程序show-menu-by-longpressbooleanfalse开启长按图片显示识别小程序码菜单微信小程序2.7.0@errorHandleEvent当错误发生时，发布到AppService的事件名，事件对象event.detail={errMsg:'somethingwrong'}@loadHandleEvent当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:'图片高度px',width:'图片宽度px'}3.4.3image组件

image组件在移动端的使用与在Web端类似，都是用于展示图片的UI组件，可以加载本地图片或网络图片。

3.4知识储备常用提示框案例showToast消息提示框uni.showToast({title:'操作成功',icon:'success',duration:2000})showLoading加载提示框uni.showLoading({title:'加载中',mask:true})showModal模态框uni.showModal({title:'提示',content:'确定删除该记录吗？',success(res){if(res.confirm){console.log('用户点击确定')}elseif(res.cancel){console.log('用户点击取消')}}})showActionSheet列表选择提示框uni.showActionSheet({itemList:['选项一','选项二','选项三'],success(res){console.log('用户点击了',res.tapIndex+1,'号选项')},fail(res){console.log(res.errMsg)}})3.4.4uni-app常用提示框

3.4知识储备3.4.5页面跳转页面跳转方法作用案例uni.navigateTo方法保留当前页面，跳转到应用内的某个页面，可通过uni.navigateBack返回到原页面//跳转到目标页面uni.navigateTo({url:'/pages/target/target'})uni.redirectTo方法关闭当前页面，跳转到应用内的某个页面//跳转到目标页面uni.redirectTo({url:'/pages/target/target'})uni.navigateBack方法关闭当前页面，返回上一页面或多级页面//返回上一页面uni.navigateBack()//返回多级页面uni.navigateBack({delta:2})

3.5任务实施3.5.1页面结构分析与搭建个人资料页结构分析1.新建页面文件：在/pages/my目录下新建名为“material”的Vue文件。2.搭建个人资料页结构：根据个人资料页中内容相关度进行页面结构划分为用户基本资料区域和用户扩展资料区域。3.实现跳转到个人资料页：用户通过点击个人中心页的“个人资料”按钮可以跳转至个人资料页。

3.5任务实施3.5.2制作用户基本资料区域用户基本资料区域结构分析

3.5任务实施3.5.2制作用户基本资料区域

为了使静态页面效果更加贴近设计图效果，在静态页面制作部分我们会先使用Vue模拟一些静态数据填充到页面中，在后面功能实现部分的任务中，再通过后端接口获取真实数据替换静态数据。Template部分JavaScript部分

3.5任务实施3.5.3制作用户扩展资料区域用户扩展资料区域结构分析

3.5任务实施3.5.3制作用户扩展资料区域用户扩展资料区域结构细分效果要求：1.用户ID是注册时系统自动生成的用户唯一标识，不支持修改。2.用户性别为保密、男、女三个选项，可以使用uni-app中的picker滚动选择器组件进行切换。3.点击用户手机号或微信号部分的编辑图标时，文本内容切换为文本输入框，编辑图标隐藏。4.手机号和微信号非必填；昵称不允许为空，长度最大为8位；个性签名允许为空，长度最大为60位。

3.6任务测试测试条目是否通过比对开发页面和设计图，核对字号、颜色、间距等设计参数

实现个人中心页和个人资料页的跳转

手机号和微信号处于修改状态时，编辑图标隐藏；修改完成后，光标失焦，编辑图标显示

保存信息时，输入内容符合验证规则，提示保存成功并返回到个人中心页；不符合验证规则，做出相应错误提示

3.7自学评价评价内容是否了解/掌握是否掌握picker滚动选择器的使用

是否了解uni-appinput组件的使用

是否掌握uni-appimage组件的使用

是否掌握uni.showToast消息提示方法的使用

是否掌握uni-app页面跳转方法的使用

是否掌握正则表达式的使用

3.8课后练习？1.选择题（1）在uni-app中，以下哪个组件可以用于创建滚动选择器？A.pickerB.selectC.dropdownD.autocomplete（2）在uni-app中，以下哪种方法可以用于页面跳转？A.uni.navigateTo()B.uni.navigateBack()C.uni.redirectTo()D.uni.switchTab()（3）在uni-app中，以下哪个方法可以用于监听输入框的输入事件？A.@inputB.@changeC.@focusD.@blur2.填空题（1）uni-app中的单行输入框组件名称为————。（2）在uni-app中，设置滚动选择