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

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

目录

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

结构

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

模板

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 添加样式。

选择器

在 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";
    },
  },
});

例如：

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

const emits = defineEmits();

例如：

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

父组件接收:

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": "列表"
  }
}

编写代码

• 模板部分

  
  
  
    
       {{key}}:{{val}} 
    
  

• 样式部分

.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,
  },
});

效果展示

最后

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