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.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5 1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈微信小程序		2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序、QQ 小程序	2.8.1+

组件生命周期

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

生命周期钩子	描述	H5	App 端	小程序	说明
beforeCreate	在实例初始化之后被调用详情	√	√	√
created	在实例创建完成后被立即调用详情	√	√	√
beforeMount	在挂载开始之前被调用详情	√	√	√
mounted	挂载到实例上去之后调用详情注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTick 详情 √	√	√
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前详情	√	√	√
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子详情	√	√	√
activated	被 keep-alive 缓存的组件激活时调用详情	√	√	x
deactivated	被 keep-alive 缓存的组件停用时调用详情	√	√	x
beforeUnmount	实例销毁之前调用。在这一步，实例仍然完全可用详情	√	√	√
unmounted	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁详情	√	√	√
errorCaptured	当捕获一个来自子孙组件的错误时被调用详情	√	√	√	-

常用方法

以下都是 vue3 中的 setup 语法糖下面的使用场景。

uniapp

导入你要使用的方法。

import {
  onLoad,
  onShow,
  onHide,
  onPullDownRefresh,
  onShareAppMessage,
  onShareTimeline,
  onAddToFavorites,
} from "@dcloudio/uni-app";

onLoad:页面加载。

onLoad((option) => {
  // option页面参数
});

onShow: 页面显示；

onShow((e) => {
  // e
});

onHide: 页面隐藏；

onHide(() => {});

onPullDownRefresh：下拉刷新；

// 监听下拉刷新
onPullDownRefresh(() => {
  // 开始下拉刷新
  uni.startPullDownRefresh();
  // 停止下拉刷新
  uni.stopPullDownRefresh();
});

在pages.json配置:

{
  "path": "pages/index/index",
  "style": {
    "navigationBarTitleText": "首页",
    "enablePullDownRefresh": true,
    "app-plus": {
      "pullToRefresh": {
        "support": true,
        "color": "#f33",
        "style": "circle"
      }
    }
  }
}

onShareAppMessage：转发到聊天界面；

onShareAppMessage((res) => {
  const promise = new Promise((resolve) => {
    resolve({
      title: "自定义标题",
    });
  });
  return {
    path: "/pages/index/index?id=1&name=mark",
    imgUrl: "https://example.com/a.png",
    title: "首页",
    promise,
  };
});

onShareTimeline：转发到朋友圈；

onShareTimeline((res) => {
  return {
    path: "/pages/index/index",
    query: "name=mark",
    imgUrl: "https://example.com/a.png",
    title: "自定义标题",
  };
});

onAddToFavorites：添加到收藏；

onAddToFavorites((res) => {
  // webview 页面返回 webViewUrl
  console.log("webViewUrl: ", res.webViewUrl);
  return {
    title: "自定义标题",
    imageUrl: "https://example.com/a.png",
    query: "name=mark&age=18",
  };
});

vue

导入你要使用的方法。

import { ref, reactive, watch, computed, onMounted, onUnmounted, getCurrentInstance } from "vue";

ref：适合基本数据类型，使用.value访问和修改值。

let show = ref(true);
show.value = false;

reactive：适合引用数据类型，不能直接赋值，必须指定属性修改值。

const person = reactive({
  id: 1,
  name: "mark",
  age: 18,
});

person.name = "jack";

watch:监听数据值变化。

watch(
  () => [person],
  (val) => {
    //...
  },
  {
    deep: true,
    immediate: true,
  }
);

computed计算属性；

const sayHi = computed(() => {
  return `Hi,${person.name}!`;
});

onMounted:挂载到实例上去之后调用；

onMounted(() => {});

onUnmounted：实例销毁后调用；

onUnmounted(() => {});

getCurrentInstance：允许访问对高级使用或库创建者有用的内部组件实例；

const { proxy } = getCurrentInstance();

defineProps：接收来自父组件的数据；

const props = defineProps({
  width: {
    type: Number,
    default: 100,
  },
  color: {
    type: String,
    default: "#555",
  },
  show: {
    type: Boolean,
    default: true,
  },
  list: {
    type: Array,
    default() {
      return [];
    },
  },
  person: {
    type: Object,
    default() {
      return {
        id: 1,
        name: "mark",
      };
    },
  },
  clickMe: {
    type: Function,
    default() {
      return "Default function";
    },
  },
});

