【博学网课】Ionic3 多平台开发企业级问答社区实战讲座

快速上手Ionic3 多平台开发企业级问答社区

想学Ionic3，苦于学习成本高？新手难搞定？Come on！新手、进阶通通看过来，本课将 Ionic开发过程中的重要知识点、遇到的各种问题结合项目实战通过渐进式讲解，让大家具有独立开发跨多台 App 的技能，顺利积累完整 App 开发实战经验。

第1章 课程简介

课程导读，演示了课程最终实现的 App 效果，介绍了课程的基本结构、理论课程大纲、实战课程讲解方法、提高课程大纲以及前置知识点，并演示了课程源码结构与课程详细的开发笔记思维导图，最后介绍了学习此课程的收获。

 

1-1 ionic3-导学

第2章 Ionic 框架介绍

主要对Ionic 框架简介及实战前重要知识点、Ionic 版本详细讲解与注意事项、Ionic 框架文档、API、源码、Ionic 官方Slack、博客论坛介绍、Ionic 组件简介、Ionic Native 框架、IONICONS 等知识点进行了详细地讲解，此部分基础知识不管是对新手还是高手都具有参考意义。...

 

2-1 Ionic 框架简介

2-2 Ionic 版本详细讲解与注意事项

2-3 Ionic 框架文档、API、源码

2-4 Ionic 官方Slack、博客论坛介绍

2-5 Ionic 组件简介

2-6 Ionic Native 框架简介

第3章 项目实战—必备前置知识点

主要包含课程使用的思维导图软件介绍、Node.js 框架介绍。并实战演示了 Mac 与 Windows 环境下的 Node.js 指定版本安装、网络问题解决办法与此实战课程指定版本 Ionic 安装、课程编写代码使用的 VSCode 介绍、安装、VSCode 开发 Ionic 必备的插件介绍与安装、Android 开发环境安装、Android 模拟器 GenyMo...

 

3-1 课程使用的思维导图软件介绍

3-2 Node.js 框架介绍

3-3 Mac 与 Windows 环境下的 Node.js 指定版本安装实战演示

3-4 网络问题解决办法与此实战课程指定版本 Ionic 安装实战演示

3-5 课程编写代码使用的 VSCode 介绍、安装实战演示

3-6 VSCode 开发 Ionic 必备的插件介绍与安装演示

3-7 Android 开发环境安装实战演示

3-8 Android 模拟器 GenyMotion 安装实战演示

3-9 Xcode 简介与使用注意点

3-10 Ionic 使用的 TypeScript 语言简介

第4章 项目实战—开发环境初始化

此章节进行项目的初始化。主要介绍使用 Ionic CLI 进行项目的初始化构建，同时又介绍了Ionic CLI 初始化失败时的另一种构建项目方案。并介绍了项目开发工具 VSCode 必备插件安装与设置。然后对项目进行了打包，并讲解了如何分别在 iOS、Android 以及浏览器与微信中运行测试。...

 

4-1 使用 Ionic CLI 进行项目的初始化构建

4-2 Ionic CLI 初始化失败时的另一种构建项目方案

4-3 VSCode 打开项目插件初始化设置

4-4 编译项目的方法并在 iOS 环境下体验

4-5 编译项目的方法并在 Android 环境下体验

4-6 编译项目的方法并在浏览器环境下体验

4-7 编译项目的方法并在微信环境下体验

第5章 项目实战—App 基础布局开发

此章节先对整体项目参考的 App 设计以及设计稿进行了介绍。并进行了 App 底部 Tabs 布局的开发。同时建立了五个基础页面，还讲解了测试 API 的工具 Postman，便于大家测试接口。

 

5-1 项目布局参考的 App 细节讲解

5-2 tab 组件布局以及图标选择

5-3 五个一级基础页面的建立与调试

5-4 项目数据源 API 解读与测试工具 Postman

第6章 项目实战—用户登录组件开发

此项目实战章节主要开发以下模块：用户未登录模块、通用组件之 Rest 模块的建立与逻辑添加、用户登录页面布局、用户登录逻辑与 API 结合、用户登录后的页面建立与逻辑添加、通用组件之通用组件的代码整理与注释添加、登录过程中用户密码的安全性处理。...

 

