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

样式

样式支持cssscsslessstylus,支持@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 中的一些内容。

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

页面生命周期

常用到的就是onLaunchonLoadonShowonHide等钩子函数。

函数名 说明 平台差异说明 最低版本
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+

组件生命周期

常用到的就是createdonLoadonShowonHide等钩子函数。

生命周期钩子 描述 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,
  },
});

效果展示

uniapp项目实践总结(七)编写一个简单的应用页面_第1张图片

最后

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

你可能感兴趣的:(uniapp项目实践总结(七)编写一个简单的应用页面)