当前位置: 首页 > article >正文

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. 项目总结和知识拓展

http://www.kler.cn/news/341159.html

相关文章:

  • 算法 动态规划
  • 面试经验02
  • 【第2章 开始学习C++】C++语句
  • 微调大语言模型——超详细步骤
  • 读懂RAG理论到实践
  • 使用 Netperf 工具进行 TCP 和 UDP 时延测试
  • 王阳明的「知行合一」到底怎样运用到实际生活中?
  • 动手学深度学习(李沐)PyTorch 第 6 章 卷积神经网络
  • IDEA上Mybatis介绍和使用
  • 【论文阅读】超分辨率图像重建算法综述
  • 前沿论文 M5Product 组会 PPT
  • 如何更改CubeIDE的字体大小
  • 微信小程序 - 01 - 一些补充和注意点(补充ing...)
  • 【机器学习】深度学习、强化学习和深度强化学习?
  • 陈文自媒体:2024下半年,新手搞头条行情如何?
  • Java基础知识——String篇
  • CANoe_DBC_ValueTable格式报错_syntax error
  • 《基于FreeRTOS的STM32超声波智能避障平衡小车,实现了小车的自平衡、超声波避障以及通过智能手机远程控制的功能》+源代码+文献资料+文档说明
  • 微信小程序和uniapp对比区别
  • extern