1.vue1.1vue21.2vue32.react2.1类组件Class Component2.2函数组件Function Component3.ts4.uni-appuni-app 是一个使用 Vue.js 语法开发前端应用的框架。它的核心优势是“一套代码多端运行”。开发者编写一套代码后可以将其编译发布到 iOS、Android、WebH5、以及各种主流小程序微信、支付宝、抖音、百度等和鸿蒙系统上36。它采用原生渲染性能接近原生项目且完全兼容 Vue2/Vue3 语法零学习成本官网地址uni-app快速上手 | uni-app官网4.1重要概念和语法pages/存放所有业务页面页面必须在此注册路由才能访问。static/存放图片、字体等静态资源。components/存放全局公共组件。pages.json重中之重用于配置页面路由、导航栏标题、颜色以及 tabBar 等单位rpx绑定事件用click 或者taponLoad(options)页面首次加载时触发只执行一次。常用于初始化数据、解析 URL 参数或发起网络请求。onShow()页面每次显示时触发包括从其他页面返回。常用于刷新列表或更新状态。下拉刷新需在pages.json中开启enablePullDownRefresh。在页面中监听onPullDownRefresh事件用于重置页码并重新加载第一页数据加载完成后调用uni.stopPullDownRefresh()停止动画。上拉加载更多监听onReachBottom事件当页面滚动到底部时触发用于请求下一页数据。4.2基本语法创建项目(vue3ts)npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project安装依赖npx dcloudio/uvmlatesttabbar{ 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后面拼接参数如?id123nameJohn。接收参数在目标页面的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 langts 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 :titletitle :countcount/ /view /template script setup langts 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 /style4.4.2子传父emits子组件template button clicksendData点击向父组件发送数据/button /template script langts 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 :titletitle :countcount/ !-- 子传父-- child-component1 sendDatahandleChildData/ !-- 兄弟相传/跨页面-- ChildComponent2/ /view /template script setup langts 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 /style4.4.3兄弟/不同页面uni.$emituni.$on,uni.$offA组件template button clicknotifyBrother跨页面/兄弟组件传值/button /template script langts setup const notifyBrother () { //全局触发事件 uni.$emit(sync-user-info,{userId:1,userName:张三}) } /script style scoped /styleB组件template view我的购物车页面/view text接受的用户数据是{{userInfo}}/text /template script langts 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 /style4.4.4 v-model子组件template view input :valuemodelValue inputhandleInput placeholder请输入内容 /view /template script langts 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-modelinputValue/ text输入的值是{{inputValue}}/text !-- 父类直接操作子类的方法-- Component4 refchildRef/ button clickcallChild 调用子组件的方法/button /template script langts 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 /style4.4.5 reftemplate view text子组件内容/text /view /template script langts setup const childMethod (msg: string) { console.log(父组件调用我的方法,msg) } //将方法暴漏出去 defineExpose( { childMethod } ) /script style scoped /style4.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 x5.组件库6.前端全栈6.1next.js6.2nuxt36.3express(node的后端框架)