任务二 制作个人中心页 #

uni-app尺寸单位 #

在前端开发中，常用的尺寸单位主要包括px、em、rem、vw/vh等。在uni-app中，支持的尺寸单位包括px、rpx、vw和vh。

1. px是指屏幕上的一个物理像素，它是屏幕显示的最小单位，一个px对应着屏幕上的一个点。在网页开发中，px通常是一个相对单位，用于描述网页元素的大小，与设备分辨率相关。

2. rpx全称为「responsive pixel」，是微信小程序中的一种相对长度单位，用于适配不同分辨率的手机屏幕。rpx与屏幕宽度有关，即在屏幕宽度为750rpx时，1rpx等于1物理像素，屏幕宽度不同时，rpx会自动进行等比例缩放，以保证页面在不同设备上的显示效果一致。

3. vw/vh（视窗单位）：相对于视口（Viewport）宽度或高度的百分比单位，1vw表示视口宽度的1%。使用 vw/vh单位可以实现在不同屏幕尺寸上按比例调整元素的大小。需要注意的是，vw/vh是相对单位，具体的大小取决于设备的视口宽度和高度，因此在使用时需要特别注意不同设备上的显示效果。

在uni-app中，rpx同样是相对长度单位，用法与微信小程序中的一致。由于uni-app支持多种平台，不同的平台可能存在不同的分辨率，因此在使用rpx进行布局时需要考虑到不同设备的屏幕宽度，可以通过 uni.getSystemInfoSync() 方法获取屏幕宽度信息，从而完成rpx和px之间的转换。

rpx和px是按照比例关系相互转换的。具体而言，屏幕宽度为750rpx时，宽度为1px的元素在屏幕上的实际宽度也为1px。因此，可以通过如下的公式将rpx转换为px：

px = rpx * 屏幕宽度 / 750

反之，将px转换为rpx的公式为：

rpx = px * 750 / 屏幕宽度

示例

// 获取屏幕宽度
let res = uni.getSystemInfoSync()
let screenWidth = res.screenWidth

// 将50rpx转换为px
let px = 50 * screenWidth / 750
console.log(px) // 输出实际的像素值

// 将100px转换为rpx
let rpx = 100 * 750 / screenWidth
console.log(rpx) // 输出实际的rpx值

总的来说，px是常规的绝对单位，可以用于元素的精确定位和大小控制；rpx和vw/vh是相对单位，可以实现元素在不同设备上的响应式布局，可以根据具体情况选择合适的尺寸单位来进行页面布局和设计。

示例

• font-size: 16px; 表示文字大小为16个像素。
• width: 100rpx; 表示宽度为屏幕宽度的100/750。
• height: 50vh; 表示高度为视口高度的50%。
• margin: 10px 5vw; 表示上下边距为10像素，左右边距为视口宽度的5%。

%与vh相对单位的区别 #

百分比（%）和视窗高度（vh）都是相对单位，但它们有一些区别。

百分比（%）：百分比是相对于父元素的单位，它可以用于设置元素的宽度、高度、边距和定位等属性。例如，如果一个元素的宽度为50%，那么它的宽度将是父元素宽度的50%。在响应式设计中，使用百分比可以帮助元素相对于其父元素进行自适应布局。

视窗高度（vh）：视窗高度是相对于浏览器窗口的高度的单位。它可以用于设置元素的高度或垂直方向上的边距等属性。例如，如果一个元素的高度为50vh，那么它的高度将是浏览器窗口高度的50%。在响应式设计中，使用视窗高度可以帮助元素相对于屏幕大小进行自适应布局。

因此，百分比和视窗高度之间的主要区别在于它们相对的参照物不同。百分比是相对于父元素的大小，而视窗高度是相对于浏览器窗口的高度。在实际应用中，可以根据具体的布局需求和设计方案选择使用百分比或视窗高度来实现元素的自适应布局。

示例

• width: 50%; 表示元素的宽度为父元素宽度的50%
• height: 100%; 表示元素的高度为父元素高度的100%
• margin-top: 20%; 表示元素的上边距为父元素宽度的20%
• padding-bottom: 10vh; 表示元素的下内边距为浏览器窗口高度的10%

