一文搞定前端项目所用技术
1.vue
1.1vue2
1.2vue3
2.react
2.1类组件（Class Component）
2.2函数组件（Function Component）
3.ts
4.uni-app
uni-app 是一个使用 Vue.js 语法开发前端应用的框架。它的核心优势是“一套代码，多端运行”。开发者编写一套代码后，可以将其编译发布到 iOS、Android、Web（H5）、以及各种主流小程序（微信、支付宝、抖音、百度等）和鸿蒙系统上36。它采用原生渲染，性能接近原生项目，且完全兼容 Vue2/Vue3 语法，零学习成本
官网地址：uni-app快速上手 | uni-app官网
4.1重要概念和语法
pages/：存放所有业务页面，页面必须在此注册路由才能访问。static/：存放图片、字体等静态资源。components/：存放全局公共组件。pages.json：重中之重，用于配置页面路由、导航栏标题、颜色以及 tabBar 等- 单位rpx
- 绑定事件用@click 或者@tap
onLoad(options)：页面首次加载时触发，只执行一次。常用于初始化数据、解析 URL 参数或发起网络请求。onShow()：页面每次显示时触发（包括从其他页面返回）。常用于刷新列表或更新状态。- 下拉刷新：需在
pages.json中开启enablePullDownRefresh。在页面中监听onPullDownRefresh事件，用于重置页码并重新加载第一页数据，加载完成后调用uni.stopPullDownRefresh()停止动画。 - 上拉加载更多：监听
onReachBottom事件，当页面滚动到底部时触发，用于请求下一页数据。
4.2基本语法
创建项目(vue3+ts)：
npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project安装依赖：
npx @dcloudio/uvm@latesttabbar
{ "pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/cart/index", "style": { "navigationBarTitleText": "购物车" } }, { "path": "pages/my/index", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/subpage/list/list", // 页面路径是相对于 root 的，同样不写 .vue 后缀 "style": { "navigationBarTitleText": "测试页面" } } ], // "subPackages": [ // { // "root": "subpage", // 分包的根目录 // "pages": [ // { // "path": "list/list", // 页面路径是相对于 root 的，同样不写 .vue 后缀 // "style": { // "navigationBarTitleText": "测试页面" // } // } // ] // } // ], "tabBar": { "color": "#999999", "selectedColor": "#007AFF", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/cart/index", "text": "购物车" }, { "pagePath": "pages/my/index", "text": "我的" } ] }, "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "uni-app", "navigationBarBackgroundColor": "#F8F8F8", "backgroundColor": "#F8F8F8" } }4.3页面跳转
4.3.1保留式跳转：uni.navigateTo
原理：保留当前页面，将其压入页面栈（page stack），跳转到新页面。用户可以通过左滑或返回按钮回到上一页。
适用场景：列表页跳转到详情页、表单页跳转到确认页等所有需要支持返回的场景。
传值方式：直接在
url后面拼接参数（如?id=123&name=John）。接收参数：在目标页面的
onLoad(options)生命周期中，通过options.id获取。
4.3.2. 替换式跳转：uni.redirectTo
- 原理：关闭当前页面，再打开新页面。当前页面会被销毁，用户在新页面无法通过返回键回到被关闭的那一页。
- 适用场景：登录成功后跳转首页、支付成功页、注册完成页等“一次性”操作完成后的跳转。
4.3.3. 全清重置跳转：uni.reLaunch
- 原理：关闭应用内所有页面后，打开指定页面。页面栈被完全清空，是最彻底的跳转方式。
- 适用场景：退出登录、切换账号、应用重置。
4.3.4 Tab 页跳转：uni.switchTab
- 原理：专门用于跳转到
pages.json中配置了tabBar的页面。跳转时会关闭所有非 tabBar 页面。 - 适用场景：底部 Tab 切换、业务流程结束回到主页。
- 注意：
switchTab的url不能带参数。如果需要向 Tab 页传递数据，可以通过全局变量（globalData）、Pinia/Vuex 或 Storage 中转。
4.3.5. 返回上级：uni.navigateBack
- 原理：关闭当前页面，返回上一页或多级页面。
- 适用场景：表单取消、弹窗关闭、跨级返回。
4.4组件传值
4.4.1父传子（Props）
子组件：
<template> <view>{{title}}</view> <view>{{count}}</view> </template> <script lang="ts" setup> const props = defineProps({ title: { type: String, default: '默认标题' }, count: { type: Number, default: 0 } }) </script> <style scoped> </style>父组件：
<template> <view> <button @tap ="gotoPage">点击跳转到列表页</button> </view> <view> <ChildComponent :title="title" :count="count"/> </view> </template> <script setup lang="ts"> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' const title = ref('Hello') const count = ref(1222) const gotoPage = () => { uni.navigateTo({ url: '/pages/subpage/list/list' }) } </script> <style> </style>4.4.2子传父（emits）
子组件：
<template> <button @click="sendData">点击向父组件发送数据</button> </template> <script lang="ts" setup> //定义要触发的事件名称 const emits = defineEmits(['sendData']) //触发事件，并传递参数 const sendData = () => { emits(`sendData`,{name:'Hello',age:25}) } </script> <style scoped> </style>父组件：
<template> <view> <button @tap ="gotoPage">点击跳转到列表页</button> </view> <view> <!-- 父传子--> <ChildComponent :title="title" :count="count"/> <!-- 子传父--> <child-component1 @sendData="handleChildData"/> <!-- 兄弟相传/跨页面--> <ChildComponent2/> </view> </template> <script setup lang="ts"> import { ref } from 'vue' import ChildComponent from './ChildComponent.vue' import ChildComponent1 from './ChildComponent1.vue' import ChildComponent2 from '/src/pages/cart/Component2.vue' const title = ref('Hello') const count = ref(1222) const handleChildData = (data:any) => { console.log("子组件传过来的值",data) } const gotoPage = () => { uni.navigateTo({ url: '/pages/subpage/list/list' }) } </script> <style> </style>4.4.3兄弟/不同页面（uni.$emit，uni.$on,uni.$off）
A组件：
<template> <button @click="notifyBrother">跨页面/兄弟组件传值</button> </template> <script lang="ts" setup> const notifyBrother = () => { //全局触发事件 uni.$emit('sync-user-info',{userId:1,userName:"张三"}) } </script> <style scoped> </style>B组件：
<template> <view>我的购物车页面</view> <text>接受的用户数据是：{{userInfo}}</text> </template> <script lang="ts" setup> import {ref,onMounted,onUnmounted} from 'vue' const userInfo = ref(null); //接收到的数据 const handleSync = (data:any) => { userInfo.value = data; console.log("接收到的数据",data); } //在组件挂载的时候监听 onMounted(() => { uni.$on('sync-user-info', handleSync); }) //卸载前移除监听 onUnmounted(() => { uni.$off('sync-user-info', handleSync); }) </script> <style scoped> </style>4.4.4 v-model
子组件：
<template> <view> <input :value="modelValue" @input="handleInput" placeholder="请输入内容"> </view> </template> <script lang="ts" setup> const props = defineProps({ modelValue: { //必须叫modelValue type: String, default: '', } }) //触发事件 const emit = defineEmits(['update:modelValue']) const handleInput = (e:any) => { //将新值通过事件回传给父组件 emit('update:modelValue', e.detail.value) } </script> <style scoped> </style>父组件：
<template> <view>我的页面</view> <!-- 自定义组件支持 v-model--> <ChildComponent3 v-model="inputValue"/> <text>输入的值是：{{inputValue}}</text> <!-- 父类直接操作子类的方法--> <Component4 ref="childRef"/> <button @click="callChild"> 调用子组件的方法</button> </template> <script lang="ts" setup> import {ref} from "vue"; import ChildComponent3 from './Component3.vue' const inputValue = ref("") import Component4 from './Component4.vue' //创建一个ref来接收子组件的实例 const childRef = ref(null) const callChild = () =>{ childRef.value.childMethod("我是父组件传来的参数") } </script> <style scoped> </style>4.4.5 ref
<template> <view> <text>子组件内容</text> </view> </template> <script lang="ts" setup> const childMethod = (msg: string) => { console.log("父组件调用我的方法",msg) } //将方法暴漏出去 defineExpose( { childMethod } ) </script> <style scoped> </style>4.5常用方法
下拉刷新/上拉加载更多
在pages.json中开启配置
"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "首页", "enablePullDownRefresh": true, // 开启下拉刷新 "onReachBottomDistance": 50 // 距离底部 50px 时触发上拉加载 } }, { "path": "pages/cart/index", "style": { "navigationBarTitleText": "购物车" } }, { "path": "pages/my/index", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/subpage/list/list", // 页面路径是相对于 root 的，同样不写 .vue 后缀 "style": { "navigationBarTitleText": "测试页面" } } ],在代码处导入方法
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app' //下拉刷新事件 onPullDownRefresh(() => { }) //上拉触底事件 onReachBottom(() => { })4.6uni-app x
5.组件库
6.前端全栈
6.1next.js
6.2nuxt3
6.3express(node的后端框架)