【江苏大学研究生小记】我的《移动互联网开发》汇报讲义

这是我在研究生期间，上的江苏大学的《移动互联网开发》课程做汇报时的讲义。

每次做汇报时，总是容易控制不住时间，不小心讲太多，哇哈哈

本科期间的汇报讲义：我的网络安全第三次实验汇报

大纲

Web 技术栈开发移动端网页（基于浏览器访问）—> 旅游项目双端

Web 技术栈开发移动端应用软件（原生应用，需要安装才能使用）—> Hello uni-app

（以上两个主要是基于 Vue，然后简单提一下 ReactNative）

Flutter，重点，两个项目：

• 租房项目 - 手写一个登录界面（开发演示，开发工具、开发模式等）
• 博客项目 - 完整的实战项目（内容比较高级，不一定会讲）

SwiftUI，我的开源业务框架，简单提一下 —> 消防项目

…

原生开发

Android 原生：Java 或 Kotlin，开发的应用只能跑在 安卓平台

iOS 原生：OC 或 Swift，开发的应用只能跑在 iOS 平台

它最大的缺点：一套系统两次开发，浪费人力与财力 —> 消防项目

它最大的优点：性能很高（相比跨端），原生能力没有任何限制

网上的很多资料对于这方面的总结也比较矛盾，无需硬要分个类，大致理解其概念即可
以下很多内容是根据自己的理解 + 开发经验总结出来的

Web 技术栈开发移动端（基于浏览器）

先展示 旅游的 Web 端，然后展示 旅游的 移动端。技术栈：Vue.js
（两者的迁移成本大概在 2 个小时以内）

这种项目需要借助浏览器来访问，好处是一套网页编写完以后，只需要改改样式即可。
（甚至可以在同一个项目中利用一些方法直接进行适配）

缺点也很明显，对一些移动开发的原生能力支持有限：

注意，是支持有限，并不是完全不行，往往通过一些第三方库进行桥接也是可以实现的

• 摄像头
• 视频播放
• NFC、蓝牙等
• …

应用场景：利用网页技术栈，通过浏览器实现的跨平台，十分脆弱，只能临时做一些快速开发与上线（偏展示性的内容，对设备原生能力支持比较差），完全不能起跨平台这个重任。

???上面这个 Web 项目，可以直接打包成原生 App 吗？

• 利用 Cordova 或 HBuilder 打包好像可以（未实践）

总结：说白了就是在开发网页…

一些框架例如：Vant（国产）、Quasar
这些本质上都是 “移动端的组件库”，没有提供原生能力访问，还是在开发网页而已

Web 技术栈开发移动端应用

我认为 “是否提供访问原生能力”，应当是 组件库 和 应用框架 的分水岭

Vue.js 是什么？是一个 Web 开发技术栈！本身和移动端没有太大关系

前面一个并不是安装在手机上的软件，而这个，可以通过 Web 技术栈，开发出运行在不同平台的手机上的软件！

这也就是所谓的 H5 + 原生，利用 Web 技术栈，开发出移动端的软件。

ionic：Open-Source UI Toolkit to Create Your Own Mobile or Desktop Apps （本质上还是用了 Cordova）

再次强调，Vue.js 只是一个 Web 开发技术栈，很多其他 Web 技术栈也能开发出 App。

H5 + 原生：Cordova

仅 基于 Vue 技术栈的：uni-app（国产）— 大概剖析原理

总结：说白了就是用开发网页的思路与技术去开发移动应用

ReactNative 开发移动端

本质上也是属于 “Web 网页技术栈”，和 Vue 是一个类型，只是开发方式和开发思想不同

其实移动端开发和前端开发在很大程度下是相通的，主要体现在以下几个方面：

• 绘制界面，用户操作接口
• 路由管理，控制项目各个页面的跳转逻辑
• 发送网络请求，获取动态数据，并显示在界面上

• 对一些通用组件进行封装

• …

Flutter 开发跨平台端

先把项目跑起来，编译时介绍一下开发工具

开发工具

Android Studio：强大，开箱即用，但耗费内存、吃机器性能（重量级）

Visual Studio Code：并不开箱即用，依靠插件可以变的强大（配置方便），轻量级

Vim：不开箱即用，完全由个人配置（有一定门槛），最轻量级的开发工具

介绍

特色：

• Flutter 中一切皆 Widget（包括结构、样式、布局）
• 嵌套地狱（但是开发工具的强势弥补了这个缺点）
• Dart 语言开发，JIT 模式开发效率高，AOT 运行效率高
• 编译速度快 + 热加载 (HOT RELOAD)