在第一个示例中，元素的宽度设置为50%会随着父元素的宽度而变化。在第二个示例中，元素的高度设置为100%将填满父元素的高度。在第三个示例中，元素的上边距设置为20%将相对于父元素的宽度进行计算。在第四个示例中，元素的下内边距设置为10vh将相对于浏览器窗口的高度进行计算。

需要注意的是，百分比和视窗高度的应用场景是有限制的。例如，当一个元素的高度设置为100%时，它的父元素必须要有一个确定的高度，否则元素的高度就无法被正确计算。在实际应用中，应根据具体的场景和需求合理地运用百分比和视窗高度等单位。

uni-app视图容器组件view #

uni-app中的view组件是一种基础的视图容器组件，可以用来包裹其他组件以及自身的子组件，构建出具有层次结构的页面布局。

示例

<template>
  <view class="container">
    <view class="box"></view>
    <view class="box"></view>
    <view class="box"></view>
  </view>
</template>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 100px;
  height: 100px;
  margin: 0 20px;
  background-color: #f2f2f2;
}
</style>

在上述代码中，首先在template中定义了一个类名为container的view组件，它包含了三个 box组件，它们都具有相同的宽度和高度，并且它们之间有一定的间隔。通过在style中设置 display: flex;、justify-content: center; 和 align-items: center; 属性，可以让container组件在页面中居中显示。

可以在style中设置background-color、color、font-size、border等样式属性来改变view组件的外观，也可以在template中通过嵌套其他组件来组合更复杂的界面。

uni-app组件模板template与block #

在uni-app中，template用于定义页面模板。同时，uni-app还提供了block元素，用于包含多个顶级元素。

使用 template 元素可以将页面的结构和内容组织起来，方便进行组件化开发和维护。而使用 block 元素可以让模板更加灵活，能够包含多个顶级元素。

在实际开发中，我们通常会使用template元素来定义页面结构和内容，使用block元素来包含多个顶级元素。例如：

<template>
  <view>
    <block>
      <image src="/static/logo.png"></image>
      <text>Hello, World!</text>
    </block>
  </view>
</template>

在上面的示例中，我们使用template元素来定义页面模板，使用view元素作为模板的根元素。然后在block元素中包含了一个图片元素和一个文本元素，这两个元素都是顶级元素，不能直接放在template元素中。

需要注意的是，block元素并不会在实际的DOM中渲染出来，它只是一个逻辑容器，可以被用于包裹多个顶级元素。如果你需要在实际的DOM中渲染一个块级容器，可以使用view元素或其他块级元素。

uni-app基础内容组件text #

uni-app中的text组件用于显示纯文本内容，它是一个非常简单的组件。下面是一个基本的使用示例：

<template>
  <view>
    <text>Hello World!</text>
  </view>
</template>

在上面的代码中，我们在一个 view 组件内嵌套了一个text组件，并在其中输入了"Hello World!"这段文本。当页面渲染时，text组件会将这段文本显示在屏幕上。

在实际应用中，text组件通常会结合其它组件一起使用，比如button、input、label等。此外，还可以通过style属性来控制text组件的样式，比如字体大小、颜色、字体加粗等。下面是一个示例：

<template>
  <view>
    <text style="font-size: 28px; color: red; font-weight: bold;">Welcome to My App</text>
  </view>
</template>

在上面的代码中，我们在text组件的style属性中设置了字体大小、颜色和字体加粗等样式，这会使得"Welcome to My App"这段文本以更加醒目的方式显示在页面上。

uni-app视图容器组件scroll-view #

scroll-view是uni-app框架中的一个组件，用于创建可滚动的视图区域，常用于长列表、滚动图像等场景。

scroll-view的基本用法非常简单，只需要将要滚动的内容放在scroll-view组件内即可。

示例

<template>
  <scroll-view style="height: 300rpx;">
    <view v-for="item in items" :key="item.id">{{ item.name }}</view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
        { id: 5, name: 'Item 5' },
        { id: 6, name: 'Item 6' },
        { id: 7, name: 'Item 7' },
        { id: 8, name: 'Item 8' },
        { id: 9, name: 'Item 9' },
        { id: 10, name: 'Item 10' }
      ]
    };
  }
};
</script>

