任务三 制作个人资料页 #

uni-app picker组件 #

picker组件是一种能够在移动端应用中选择一项或多项数据的UI组件，可从底部弹起。支持五种选择器分别为：普通选择器，多列选择器，时间选择器，日期选择器，省市区选择器，默认为普通选择器。

picker在各平台的实现是有UI差异的，有的平台如百度、支付宝小程序的Android端是从中间弹出的；有的平台支持循环滚动如百度小程序；有的平台没有取消按钮如App-iOS端。但均不影响功能使用。

示例

在页面的 <template> 中添加Picker组件的标签，并设置相应的属性，如mode、range 等。

<template>
  <view>
    <picker mode="selector" :range="{{array}}" bindchange="pickerChange">
      <view class="picker">
        {{array[index]}}
      </view>
    </picker>
  </view>
</template>

在页面的 <script> 中定义相应的数据和方法。

<script>
  export default {
    data() {
      return {
        array: ['选项1', '选项2', '选项3', '选项4', '选项5'],
        index: 0
      }
    },
    methods: {
      pickerChange(e) {
        this.index = e.detail.value
      }
    }
  }
</script>

上述代码中，mode属性设置为selector，表示Picker组件为滚动选择器，array是数据源，index是当前选择的项的下标，pickerChange 是选择器值改变时的回调函数，将选中的值保存在index中。

除了滚动选择器，Picker组件还支持日期选择器和时间选择器，可以根据需求进行相应的设置。

picker-view也是一个选择器，但与picker不同，它可以在页面中直接嵌入。它提供了一个滚动的列表，可以在水平和垂直方向上滚动。picker-view可以用于选择多个值，例如省市区、时间段、表情等。您可以使用picker-view来创建复杂的交互式界面，例如日历、图表等。

总的来说，picker和picker-view都是非常有用的组件，可以帮助您为您的uni-app应用程序创建交互式选择器。选择使用哪一个取决于您的应用程序需求。如果您只需要选择单个值，可以使用picker；如果您需要选择多个值或创建复杂的交互式界面，则应选择picker-view。

uni-app input组件 #

uni-app的input组件是一种常用的表单输入控件，用于接收用户输入的数据。它支持多种类型的输入，如文本、数字、密码等，也支持自定义输入框样式、事件等。属于使用频率最高的一种，常见的业务场景包括登录时的用户名，密码以及注册时的信息填写，信息录入的功能第一选择基本都是输入框。

input输入框在HTML阶段已经学习过，此处不再做过多赘述，此处主要讲解input输入框组件在移动端应用中常用的属性及事件。

confirm-type属性与confirm-hold属性 #

这两个属性主要用于对键盘的控制，设置confirm-hold属性后，键盘点击右下按钮将不会被收起。

示例

<input v-model="value" placeholder="小程序中使用input框与pc端略有不同" :confirm-hold="true" />

键盘右下角的按钮，就是手机在输入时小键盘右下角的按钮，这个按钮一般是类似于：发送，完成，搜索。通过设置confirm-type属性，可以控制键盘显示对应的文字内容，例如当confirm-type设置为send时，可将右下角的文字设置成 “发送”。

示例

<input 
  v-model="value" 
  placeholder="小程序中使用input框与pc端略有不同" 
  :confirm-hold="true" 
  confirm-type="send"/>

@input事件 #

@input事件会在输入框内输入内容时实时触发。

比如像百度的搜索框联想词功能，当用户输入内容时，需要根据内容匹配最合适的搜索结果，这时就可以使用@input事件。

实现搜索框的搜索联想功能，当输入框输入字符时候，立刻进行网络请求，将相关推荐展示在下方的列表中，要求每次展示的一定是当前最新输入的内容的推荐词。

示例

<input placeholder="搜索框输入内容发生变化需要立刻进行网络请求搜索关联词汇" @input="handleInput" />
{{ value }}
<script>
export default {
	methods: {
		handleInput(event) {
			this.value = event.detail.value;
		}
	}
};
</script>

以上效果和双向绑定非常像，其实v-model双向绑定针对input控件，内部也是通过@input事件实现的。

@confirm事件 #

@confirm事件会在点击完成时触发。

当点击小键盘上的完成按钮时，会触发该事件。在业务场景上一般将此操作等同于点击“确认”按钮，比如在登录界面中，输入用户名与密码，在小键盘上直接点击完成，即可触发登录事件，不需要点击“登录”按钮。

