uniapp使用记录（一）--项目搭建、路由跳转、生命周期、组件规范

闲敲棋子落灯华
219 阅读5分钟

1. 生命周期

uniapp中组件生命周期函数和页面生命周期函数的执行顺序

  1. 不包含组件的页面

onLoad > onShow > onReady

<template>
  <view class="">
    哈哈家具家电
    <scroll-view scroll-y="true" ref="scroll">
      <view></view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onReady, onShow } from "@dcloudio/uni-app";
const scroll = ref(null);
/*
onLoad 先执行，执行onShow，再执行onReady
*/

// onLoad 用于接收上一个页面的参数
onLoad((e) => {
  console.log("onLoad生命周期");
  console.log(e);
});


// 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onShow(() => {
  console.log("onShow生命周期");
});
// 类似于onMounted。DOM已经渲染完成，可以操作节点
onReady(() => {
  console.log("ref", scroll.value);
});
</script>

<style lang="scss" scoped>
</style>
  1. 包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

  1. 应用生命周期（仅可在App.vue中监听）

  • 1.onLaunch ：当 uni-app 初始化完成时触发（全局只触发一次） App.vue里的onLaunch中option作用：获取用户进入小程序或退出小程序的场景值

  • 2.onShow ：当 uni-app 启动，或从后台进入前台显示 //监听用户进入小程序

  • 3.onHide :当 uni-app 从前台进入后台 //监听用户离开小程序

  • 4.onError :当 uni-app 报错时触发

  • 5.onUniNViewMessage :对 nvue 页面发送的数据进行监听

页面生命周期（在页面中添加）

  • 1.onLoad （监听页面加载）

  • 2.onShow （监听页面显示）

  • 3.onReady （监听页面初次渲染完成）

  • 4.onHide （监听页面隐藏）

  • 5.onUnload :监听页面卸载

  • 6.onResize :监听窗口尺寸变化

  • 7.onPullDownRefresh :监听用户下拉动作，一般用于下拉刷新

当页面中需要用到下拉刷新功能时，打开pages.json，在"globalStyle"里设置"enablePullDownRefresh":true

此时所有页面都可以完成下拉刷新功能 如果想在单个页面中不执行刷新功能：在pages.json里单个页面上添加

如果想在单个页面中执行刷新功能：在pages.json里单个页面上添加

{
	"path": "pages/index/index",
	"style": {
		"navigationBarTitleText": "首页",
		"enablePullDownRefresh":true
	}
},
"enablePullDownRefresh":true

  • 8.onReachBottom :页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据

  • 9.onTabItemTap :点击 tabBar 时触发

  • 10.onShareAppMessage :用户点击右上角分享 可以在转发时设置转发标题，路径和图片

  • 11.onPageScroll :监听页面滚动

  • 12.onNavigationBarButtonTap :监听原生标题栏按钮点击事件

  • 13.onBackPress :监听页面返回

  • 14.onNavigationBarSearchInputChanged :监听原生标题栏搜索输入框输入内容变化事件

  • 15.onNavigationBarSearchInputConfirmed :监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发

  • 16.onNavigationBarSearchInputClicked :监听原生标题栏搜索输入框点击事件

 onLoad() {
     console.log('页面加载')
 },
 onShow() {
     console.log('页面显示')
 },
 onReady(){
     console.log('页面初次显示')
 },
 onHide() {
     console.log('页面隐藏')
 },
 onUnload() {
     console.log('页面卸载')
 },
 onBackPress(){
     console.log('页面返回...')
 },
 onShareAppMessage() {
     console.log('分享!')
 },
 onReachBottom() {
     console.log('下拉加载...')
 },
 onPageScroll(){
     console.log('页面滚动...')
 },
 onPullDownRefresh() {
     console.log('上拉刷新...')
     uni.stopPullDownRefresh();
 },

2.新建项目和页面

  1. 选择文件，然后选择项目，直接创建基本项目 image.png

image.png 2.项目文件介绍

image.png

─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
├─AndroidManifest.xml   Android原生应用清单文件 详见
├─Info.plist            iOS原生应用配置文件 详见
└─uni.scss              内置的常用样式变量

详细配置，看这个链接

3.项目运行

image.png 4. 模版简介

image.png

  1. 新建页面

image.png

image.png

  1. 路由配置项

image.png

3.路由跳转-navigator页面跳转。

3.1 navigator页面跳转

该组件类似HTML中的<a>组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

<navigator url="/pages/demo1/demo1">跳转到demo1</navigator>
<navigator url="/pages/demo6/demo6?name=王五&&age=18">跳转到demo6并传递参数</navigator>

image.png

// 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
onLoad((e) => {
  console.log("onLoad生命周期");
  console.log(e);
});

image.png onLoad onShow onReady

image.png 详细查看官网

各个阶段与Vue进行对比 image.png

3.2 API方式也可以实现页面跳转

一、uni.navigateTo(object) 保留当前页面，跳转到指定非tabBar页面，如：

uni.navigateTo({
    url:'/pages/demo1/demo1',
})

二、uni.redirectTo(object) 关闭当前页面，跳转到指定非tabBar页面，如：

uni.redirectTo({
    url:'/pages/demo1/demo1'
})

三、uni.reLaunch(object) 关闭所有页面，打开任意指定页面，如：

uni.reLaunch({
    url:'/pages/demo1/demo1',
})

四、uni.switchTab(object) 关闭所有非tabBar页面，跳转到tabBar页面，如：

uni.switchTab({
    url:'/pages/demo2/demo2'
})

五、uni.navigateBack(object) 回退指定数量个页面，默认回退上一级，如：

uni.navigateBack()

可以通过传递对象的delta属性指定回退页面的个数，如：

//  回退两页
uni.navigateBack({
    delta:2
})

六、getCurrentPages() 获取当前所有页面的页面栈，第一个为首页，最后一个为当前页面

const pageStack = getCurrentPages()

4. 文件介绍

image.png

5. easycom组件规范

只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.(vue|uvue)目录结构（注意：当同时存在vue和uvue时，uni-app 项目优先使用 vue 文件，而uni-app x 项目优先使用 uvue 文件，详情）。就可以不用引用、注册，直接在页面中使用。

image.png

6.tabber配置

"tabBar": {
		"color": "#F0AD4E",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#F8F8F8",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/classify/classify",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/logo.png",
				"selectedIconPath": "static/logo.png",
				"text": "个人中心"
			}
		]
	},

image.png

7.static

static中的图片无论有没有用到都会打包到里面去。

静态资源编译规则

  • 项目 static 目录下的静态资源，会被直接拷贝到编译后目录的 static 目录下。

  • 非static目录下的静态资源在vue3下，被引用的资源会编译到 assets 目录下，并重新命名为 原始名称+内容hash,如：logo.png 会编译为类似 logo.cfd8fa94.png 的名称。如果该静态资源未被引用，则不会被编译器处理。

8.父组件调用子组件的方法

image.png 注意：clickButton 函数的定义移到 defineExpose 之前。

avatar
文章
阅读
粉丝