6-1 用户未登录的页面开发（上）

6-2 用户未登录的页面开发（下）

6-3 通用组件之 Rest 模块的建立与逻辑添加

6-4 用户登录页面布局开发（上）

6-5 用户登录页面布局开发（下）

6-6 用户登录逻辑与 API 结合的开发（上）

6-7 用户登录逻辑与 API 结合的开发（下）

6-8 用户登录后的页面建立与逻辑添加

6-9 通用组件之通用组件的代码整理与注释添加

第7章 项目实战—用户注册组件开发

此项目实战章节主要开发用户注册模块并详细讲解了用户注册表单验证的增强。用户登录与注册模块涉及技术点 Ionic 表单Ionic Provider、Ionic 请求 RESTful、Ionic Loading、Ionic Toast、Ionic Modal、Ionic 模块的抽象。

 

7-1 用户注册页面的开发与逻辑嵌入

7-2 用户注册页面与 API 结合的开发

7-3 用户注册表单验证的增强

第8章 项目实战—个人信息组件开发

此项目实战章节主要开发以下模块：用户头像和个人信息布局、用户头像和个人信息数据加载、个人信息修改页面的布局、个人信息修改页面数据加载。

 

8-1 用户头像和个人信息布局开发

8-2 用户头像和个人信息数据加载开发

8-3 个人信息修改页面的布局开发

8-4 个人信息修改页面数据加载开发

第9章 项目实战—图片上传组件开发

此项目实战章节主要开发以下模块：修改头像功能页面的整体结构、修改头像功能页面的布局开发、获取图片的逻辑处理、图片处理后的图片上传逻辑。最后在 iOS、Android 系统下测试图片上传的功能。涉及的技术点：Ionic Navigation、Ionic Native Camera、Ionic Native File、Ionic Native FilePath、Ionic Native T...

 

9-1 修改头像功能页面的整体结构讲解

9-2 修改头像功能页面的布局开发

9-3 获取图片的逻辑处理（上）

9-4 获取图片的逻辑处理（中）

9-5 获取图片的逻辑处理（下）

9-6 图片处理后的图片上传逻辑开发

9-7 图片处理后的图片上传逻辑开发-修复一个官方bug

9-8 在不同的系统下测试图片上传的功能

第10章 项目实战—首页模块开发

此项目实战章节主要开发以下模块：搜索部分页面布局、三栏功能按钮布局及事件加载、提问页面的页面布局、提问页面的逻辑。首页模块涉及的技术点： Flex 布局、Ionic Grid、Ionic Card、Ionic List、Ionic SearchBar。

 

10-1 搜索部分页面布局

10-2 三栏功能按钮布局及事件加载

10-3 提问页面的页面布局开发（一）

10-4 提问页面的页面布局开发（二）

10-5 提问页面的逻辑开发（一）

10-6 提问页面的逻辑开发（二）

第11章 项目实战—问题列表、详情、回答组件开发

此项目实战章节主要开发以下模块：问题页表的页面布局、问题列表页面的数据绑定逻辑、问题详情页面的布局、问题详情页面的数据、问题回答页面的布局、问题回答页面的功能。整个首页包含的模块如下：提问模块、问题列表、问题详情、问题关注功能、问题回答模块。...

 

11-1 问题页表的页面布局开发（一）

11-2 问题页表的页面布局开发（二）

11-3 问题页表的页面布局开发（三）

11-4 问题列表页面的数据绑定逻辑开发（一）

11-5 问题列表页面的数据绑定逻辑开发（二）

11-6 问题详情页面的布局开发（一）

11-7 问题详情页面的布局开发（二）

11-8 问题详情页面的数据加载（一）

11-9 问题详情页面的数据加载（二）

11-10 问题详情页面的数据加载（三）

11-11 问题回答页面的布局开发

11-12 问题回答页面的功能开发

第12章 项目实战—发现模块开发

此项目实战章节主要开发发现模块，主要包含功能点：List 数据加载、大模块的重构与复用。技术点如下：Angular 模块抽象与复用、Ionic 页面加载优化。

 

12-1 发现页面的页面布局设计

12-2 发现页面的逻辑开发

