UniApp Vue3 组合式 API 版本 15 天学习计划
第1天:开发环境配置和基础知识
- uniapp Vue3 版本知识点概述
- 安装并配置 HBuilderX 编辑器
- 创建第一个 Vue3 项目
- 配置外部浏览器和各种小程序模拟器
- 创建页面及了解 Vue 页面的基本组成部分
第2天:常用内置组件
- 学习 view 和 text 组件的使用
- 掌握 scroll-view 可滚动视图区域组件
- 理解 swiper 滑块视图容器的用法
- 学习 image 组件属性,并结合 swiper 实现图片轮播
- 使用 navigator 组件实现路由与页面跳转
- 熟悉 button 和 input 等常用表单组件
第3天:Vue3 组合式 API 基础(上)
- 学习 Vue3 模板语法和插值表达式
- 使用 ref 定义响应式数据变量
- 掌握 v-bind 指令,并用于图片轮播案例
- 学习 class 和 style 的动态绑定
- 了解事件处理,包括原生事件和组件内置事件
- 创建自定义模板,快速生成 uniapp 的 Vue3 页面结构
第4天:Vue3 组合式 API 基础(下)
- 学习条件渲染 v-if 和 v-show 的使用和对比
- 掌握列表渲染 v-for 的用法
- 完成购物车案例,理解 key 的重要性
- 实现小鸡案例,学习表单 focus 和 blur 事件
- 理解 v-model 双向绑定的实现原理
- 完成热梗案例,综合运用前面学习的知识点
第5天:Vue3 高级特性
- 学习 computed 计算属性的用法
- 完成计价案例,使用计算属性配合循环遍历统计总价
- 掌握 watch 和 watchEffect 的使用方法
- 了解 computed、watch 和 methods 的异同点和使用场景
第6天:深入 Vue 组件(上)
- 学习 uniapp 中创建组件的方法,对比 Vue 官方文档
- 掌握通过 Props 进行组件间数据传递
- 学习 Prop 校验和默认值设置
- 理解插槽(Slots)和具名插槽的使用
第7天:深入 Vue 组件(下)
- 学习在组件中使用 emit 声明和触发事件
- 了解 Vue3 组合式 API 中的组件生命周期函数
- 使用 defineExpose 暴露子组件的属性和方法
- 掌握页面生命周期函数 onLoad 和 onReady 的使用
- 对比 onShow 和 onHide 钩子,了解它们的执行顺序
- 学习 onUnload 和 onPageScroll 的使用场景
第8天:uniapp 全局配置和 API 调用(上)
- 了解响应式单位 rpx 和 UI 设计工具的使用
- 学习导入 CSS 样式和使用 SCSS 变量
- 配置 pages.json 的 globalStyle 属性
- 设置页面路径和窗口表现
- 配置 tabBar 底部菜单
- 学习配置 manifest.json 和注册微信小程序 appid
第9天:uniapp 全局配置和 API 调用(下)
- 安装和使用 unplugin-auto-import 插件
- 学习交互反馈 API:showToast、showLoading、showModal
- 掌握 showActionSheet 的使用
- 学习动态设置页面导航条样式
- 了解 setTabBar 和下拉刷新 API 的使用
- 掌握页面路由 API 和获取页面栈信息
- 学习使用 StorageSync 进行数据缓存
- 掌握 uni.request 发送网络请求的方法
第10天:萌宠集小实例开发
- 完成页面布局设计
- 调用萌宠 API 接口并渲染数据
- 学习使用 access-key 进行 API 认证
- 实现图片预览和懒加载功能
- 学习 Promise 的 then-catch-finally 用法
- 实现下拉刷新和触底加载更多功能
- 了解底部安全区域 CSS 环境变量
- 学习使用 uni-ui 扩展组件
- 实现使用分段器组件切换萌宠类型
第11天:咸虾米壁纸项目(上)
- 项目概述和初始化
- 实现 banner 海报轮播功能
- 使用 swiper 实现纵向公告区域
- 完成每日推荐滑动布局
- 学习使用组件具名插槽定义公共标题模块
- 实现磨砂背景定位布局的专题组件
- 学习同一组件传递不同属性值展示不同效果
第12天:咸虾米壁纸项目(中)
- 设置项目底部 tab 页面切换
- 完成个人中心页面布局
- 学习使用条件编译实现多终端匹配
- 设置全局渐变背景色
- 学习使用 SCSS 变量和 deep() 修改子组件样式
- 创建分类列表并完成页面跳转
- 实现全屏页面布局和遮罩层效果
- 使用 uni-popup 组件制作弹出层效果
第13天:咸虾米壁纸项目(下)
- 实现评分功能,使用 uni-rate 组件
- 自定义头部导航栏布局
- 学习获取系统信息,适配不同设备
- 使用条件编译适配抖音小程序
- 完善各个页面的布局和串联
第14天:网络请求封装和接口对接
- 封装 Promise 化的 request 网络请求
- 在首页调用真实接口并渲染数据
- 完成分类页面的数据渲染
- 实现触底加载更多功能
- 添加骨架屏和加载更多样式
- 实现壁纸预览和切换功能
- 完成评分接口对接和本地缓存
- 实现保存壁纸到相册功能
- 添加分享功能
第15天:项目完善和多平台打包上线
- 完成个人中心页面数据渲染
- 实现下载和评分页面
- 使用富文本插件渲染公告详情
- 完成搜索功能
- 学习跳转到其他小程序的方法
- 打包发行微信小程序
- 打包抖音小程序
- 打包 H5 并发布到 uniCloud
- 打包安卓 APP
- 项目总结和知识拓展