培训对象:适合具备前端开发基础,希望掌握跨平台移动端开发技术、实现一次编写多端部署的前端开发者。
培训目标:完成本课程后,学员将能够深入理解移动端开发的特点与跨端适配的核心挑战。熟练掌握UniApp框架开发微信小程序/H5应用,了解Flutter基础语法与UI构建方式。掌握响应式布局、视口适配、移动端调试等技术,具备独立开发跨端移动应用的能力。
培训内容:
(1)移动端开发概述:了解移动端开发的主要形态(原生App、WebApp、Hybrid App、小程序、跨端框架)。掌握移动端开发的核心挑战:屏幕适配、性能优化、交互体验、离线存储。
(2)视口与移动端布局:深入理解视口(viewport)的概念与配置方法。掌握移动端常用布局方案:Flex弹性布局、Grid网格布局。学习移动端适配方案:rem、vw/vh、媒体查询。
(3)移动端事件与交互:掌握移动端触摸事件(touchstart/touchmove/touchend)的使用,理解点击延迟问题与解决方案。学习常用移动端手势(单击、双击、长按、滑动)的实现。
(4)UniApp框架基础:了解UniApp的核心价值(一套代码发布到iOS/Android/H5/小程序)。掌握HBuilderX开发工具的安装与使用,创建第一个UniApp项目。
(5)UniApp页面与组件:掌握UniApp的页面生命周期与路由配置。学习UniApp内置组件(view、scroll-view、swiper、image、text、button)的使用。掌握Flex布局在UniApp中的应用。
(6)UniApp API调用:学习UniApp常用API的调用:网络请求(uni.request)、本地存储(uni.setStorage)、位置获取(uni.getLocation)、扫码(uni.scanCode)。理解不同平台API的差异与兼容处理。
(7)UniApp跨端适配:掌握条件编译(#ifdef/#ifndef)实现不同平台的差异化代码。学习处理不同端(微信小程序、App、H5)的样式差异与功能适配。
(8)UniApp云开发:了解UniCloud云开发的基本概念,学习云数据库、云函数的创建与使用。实践实现用户登录、数据操作等后端功能。
(9)Flutter入门:了解Flutter作为跨端UI框架的核心优势(高性能、自绘引擎、原生体验)。掌握Flutter开发环境的搭建与Dart语言基础。
(10)Flutter基础组件:学习Flutter常用Widget:Container、Row/Column、Stack、Text、Image、ListView。理解Flutter中"一切皆Widget"的设计思想。
(11)Flutter状态管理:掌握setState实现组件状态更新,了解Provider等状态管理方案的基本思路。学习Flutter中的路由与导航。
(12)综合项目实战:结合所学知识,完成一个完整的移动端应用项目(如新闻资讯App、天气预报小程序)。涵盖UniApp/Flutter开发、跨端适配、API集成、真机调试的全流程。