第13章 项目实战—聊天机器人模块开发

此项目实战章节主要开发以下模块：聊天模块的功能设计介绍、聊天模块的页面列表设计与开发、聊天对话页面的页面布局、聊天对话页面底部输入框设计与开发、聊天对话页面表情输入模块 、聊天页面自动回复逻辑。实战过程中主要介绍了一下的技术点：Angular Service、Angular Event、Angular Pipes、Ionic RelativeTime P...

 

13-1 聊天模块的功能设计介绍

13-2 聊天模块的页面列表设计与开发

13-3 聊天对话页面的页面布局

13-4 聊天对话页面底部输入框设计与开发

13-5 聊天对话页面表情输入模块的开发（一）

13-6 聊天对话页面表情输入模块的开发（二）

13-7 聊天对话页面表情输入模块的开发（三）

13-8 聊天页面自动回复逻辑的开发（一）

13-9 聊天页面自动回复逻辑的开发（二）

13-10 聊天页面自动回复逻辑的开发（三）- Events 的设计模式

13-11 聊天页面自动回复逻辑的开发（四）- Events 的设计模式

13-12 聊天页面自动回复逻辑的开发（五）

第14章 项目实战—通知模块开发

此项目实战章节主要开发了通知模块，快速地进行了列表的布局与逻辑绑定的添加，加深对前面基础但常用的数据请求与列表绑定知识进行了复习。

 

14-1 通知模块的页面布局开发

14-2 通知页面的列表数据加载

第15章 项目实战—我的慕课模块开发

此项目实战章节主要开发以下模块：我的慕课页面布局、我的提问模块页面、我的提问模块页面数据加载、我的关注模块、我的回答模块。主要讲解了模块化开发的设计原则与实战演示，同时讲解了软件开发应该遵循的一些设计原则。...

 

15-1 个人中心我的慕课页面布局开发

15-2 公用模块的设计与布局开发

15-3 公用模块的逻辑开发

15-4 快速绑定对应参数生成列表的方法

第16章 项目实战—动态样式、夜间模式

此章节主要介绍 Ionic 中动态样式的加载原理，并同时开发了夜间模式的模块。同时演示了一些样式编写的技巧。

 

16-1 夜间模式的样式定义原理及样式定义

16-2 夜间模式的布局实现

16-3 夜间模式的功能实现

第17章 Ionic Native 回顾与二维码扫描、关于模块

课程再次回顾了 Ionic Native 的使用，并介绍了两个组件：QR Scanner 与 App Version。同时进行了实战开发，并对使用组件中会遇到的一些需要特别避开的问题进行了原理性讲解。

 

17-1 二维码扫描功能布局开发

17-2 二维码扫描功能实现

17-3 关于模块的 App 信息读取

第18章 项目实战—App 打包前优化方案

课程主要讲解并实际演示了 Ionic App 打包前图标生成、Ionic App 打包前启动图生成、Ionic App 打包前的优化方案讲解。这些是打包前需要做的工作，也会分享在开发中如何大幅度提高开发效率的方法。

 

18-1 Ionic App 打包前图标生成

18-2 Ionic App 打包前启动图生成

18-3 Ionic App 打包前的代码整理

第19章 项目实战—App iOS 版本打包上架实战

课程再次演示了最终的项目如何编译打包成 iOS 项目，并演示了如何将项目提交到 App Store 审核。供同学们提交 iOS 应用审核时参考。

 

19-1 Ionic iOS App 上架操作实战演示（一）

19-2 Ionic iOS App 上架操作实战演示（二）

第20章 项目实战—App Android 版本打包实战

课程再次演示了如何将最终的项目打包生成 Android 的 apk 安装包，并简单介绍了目前可以上架的 Android 市场。供同学们上架 Android 应用时参考。

 

20-1 Ionic Android App 打包实战操作演示

第21章 项目实战—App 网页、微信版本打包实战

课程再次演示了如何将最终的项目打包成浏览器下的部署文件，并演示了如何将文件包部署成网站，并最终发布到浏览器或者微信中去。供同学们部署成网页应用时参考。

 

21-1 Ionic 项目发布到网站并在手机以及微信中的实战演示