例如：

<myChild class="post" :width="200" color="#f00" show :list="[1,2,3]" :person="{"id": 2, "name": "jack"}"></myChild>

defineEmits：向父组件发送事件和数据；

const emits = defineEmits();

例如：

const emits = defineEmits(["success", "fail"]);
emits("success", true);

父组件接收:

<myChild @success="handlerSuccess"></myChild>

const handlerSuccess = (val) => console.log(val); // true

defineExpose：指定向组件外暴露的属性和方法，默认关闭；

defineExpose({});

例如：

const a = ref(1);
const b = ref(2);

const sum = (a, b) => a + b;

defineExpose({
  a,
  b,
  sum,
});

vuex

vuex 状态管理，主要是引入和使用。

引入

import { useStore } from "vuex";

使用

const store = useStore();
// 异步方法
store.dispatch({
  type: "saveInfo",
  data: {
    name: "mark",
    memo: "no",
  },
});
// 同步方法
store.commit({
  type: "SAVE_USER",
  data: {
    id: 1,
    name: "mark",
  },
});
// 获取状态
store.getters.getUser;

示例

新建页面

在pages/index文件夹下面新建一个list.vue的文件，在pages.json注册路由。

{
  "path": "pages/index/list",
  "style": {
    "navigationBarTitleText": "列表"
  }
}

编写代码

模板部分

<view class="block list">
  <view class="block-statusbar"></view>
  <q-navbar :center="navConfig.center" :right="navConfig.right" />
  <view class="block-main block-two-level">
    <view class="list-person">
      <view v-for="(val, key) in person" :key="key"> {{key}}:{{val}} </view>
    </view>
  </view>
</view>

样式部分

.list-person {
  padding: 30rpx;
}

在uni.scss里面定义以下全局变量。

// 全局变量
$statusBarHei: var(--status-bar-height); // 状态栏高度
$navBarHei: 110rpx; // 顶部导航栏高度
$tabBarHei: 120rpx; // 底部导航高度

一个导航页面包括状态栏、顶部导航栏、中间内容区和底部导航栏四块区域，一个普通的页面就是没有底部导航栏。

可以在之前的styles文件夹的global.scss里面定义全局样式规则，包括整体页面，中间部分，状态栏部分的样式。

// 全局样式
.block {
  position: relative;
  width: 100%;
  height: 100vh;
  // 主要内容
  .block-main {
    position: relative;
    top: calc($statusBarHei + $navBarHei);
    left: 0;
    box-sizing: border-box;
    height: calc(100vh - $statusBarHei - $navBarHei - $tabBarHei);
    background: $white;
    // 二级页面
    &.block-two-level {
      height: calc(100vh - $statusBarHei - $navBarHei);
    }
  }
}

// 状态栏
.block-statusbar {
  width: 100%;
  height: $statusBarHei;
}

脚本部分

// 导入依赖
import { ref, reactive } from "vue";

const person = reactive({
  id: 1,
  name: "mark",
  age: 18,
});

const navConfig = reactive({
  center: {
    show: true,
    name: "列表页面",
  },
  right: {
    show: false,
  },
});

效果展示

在这里插入图片描述

最后

以上就是编写一个简单的应用页面的主要内容，有不足之处，请多多指正。

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

目录

结构

模板

容器类

文本类

表单类

其他

样式

尺寸

通用尺寸

特殊尺寸

计算公式

导入

全局样式

内联样式

选择器

css 变量

字体

方法

页面生命周期

组件生命周期

常用方法

uniapp

vue

vuex

示例

新建页面

编写代码

效果展示

最后

MarkGuan

引用和评论

uniapp项目APP端安卓ios权限检测教程

腾讯新闻中心首页改版啦

网页设计的垂直居中

CSS团队协作规范

前端如何入门 Go 语言

100个React最佳实践小技巧

不使用 JS 纯 CSS 获取屏幕宽高