在上面的示例中，我们使用了scroll-view组件来创建一个可滚动的区域，内部包含了一个 view 列表，该列表会根据items数组中的数据进行渲染。

scroll-view 组件支持很多配置选项，下面列举一些常用的选项：

• scroll-x：是否开启横向滚动，默认为false
• scroll-y：是否开启纵向滚动，默认为true
• scroll-top：设置滚动条距离顶部的距离，单位为px
• scroll-left：设置滚动条距离左侧的距离，单位为px
• scroll-into-view：设置滚动到的目标元素的id值
• scroll-with-animation：是否使用动画滚动，默认为false
• lower-threshold：距离底部多少距离时触发scrolltolower事件，单位为px
• upper-threshold：距离顶部多少距离时触发scrolltoupper事件，单位为px

uni-app导入扩展组件 #

uni-app项目一般可以用Hbuildx自动导入一些扩展的插件和组件。比如想要导入uni-icons字体图标库，可以在uni-app的官网（https://uni-app.dcloud.net.cn/component/uniui/uni-ui.html ）中，找到所需的扩展组件，对组件下载时会有一个弹出页，选择“打开HBuilderX”进行安装。

完成 以上操作后，相应组件会下载至项目的下uni_modules文件目录下。由于框架可以自动加载该目录下的组件，所以在使用时无需手动注册，在项目代码中可以直接对导入好的扩展组件直接使用。

示例

在模板中使用 uni-icons 组件，通过组件标签指定组件的 type 属性来渲染不同类型的图标。

<uni-icons type="success"></uni-icons>
<uni-icons type="info"></uni-icons>
<uni-icons type="warning"></uni-icons>
<uni-icons type="error"></uni-icons>

这样就可以使用uni-icons组件在页面中渲染不同类型的图标了。需要注意的是，不同的扩展组件使用方式可能有所不同，具体用法需要查看组件的文档和示例。

uni-app弹出框组件uni-popup #

uni-popup是uni-app框架提供的弹出层组件，它可以在当前页面弹出一个浮层，常用于展示提示信息、操作菜单等功能。需要注意的是uni-popup组件是一个扩展组件，使用时需要先使用导入扩展组件的方式对组件进行导入。

示例

<template>
<view>
 <uni-popup  ref="popup" @change="onChange">
   <!-- 弹出层的内容 -->
   <view>这是弹出层的内容</view>
 </uni-popup>
</view>
</template>

<script>

export default {
data() {
 return {};
},
methods: {
  handleOpen(){
      this.$refs.popup.open();
  },
 // 监听变化
 onChange(e) {
      console.log(e.show);
 },
},
};
</script>

在上述代码中，uni-popup组件中的show属性控制弹出层是否显示，@change事件用于处理弹出层状态变化的事件，这是弹出层的内容 表示弹出层的内容。

除此之外，uni-popup还提供了一些其他的配置选项，例如弹出层的位置、高度、动画效果等，这些选项可以通过组件的属性进行配置。具体的属性及配置方法可以参考官方文档。

uni-app touch触摸事件 #

在uni-app中，可以使用touch事件来监听触摸屏幕的交互操作，如滑动、按下、松开等，进行相应的响应操作。

touch 事件是由组件上的@touchstart 、@touchmove 、@touchend 、@touchcancel四个事件组成的。其中：

• @touchstart：当手指触摸屏幕时触发
• @touchmove：当手指在屏幕上滑动时连续地触发
• @touchend：当手指离开屏幕时触发
• @touchcancel：当系统停止跟踪触摸时触发，如在触摸过程中突然弹出系统提示框等情况

这些事件的触发顺序为：touchstart -> touchmove -> touchend 或 touchcancel。

在事件对象中，可以获取到触摸点的坐标等信息，通过计算可以实现拖拽、滑动等交互效果。

示例