示例

<input placeholder="ElementUI是一套基于 Vue 2.0 的桌面端组件库" @confirm="handleConfirm" />

 <script>
export default {
	methods: {
		handleConfirm(event) {
			console.log('点击完成按钮，触发事件');
		}
	}
};
</script>

uni-app image组件 #

uni-app的image组件在移动端的使用与在Web端类似，都是用于展示图片的UI组件，可以加载本地图片或网络图片。不同的是，uni-app中image组件有更多的属性和事件，例如缩放模式、显示动画效果、开启长按图片识别小程序码等。

以下重点讲解一下 Image 组件在移动端常用的属性和示例。

1. src

作用：设置要展示的图片的路径，可以是本地图片或网络图片的路径。

示例

<image src="../../static/logo.png" />

2. mode

作用：设置图片展示模式，可选值包括：

• aspectFit：等比缩放，保持宽高比不变，同时显示完整的图片内容。
• aspectFill：等比缩放，保持宽高比不变，但是可能只显示部分图片内容。
• widthFix：缩放图片宽度，高度自适应，可能会变形。
• heightFix：缩放图片高度，宽度自适应，可能会变形。
• center：居中显示，不缩放。

示例

<image src="../../static/logo.png" mode="aspectFit" />

3. lazy-load

作用：设置图片是否使用懒加载技术，当图片进入可视区域时才开始加载。

示例

<image src="../../static/logo.png" lazy-load />

4. show-menu-by-longpress

作用：设置长按图片时是否显示菜单，包括保存图片和复制图片地址。

示例

<image src="../../static/logo.png" show-menu-by-longpress />

5. bindload和binderror

作用：分别设置图片加载成功和失败时的事件，可以进行相应的处理，如提示用户、重试加载等。

示例

<image src="{{imageUrl}}" bindload="onImageLoad" binderror="onImageError" />

<script>
  export default {
    data() {
      return {
        imageUrl: 'https://example.com/image.jpg'
      }
    },
    methods: {
      onImageLoad() {
        console.log('Image loaded successfully.')
      },
      onImageError() {
        console.log('Failed to load image.')
      }
    }
  }
</script>

上述代码中，使用data属性定义imageUrl变量，用于保存要展示的图片的网络地址。在 Image 组件中，将imageUrl绑定到src属性，同时设置bindload和binderror事件，分别在图片加载成功和失败时触发相应的方法。在 methods 属性中定义onImageLoad和onImageError方法，分别处理图片加载成功和失败的情况。

在移动端使用image组件时，需要注意以下几点：

1. 图片大小和质量：移动设备的屏幕尺寸和分辨率相对较小，因此需要对图片大小和质量进行适当的优化，以提高页面加载速度和用户体验。
2. 图片路径：在移动端，图片路径建议使用相对路径或 CDN 地址，避免使用本地绝对路径，以确保图片能够正确加载。
3. 图片缓存：移动设备的存储空间有限，因此需要合理地管理图片缓存，避免占用过多的存储空间。
4. 图片展示模式：在移动端，由于屏幕尺寸和分辨率的限制，需要根据具体场景选择合适的图片展示模式，以确保图片能够正确展示并满足用户需求。

除了上述注意事项，image组件在移动端的使用与Web端类似，具体使用方法和属性设置可参考官方文档。

uni-app 常用提示框 #

在移动应用开发中，很多场景都会使用信息提示，常用的信息提示种类有消息提示框、加载提示框、模态弹框和列表选择提示弹框。

showToast消息提示框 #

作用：在页面底部弹出短暂的提示信息，通常用于展示成功或失败的消息。

示例

// 显示 Toast
uni.showToast({
  title: '操作成功',
  icon: 'success',
  duration: 2000
})

// 隐藏 Toast
uni.hideToast()

上述代码中，使用 uni.showToast() 方法显示 Toast，其中 title 属性为提示信息，icon 属性为图标类型，可以是 success、loading 或 none，duration 属性为显示时长，单位为毫秒。使用 uni.hideToast() 方法隐藏 Toast。

showLoading加载提示框 #

showLoading是uni-app中用于显示加载中动画的方法，它可以在页面中间显示一个加载中的动画，让用户知道当前页面正在加载数据或执行操作。

语法

uni.showLoading({
  title: '加载中',
  mask: true
})

