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

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

目录

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

结构

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

<template><view class="list"> 列表内容 </view></template><script setup name="list"></script><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 添加样式。

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

选择器

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

css 变量

字体

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

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

方法

这是 js 中的一些内容。

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

页面生命周期

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