<template>
  <view>
    <view class="drag-wrapper" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
      <view class="drag-box" :style="dragBoxStyle">
        Drag me!
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        startX: 0, // 起始横坐标
        startY: 0, // 起始纵坐标
        left: 0,   // 距离左侧的距离
        top: 0,    // 距离顶部的距离
      }
    },
    computed: {
      dragBoxStyle() {
        return {
          left: this.left + 'px',
          top: this.top + 'px',
        }
      },
    },
    methods: {
      touchstart(e) {
        this.startX = e.changedTouches[0].pageX
        this.startY = e.changedTouches[0].pageY
      },
      touchmove(e) {
        const moveX = e.changedTouches[0].pageX - this.startX
        const moveY = e.changedTouches[0].pageY - this.startY
        this.left += moveX
        this.top += moveY
        this.startX = e.changedTouches[0].pageX
        this.startY = e.changedTouches[0].pageY
      },
      touchend(e) {
        console.log('touch end')
      },
    },
  }
</script>

<style>
  .drag-wrapper {
    width: 100vw;
    height: 100vh;
    background-color: #eee;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .drag-box {
    width: 100px;
    height: 100px;
    background-color: #409EFF;
    color: #fff;
    text-align: center;
    line-height: 100px;

uni-app页面生命周期 #

在uni-app中，页面生命周期指的是页面从创建到销毁的整个过程中经历的一系列事件。以下是 uni-app 中页面生命周期的详细介绍：

1. onLoad(options)：监听页面加载，这个生命周期函数会在页面被加载时触发。在这个函数中可以获取 options 对象，该对象包含了页面跳转时传递过来的参数。在这个函数中可以进行一些初始化操作。
2. onShow()：监听页面显示，这个生命周期函数会在页面显示出来时触发。在这个函数中可以进行一些刷新操作，例如刷新页面数据。
3. onReady()：监听页面初次渲染完成，这个生命周期函数会在页面初次渲染完成时触发。在这个函数中可以进行一些操作，例如隐藏 loading 等待框。
4. onHide()：监听页面隐藏，这个生命周期函数会在页面被隐藏时触发。在这个函数中可以进行一些清理操作，例如清空页面数据等。
5. onUnload()：监听页面卸载，这个生命周期函数会在页面被卸载时触发。在这个函数中可以进行一些清理操作，例如清空页面数据等。
6. onPullDownRefresh()：监听页面下拉刷新，这个生命周期函数会在用户下拉页面时触发。在这个函数中可以进行一些刷新操作，例如获取最新数据等。
7. onReachBottom()：监听页面上拉触底，这个生命周期函数会在用户上拉页面触底时触发。在这个函数中可以进行一些分页加载数据等操作。
8. onPageScroll(object)：监听页面滚动，这个生命周期函数会在页面滚动时触发。在这个函数中可以获取页面滚动的距离等信息。
9. onResize(size)：监听页面尺寸变化，这个生命周期函数会在页面尺寸变化时触发。在这个函数中可以获取新的页面尺寸信息。

以上就是uni-app中页面生命周期的详细介绍。在实际开发中，开发者可以根据自己的需求来合理地利用这些生命周期函数，从而提高页面的交互性和用户体验。

示例

<template>
  <view class="container">
    <view class="content">
      <text>{{ message }}</text>
      <button @click="changeMessage">Change Message</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, uni-app!'
    }
  },
  onLoad(options) {
    console.log('页面加载完成')
    console.log('参数：', options)
  },
  onShow() {
    console.log('页面显示')
  },
  onReady() {
    console.log('页面初次渲染完成')
  },
  onHide() {
    console.log('页面隐藏')
  },
  onUnload() {
    console.log('页面卸载')
  },
  onPullDownRefresh() {
    console.log('下拉刷新')
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 2000)
  },
  onReachBottom() {
    console.log('上拉触底')
  },
  onPageScroll(e) {
    console.log('页面滚动', e.scrollTop)
  },
  onResize(e) {
    console.log('页面尺寸变化', e.size)
  },
  methods: {
    changeMessage() {
      this.message = 'Hello, uni-app World!'
    }
  }
}
</script>

<style>
.container {
  height: 100%;
}

.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
</style>

在这个示例代码中，我们定义了一个页面，其中包含一个text组件和一个button组件。在页面加载完成时会打印一条信息，并输出页面传递过来的参数。当页面显示、初次渲染完成、隐藏或卸载时也会打印相应的信息。当用户下拉页面时，会触发下拉刷新操作，并在下拉刷新完成后停止下拉刷新。当用户上拉页面触底时，会触发上拉触底操作。当页面滚动时，会打印页面滚动的距离信息。当页面尺寸变化时，会打印新的页面尺寸信息。当用户点击按钮时，会改变页面中的text组件显示的文字。