参数说明

• title：加载中动画下方显示的文字，默认为“加载中”
• mask：是否显示遮罩层，默认为true，表示显示遮罩层

示例

// 显示加载中动画
uni.showLoading({
  title: '加载中',
  mask: true
})

// 隐藏加载中动画
uni.hideLoading()

上述代码中，使用uni.showLoading()方法显示加载中动画，其中title属性为加载中动画下方显示的文字，mask 属性为是否显示遮罩层。使用uni.hideLoading()方法隐藏加载中动画。

注意事项

• showLoading方法在调用之后需要手动调用hideLoading方法才能隐藏加载中动画
• showLoading方法在显示加载中动画的同时会锁定页面，防止用户进行其他操作，直到调用hideLoading方法隐藏加载中动画为止

showModal模态弹框 #

作用：弹出模态框，通常用于询问用户是否进行某个操作，需要用户进行确认或取消。

示例

// 显示 Modal
uni.showModal({
  title: '提示',
  content: '确定删除该记录吗？',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

上述代码中，使用uni.showModal()方法显示Modal，其中title属性为模态框标题，content属性为模态框内容，success回调函数用于处理用户点击按钮的情况，可以根据res.confirm和res.cancel属性来判断用户是否点击了确定或取消按钮。

ActionSheet列表选择提示弹框 #

作用：弹出操作菜单，通常用于展示多个操作选项，让用户选择其中一个操作。

示例

// 显示 ActionSheet
uni.showActionSheet({
  itemList: ['选项一', '选项二', '选项三'],
  success(res) {
    console.log('用户点击了', res.tapIndex + 1, '号选项')
  },
  fail(res) {
    console.log(res.errMsg)
  }
})

上述代码中，使用uni.showActionSheet()方法显示ActionSheet，其中itemList属性为操作选项列表，success回调函数用于处理用户点击选项的情况，可以根据res.tapIndex属性来获取用户选择的选项序号。如果显示ActionSheet失败，将触发fail回调函数，可以根据res.errMsg属性来获取失败原因。

注意：在uni-app中，提示框的使用可能会受到原生端的限制和差异，需要根据实际情况进行调整和处理。

页面跳转 #

在uni-app中，页面跳转可以使用uni.navigateTo和uni.redirectTo方法进行实现。

uni.navigateTo #

作用：保留当前页面，跳转到应用内的某个页面，可通过uni.navigateBack返回到原页面。

示例

// 跳转到目标页面
uni.navigateTo({
  url: '/pages/target/target'
})

上述代码中，使用uni.navigateTo方法跳转到目标页面，其中url属性为目标页面的路径。

uni.redirectTo #

作用：关闭当前页面，跳转到应用内的某个页面。

示例

// 跳转到目标页面
uni.redirectTo({
  url: '/pages/target/target'
})

上述代码中，使用uni.redirectTo方法关闭当前页面，直接跳转到目标页面，其中url属性为目标页面的路径。

注意事项：

• 页面跳转时需要注意路径的正确性和合法性，可以使用绝对路径或相对路径进行跳转
• 在uni.navigateTo和uni.redirectTo方法中，路径不能带有query参数，如果需要传递参数可以使用uni.setStorageSync方法存储数据，或者使用uni.navigateTo和uni.redirectTo方法中的events参数进行传递
• 如果需要跳转到外部链接或其他应用程序，可以使用uni.navigateToMiniProgram和plus.runtime.openURL方法进行实现
• 在一些情况下，页面跳转可能会被原生端屏蔽或者显示异常，需要根据实际情况进行调整和处理

而页面跳转返回可以使用uni.navigateBack方法进行实现。

uni.navigateBack #

作用：关闭当前页面，返回上一页面或多级页面。

示例

// 返回上一页面
uni.navigateBack()

// 返回多级页面
uni.navigateBack({
  delta: 2
})

上述代码中，使用uni.navigateBack方法返回上一页面，或返回多级页面，其中delta属性为返回的页面层数，默认为1。

注意事项

• 页面跳转返回时需要注意返回的页面层数，如果delta属性大于当前页面栈的长度，将无法返回到目标页面
• 页面跳转返回时可以使用uni.getStorageSync方法获取之前存储的数据，以便进行页面跳转后的操作
• 在一些情况下，页面跳转返回可能会被原生端屏蔽或者显示异常，需要根据实际情况进行调整和处理