关于前端: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选择器。

css 变量

字体

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

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

办法

这是 js 中的一些内容。

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

页面生命周期

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

组件生命周期

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

罕用办法

以下都是 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,  },});

成果展现

最初

以上就是编写一个简略的利用页面的次要内容，有不足之处，请多多斧正。