uni-app导航栏 #

uni-app支持使用原生导航栏和自定义导航栏两种方式来展示页面导航栏。下面分别介绍这两种方式。

原生导航栏 #

在uni-app中，原生导航栏是指操作系统提供的默认导航栏，它具有设备操作系统的特点和风格，通常包括标题、返回按钮、右侧按钮等元素。开发者可以通过uni-app提供的API来实现原生导航栏的设置和控制。

pages.json文件是uni-app中的配置文件，可以在其中设置应用的全局属性和样式。在该文件中，可以设置导航栏的样式、背景色、标题、左右按钮等属性。

示例

{
  "globalStyle": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "uni-app原生导航栏",
    "navigationBarTextStyle": "black"
  }
}

以上代码展示了全局定义的配置，当然，假如想要在app平台具有特有的样式可以通过如下代码实现：

{
  "globalStyle": {
   "app-plus": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "uni-app原生导航栏",
        "navigationBarTextStyle": "black"
   }
  }
}

原生导航栏相关参数配置好后，在需要使用原生导航栏的页面中，便可以使用uni-app提供的Page组件来实现导航栏的呈现，同时也可以使用uni-app提供的API来控制导航栏的样式和行为。

示例

<template>
  <view>
    <text>这是一个使用原生导航栏的页面</text>
  </view>
</template>

<script>
export default {
  onNavigationBarButtonTap() {
    uni.showToast({
      title: '点击了导航栏按钮',
      icon: 'none'
    })
  }
}
</script>

在该示例中，onNavigationBarButtonTap()是一个页面级别的事件处理函数，用于在用户点击导航栏按钮时触发。在该函数中，可以调用uni-app提供的API来实现页面跳转、显示提示等操作。

总之，使用原生导航栏可以使应用界面更加美观和统一，但它的功能相对简单，如果需要实现更多的自定义功能，建议使用自定义导航栏来实现。

自定义导航栏 #

大部分情况下我们都是使用微信官方自带的navigationBar配置 ，但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。

导航栏可以全局配置，也可以单独页面配置，具体根据业务需求决定。navigationStyle属性可以控制导航栏样式，仅支持default/custom，custom函数可取消默认的原生导航栏。

示例

{
    "path" : "pages/public/login",
    "style": {
        "navigationBarTitleText": "",
        "navigationStyle": "custom",
        "app-plus": {
            "titleNView": false
        }
    }
}

在不同的手机型号头部导航栏高度可能不一致，所以为了我们适配更多型号，我们需要计算整个导航栏的高度、胶囊按钮与顶部的距离、胶囊按钮与右侧的距离。

#

在uni-app中可以通过uni.getMenuButtonBoundingClientRect()获取胶囊按钮的信息 和 uni.getSystemInfo() 获取设备信息。 注：胶囊按钮只在小程序平台存在。

示例

<template>
	<view>
		<button @click="getMenuButtonBoundingClientRect">获取胶囊体信息</button>
		<button @click="getSystemInfo">获取设备信息</button>
	</view>
</template>
<script>
export default {
   methods:{
      getMenuButtonBoundingClientRect(){
        console.log('胶囊体信息',uni.getMenuButtonBoundingClientRect())
      },
      getSystemInfo(){
        console.log('设备信息',uni.getSystemInfo())
      }
   }
}
</script>

uni-app底部tabbar #

tabBar是移动端应用常见的标签栏，用于实现页面之间的快速切换，小程序中通常将其分为底部tabBar和顶部tabBar。uni-app tabBar可以配置的页签数量最少为2个，最多为5个。

tabBar节点配置项：

每个tab项的配置选项：

示例

"pages": [ 
    {
        "path": "pages/index/index",
        "style": {
            "navigationBarTitleText": "首页"
        }
    }, {
        "path": "pages/my/my",
        "style": {
            "navigationBarTitleText": "我的"
        }
    }
],
"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "pages/index/index",
            "text": "主页",
            "iconPath": "static/community.png",
            "selectedIconPath": "static/community-active.png"
        }, {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "static/my.png",
            "selectedIconPath": "static/my-active.png"
        }
    ]
},