uniapp项目实践总结(七)编写一个简单的应用页面

之前自定义了顶部和底部导航栏，那接下来就写一个简单的二级页面，这个是出了导航页面之外经常用到的。

目录

• 结构
• 模板
• 样式
• 方法
• 示例

结构

一个普通页面的结构应该是如下所示：

<!-- html -->
<template>
  <view class="list"> 列表内容 </view>
</template>
<!-- js -->
<script setup name="list"></script>
<!-- css -->
<style lang="scss" scoped></style>

模板

uniapp 内置了常用的组件，可以直接使用，和微信小程序一样。

容器类

• view
• scroll-view
• swiper

文本类

• icon
• text
• rich-text
• progress

表单类

• form
• input
• textarea
• label
• radio
• checkbox
• button
• picker
• slider
• switch

其他

• navigator
• image
• audio
• video
• webview
• canvas
• map

样式

样式支持css、scss、less、stylus，支持@import导入外部样式表。

尺寸

通用尺寸

支持以下通用尺寸：

• rpx响应式 px
• px屏幕像素

特殊尺寸

nvue 不支持，vue 支持：

• rem根字体大小
• vhviewpoint height，视窗高度，
• vwviewpoint width,视窗宽度,

nvue 不支持百分比;

计算公式

uni-app 中页面的宽度计算公式：

750 * 元素在设计稿中的宽度 / 设计稿基准宽度；

例如：

• 设计稿宽度为 750px，元素 A 在设计稿的宽度为 100px，那么元素在 uniapp 里面的宽度为750*100/750为 100rpx；

• 设计稿宽度为 375px，元素 A 在设计稿的宽度为 100px，那么元素在 uniapp 里面的宽度为750*100/375为 200rpx；

导入

使用@import 'path/name.scss';

例如：

@import "./index.scss";

全局样式

App.vue中的样式即为全局样式，对于每一个页面通用，nvue 页面不支持全局样式。

内联样式

在组件的属性中使用 class 或者 style 添加样式。

<!-- style -->
<view :style="{'width': '100rpx'}"> </view>
<!-- class -->
<view class="block"></view>

选择器

在 uniapp 中，*选择器无效，page相当于body，微信小程序仅支持class选择器。

选择器	样例	样例描述
.class	.intro	选择所有拥有 class=“intro” 的组件
#id	#firstname	选择拥有 id=“firstname” 的组件
element	view	选择所有 view 组件
element, element	view, checkbox	选择所有文档的 view 组件和所有的 checkbox 组件
::after	view::after	在 view 组件后边插入内容，仅 vue 页面生效
::before	view::before	在 view 组件前边插入内容，仅 vue 页面生效

css 变量

CSS 变量	描述	App	小程序	H5
–status-bar-height	系统状态栏高度	系统状态栏高度、nvue 注意见下	25px	0
–window-top	内容区域距离顶部的距离	0	0	NavigationBar 的高度
–window-bottom	内容区域距离底部的距离	0	0	TabBar 的高度
NavigationBar	导航栏	44px		44px
TabBar	底部选项卡	HBuilderX 2.3.4 之前为 56px，2.3.4 起和 H5 调为一致，统一为 50px。（但可以自主更改高度）		50px

字体

使用@font-face自定义字体。

@font-face {
   
    font-family: 'iconfont',
    src: url('iconfont.ttf') format('truetype');
}

.test {
   
    font-family: 'iconfont';
}

方法

这是 js 中的一些内容。

这里重点关注一下生命周期，包括页面的组件的生命周期。

页面生命周期

常用到的就是onLaunch，onLoad，onShow，onHide等钩子函数。

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成，此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为 Object，具体见下方注意事项	微信小程序、QQ 小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ 小程序、支付宝小程序、抖音小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为 Object	nvue 暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为 Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack；详见	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6