15天项目

UniApp Vue3 组合式 API 版本 15 天学习计划

第1天:开发环境配置和基础知识

  1. uniapp Vue3 版本知识点概述
  2. 安装并配置 HBuilderX 编辑器
  3. 创建第一个 Vue3 项目
  4. 配置外部浏览器和各种小程序模拟器
  5. 创建页面及了解 Vue 页面的基本组成部分

第2天:常用内置组件

  1. 学习 view 和 text 组件的使用
  2. 掌握 scroll-view 可滚动视图区域组件
  3. 理解 swiper 滑块视图容器的用法
  4. 学习 image 组件属性,并结合 swiper 实现图片轮播
  5. 使用 navigator 组件实现路由与页面跳转
  6. 熟悉 button 和 input 等常用表单组件

第3天:Vue3 组合式 API 基础(上)

  1. 学习 Vue3 模板语法和插值表达式
  2. 使用 ref 定义响应式数据变量
  3. 掌握 v-bind 指令,并用于图片轮播案例
  4. 学习 class 和 style 的动态绑定
  5. 了解事件处理,包括原生事件和组件内置事件
  6. 创建自定义模板,快速生成 uniapp 的 Vue3 页面结构

第4天:Vue3 组合式 API 基础(下)

  1. 学习条件渲染 v-if 和 v-show 的使用和对比
  2. 掌握列表渲染 v-for 的用法
  3. 完成购物车案例,理解 key 的重要性
  4. 实现小鸡案例,学习表单 focus 和 blur 事件
  5. 理解 v-model 双向绑定的实现原理
  6. 完成热梗案例,综合运用前面学习的知识点

第5天:Vue3 高级特性

  1. 学习 computed 计算属性的用法
  2. 完成计价案例,使用计算属性配合循环遍历统计总价
  3. 掌握 watch 和 watchEffect 的使用方法
  4. 了解 computed、watch 和 methods 的异同点和使用场景

第6天:深入 Vue 组件(上)

  1. 学习 uniapp 中创建组件的方法,对比 Vue 官方文档
  2. 掌握通过 Props 进行组件间数据传递
  3. 学习 Prop 校验和默认值设置
  4. 理解插槽(Slots)和具名插槽的使用

第7天:深入 Vue 组件(下)

  1. 学习在组件中使用 emit 声明和触发事件
  2. 了解 Vue3 组合式 API 中的组件生命周期函数
  3. 使用 defineExpose 暴露子组件的属性和方法
  4. 掌握页面生命周期函数 onLoad 和 onReady 的使用
  5. 对比 onShow 和 onHide 钩子,了解它们的执行顺序
  6. 学习 onUnload 和 onPageScroll 的使用场景

第8天:uniapp 全局配置和 API 调用(上)

  1. 了解响应式单位 rpx 和 UI 设计工具的使用
  2. 学习导入 CSS 样式和使用 SCSS 变量
  3. 配置 pages.json 的 globalStyle 属性
  4. 设置页面路径和窗口表现
  5. 配置 tabBar 底部菜单
  6. 学习配置 manifest.json 和注册微信小程序 appid

第9天:uniapp 全局配置和 API 调用(下)

  1. 安装和使用 unplugin-auto-import 插件
  2. 学习交互反馈 API:showToast、showLoading、showModal
  3. 掌握 showActionSheet 的使用
  4. 学习动态设置页面导航条样式
  5. 了解 setTabBar 和下拉刷新 API 的使用
  6. 掌握页面路由 API 和获取页面栈信息
  7. 学习使用 StorageSync 进行数据缓存
  8. 掌握 uni.request 发送网络请求的方法

第10天:萌宠集小实例开发

  1. 完成页面布局设计
  2. 调用萌宠 API 接口并渲染数据
  3. 学习使用 access-key 进行 API 认证
  4. 实现图片预览和懒加载功能
  5. 学习 Promise 的 then-catch-finally 用法
  6. 实现下拉刷新和触底加载更多功能
  7. 了解底部安全区域 CSS 环境变量
  8. 学习使用 uni-ui 扩展组件
  9. 实现使用分段器组件切换萌宠类型

第11天:咸虾米壁纸项目(上)

  1. 项目概述和初始化
  2. 实现 banner 海报轮播功能
  3. 使用 swiper 实现纵向公告区域
  4. 完成每日推荐滑动布局
  5. 学习使用组件具名插槽定义公共标题模块
  6. 实现磨砂背景定位布局的专题组件
  7. 学习同一组件传递不同属性值展示不同效果

第12天:咸虾米壁纸项目(中)

  1. 设置项目底部 tab 页面切换
  2. 完成个人中心页面布局
  3. 学习使用条件编译实现多终端匹配
  4. 设置全局渐变背景色
  5. 学习使用 SCSS 变量和 deep() 修改子组件样式
  6. 创建分类列表并完成页面跳转
  7. 实现全屏页面布局和遮罩层效果
  8. 使用 uni-popup 组件制作弹出层效果

第13天:咸虾米壁纸项目(下)

  1. 实现评分功能,使用 uni-rate 组件
  2. 自定义头部导航栏布局
  3. 学习获取系统信息,适配不同设备
  4. 使用条件编译适配抖音小程序
  5. 完善各个页面的布局和串联

第14天:网络请求封装和接口对接

  1. 封装 Promise 化的 request 网络请求
  2. 在首页调用真实接口并渲染数据
  3. 完成分类页面的数据渲染
  4. 实现触底加载更多功能
  5. 添加骨架屏和加载更多样式
  6. 实现壁纸预览和切换功能
  7. 完成评分接口对接和本地缓存
  8. 实现保存壁纸到相册功能
  9. 添加分享功能

第15天:项目完善和多平台打包上线

  1. 完成个人中心页面数据渲染
  2. 实现下载和评分页面
  3. 使用富文本插件渲染公告详情
  4. 完成搜索功能
  5. 学习跳转到其他小程序的方法
  6. 打包发行微信小程序
  7. 打包抖音小程序
  8. 打包 H5 并发布到 uniCloud
  9. 打包安卓 APP
  10. 项目总结和知识拓展
相关推荐
如若1239 分钟前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~1 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语1 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport1 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg1 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww1 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254881 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui
星就前端叭2 小时前
【开源】一款基于Vue3 + WebRTC + Node + SRS + FFmpeg搭建的直播间项目
前端·后端·开源·webrtc
m0_748234522 小时前
前端Vue3字体优化三部曲(webFont、font-spider、spa-font-spider-webpack-plugin)
前端·webpack·node.js
Web阿成2 小时前
3.学习webpack配置 尝试打包ts文件
前端·学习·webpack·typescript