制作个人资料页
Web前端应用开发项目式教程（基于uni-app框架）
目
录
CONTENTS
本任务将制作“启嘉校园”项目的个人资料页面，该页面主要用于修改用户基本信息，包括用户的头像、昵称、个性签名、性别、手机号和微信号。
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知识储备
属性名
类型
默认值
说明
平台差异说明
range
Array/ArrayObject
[]
mode为selector或multiSelector时，range有效
range-key
String
当range是一个Array＜Object＞时，通过range-key来指定Object中key的值作为选择器显示内容
picker组件是一种能够在移动端应用中选择一项或多项数据的UI组件，可从底部弹起。支持五种选择器分别为：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器，默认为普通选择器。
@change
EventHandle
value改变时触发change事件，event.detail={value:value}
3.4知识储备
input组件是一种常用的表单输入控件，用于接收用户输入的数据。它支持多种类型的输入，如文本、数字、密码等，也支持自定义输入框样式、事件等。
属性名
类型
默认值
说明
平台差异说明
confirm-type
String
done
设置键盘右下角按钮的文字，仅在type=text时生效
微信小程序、App、H5、快手小程序、京东小程序
confirm-hold
Boolean
false
点击键盘右下角按钮时是否保持键盘不收起
App(3.3.7+)、H5(3.3.7+)、微信小程序、支付宝小程序、百度小程序、QQ小程序、京东小程序
@input
EventHandle
当键盘输入时，触发input事件，event.detail={value}
@confirm
EventHandle
点击完成按钮时触发，event.detail={value:value}
快手小程序不支持
3.4知识储备
属性名
类型
默认值
说明
平台差异说明
src
String
图片资源地址
mode
String
scaleToFill
图片裁剪、缩放的模式
lazy-load
Boolean
false
图片懒加载。只针对page与scroll-view下的image有效
微信小程序、百度小程序、抖音小程序、飞书小程序
show-menu-by-longpress
boolean
false
开启长按图片显示识别小程序码菜单
微信小程序2.7.0
@error
HandleEvent
当错误发生时，发布到AppService的事件名，事件对象event.detail={errMsg:somethingwrong}
@load
HandleEvent
当图片载入完毕时，发布到AppService的事件名，事件对象event.detail={height:图片高度px,width:图片宽度px}
image组件在移动端的使用与在Web端类似，都是用于展示图片的UI组件，可以加载本地图片或网络图片。
3.4知识储备
常用提示框
案例
showToast消息提示框
uni.showToast({
title:操