技术类型	UI 渲染方式	性能	开发效率	代表框架
H5 + 原生	WebView 渲染	一般	高	Cordova、Ionic
JS + 原生	原生控件渲染	好	高	RN、Weex
自绘 UI + 原生	调用系统 API 渲染	好	Flutter 高、QT 低	QT、Flutter

关于和 HTML 的比较思考：
HTML 是控制结构的、CSS 是控制样式的，那么布局是属于结构还是样式呢？

• HTML 中布局属于样式
• Dart 中布局是布局，样式是样式，结构是结构，它们都属于 Widget（组件）

Flutter 项目目录：

app：
	// 各种配置文件不需要关注，
	- ... : 各种配置文件
	- pubspec.yaml：依赖管理
	// 
	- lib : 写 Dart 代码的地方
	- static：静态资源文件
	// 各种平台文件，用于调用原生能力，写原生代码
	- android：
	- ios:
	- windows:
	- web

具体的 lib 项目结构：

lib
	- apis：网络请求封装与统一管理
	- routes：路由
	- pages：业务组件
	- widgets：通用组件
	- ...
	
	- main.dart：程序的入口

开发案例

租房项目

租房项目：界面构建 + 组件封装 的练手项目，对网络请求，路由管理，接口管理没有做太多封装

• 手写一个登录界面

博客项目

博客项目：完整的框架级别的项目，对上面提到的操作有良好的封装，使用起来很方便

https://github.com/jhflovehqy/flutter_bolg_manage

• 添加功能：给主页下的首页，添加一个 “回到顶部” 的按钮

ui/page/complex_module/main_page/main_page.dart

• 修复功能 BUG（不影响正常使用）：修复搜索部分可以搜索空格的 BUG

ui/page/search_page/search_page.dart

• 修复软件 BUG（影响正常使用）：退出登录会报错，根据查询接口文档，发现请求方式错误

http/request_repository.dart
-（无法演示）修复软件 BUG（影响正常使用）：问题反馈，保存图片和选择图片有 BUG，未获取相册权限

<key>NSPhotoLibraryUsageDescription</key>
<string>需要您的同意,APP才能访问相册</string>

ui/dialog/dialog_share_application.dart 文件中有两处可修改地方：

• 版本升级：升级 navigate_util.dart 中的 url_launcher 的使用方法

final Uri uri = Uri.parse(url);
if (await canLaunchUrl(uri)) {
  await launchUrl(uri, mode: LaunchMode.externalApplication);
} else {
  throw 'Could not launch $url';
}

• 完善逻辑：util/file/file.dart 文件中，逻辑不完善

 if (result['isSuccess']) {
  ToastUtils.show(StringStyles.saveSuccess.tr);
} else {
  ToastUtils.show(StringStyles.saveFail.tr);
}

• 组件设计有漏洞：ToolBar 组件设计中 isShowEnd 属性不合理（定义未使用）

这里可以用 分享页面 ui/page/user_module/share_page 来举例
（这种设计代码基本都靠开源的 PR 来完善，作者自己难以发现，因为不影响正常使用）

发现 BUG 后的两种行为：

• 发现 BUG 后可以向该代码仓库提 Issues 通知作者或其他人去修复
• 也可以自己把 BUG 修复以后，提一个 Pull requests 让作者选择是否合并进入仓库主分支

• 性能调优：对比 该项目与 租房项目 的 TabBar 切换状态。

这个项目的封装思想是非常值得学习的，这种项目不同于使用组件的教程，可以好好研究其中的架构、以及各种高级思想（依赖注入、状态管理、抽象封装等）

特别介绍：SwiftUI

这个跨平台不是我们理解上的跨平台，它跨的是苹果生态的平台，即 iOS、iPad、macOS、Apple Watch、Apple TV…

消防项目

ZYSwiftUIFrame

我的开源项目 ZYSwiftUIFrame

其他：GoMobile、Qt、JavaFX

这些均不是主流，了解即可

编码建议

注重整体的架构逻辑，细节学会查看文档

不做框架的奴隶，语言只是工具

对于编程语言的使用，达到：“得其神而忘其形” 的境界
（前提当然是有自己很熟悉的 2 门以上的语言）

多学习不同语言的高级特性，来了解编程的本质（了解汇编、C++ 等较底层的语言）

不要局限于完成功能，以更高维度的角度看待问题

代码的优雅整洁很重要

除非学习和自我提升，尽量不要重复造轮子，学会探索与使用开源项目

持续学习，保持热情