uniapp学习笔记（一）--项目新建、路由跳转、生命周期、文件介绍、组件规范、tabber配置1.新建项目和页面选择

1.新建项目和页面

选择文件，然后选择项目，直接创建基本项目

2.项目文件介绍

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

详细配置，看这个链接

3.项目运行

4. 模版简介

新建页面

路由配置项

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

2.1 navigator页面跳转

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

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

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

onLoad onShow onReady

详细查看官网

各个阶段与Vue进行对比

2.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()

3. 生命周期

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

不包含组件的页面

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>

包含组件的页面

onLoad > onShow > onBeforeMount > onReady > onMounted

4. 文件介绍

5. easycom组件规范

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

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": "个人中心"
			}
		]
	},

7.static

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

静态资源编译规则

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

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

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