在上两个章节中，我们快速搭建并完成了登录页面和引导页，在常规的App开发中，除了引导页、登录页外，一闪而过的启动页可能最容易让人忽略。
启动页，作为在App启动过程中用户所感知的第一个页面，与引导页、登录页构成了用户对产品形成的第一印象。
本章节中，我们来探讨它们之间的关系，并且采取实战编程的方式实现它们之间的交互逻辑。
需求分析-页面逻辑
首先，我们先分析下常规的App登录交互逻辑。当用户打开App时，会遇到哪些页面？
- 启动页：当用户打开APP时，在启动APP的过程中被用户所看到的过渡页面或动画。
- 引导页：当用户安装或更新APP后首次启动APP时展示的3-5个滑动页面就是引导页，帮助用户更加清晰的了解产品定位与功能服务。
- 登录页：提供账号登录方式，获取用户基本信息，用于统计用户留存或者提供专属服务的身份认证页面。
- 首页：APP的主要功能展示。
启动页、引导页、登录页、首页，它们的逻辑顺序如下图所示：
当用户打开App时，系统启动App并伴随着启动页，若当前用户为首次打开App，则会打开引导页。
用户随着引导页的指引，在引导页最后一页点击操作，进入到登录页面，对于强登录的App，则需要登录认证身份后才可以使用App功能。
而对于弱登录性质的App，可通过跳过关闭登录页面进入首页，并在下一次打开应用时不再弹出登录页。若是工具类应用，则可以直接不要登录页。
UI设计-应用图标
在正式进入编码之前，我们先设计一个简单的应用图标的UI。应用图标设计方式呈现多样化，最能凸显产品品牌和产品服务宗旨的也是最简单的，便是简单的背景颜色+图标icon。
下载并打开AdobeXD设计软件，选择“自定义大小”，设置宽高为1024*1024，如下弹窗所示：
选中视图，选择右侧样式栏中的“填充”操作，选择“线性渐变”，设置角度为斜45度，颜色渐变为#9890e3→#b1f4cf。
拖入一个icon图标，调整其大小，设置其填充颜色为白色，我们就得到了一个产品Logo图标，如下所示：
设计好基本样式后，选择文件 > 导出 > 导出，选择所有面板。在保存文件弹窗中修改名称为“logo”，导出格式为“PNG”，导出大小为“1x”，点击“导出所有面板”，AdobeXD将会保存导出一张1024*1024的UI设计稿图片。
为了得到不同尺寸的程序图标，我们可以下载Apple官方的ProductionTemplates，下载并打开，拖入设计好的1024*1024尺寸的设计稿到最大的空白框中，就可以遍历得到符合Apple官方的全部尺寸程序图标，如下图所示：
批量导出保存之后，程序图标的准备工作就完成了。
实战编程-创建项目
打开Xcode开发工具，点击Create a new Xcode project，将新项目命名为PageSetting，如下弹窗所示：
命名好项目后，指定保存路径，一个SwiftUI项目就创建完成了。
实战编程-程序图标
点击视图工具栏的Assets.xcassets文件，我们发现有一个空的应用程序图标组选择AppIcon，选中时将会出现多个不同尺寸的导入图标界面，如下页面所示：
我们将设计好的图标图片拖入到AppIcon对应尺寸的空白框中，如图所示：
完成后点击“运行”，我们就可以在模拟器中看到带有设计图标的应用程序了，如下图所示：
实战编程-启动页
接下来，我们正式搭建启动页。Xcode开发工具制作启动页动画的方式有2种，一种是通过故事板和约束布局技术来创建启动动画，另一种是直接指定图片作为启动页。这里，我们为了更好地扩展性和编程灵活性，采用第一种方式构建启动页。
在Assets.xcassets文件拖入3种尺寸的程序图标，并把最终的应用图标命名为logo，如下弹窗所示：
选择File > New > File，选择LaunchScreen，点击Next，如下弹窗所示：
Xcode开发工具将自动创建好一个故事板页面，开发者可以直接在故事板中使用拖动的方式构建页面，这也是我在SwiftUI之前最喜欢的开发方式，使用故事板和极少的代码即可完成一个简单的静态页面。
点击顶部工具栏右上角的“+”按钮，选择之前导入到素材库的图片，将组件拖到视图中。再选择一个Label组件，双击修改文字为“连接你和世界”，将组件拖到底部，如下图所示：
元件放置在视图之后，还需要建立约束布局关系，才能保证在不同机型下组件的位置和大小不会发生偏移和形变。
建立约束的方式为选中单个组件，然后点击右下角的“添加布局约束”按钮，设置好组件相对距离，示例：Label文字，我们设置它距离底部60，距离左右间距20，文字排布为居中。同理，我们设置logo图片为固定展示尺寸，并且距离顶部距离为200，与视图垂直居中。
故事板和约束布局在这里就不展开讲了，后续也基本用不上这种开发方式。
创建好LaunchScreen内容后，我们在PageSettings应用主要设置页面中设置启动画面为LaunchScreen文件，如下图所示：
完成后，当我们每次打开App时，应用启动过程中都会加载启动页画面。
启用页是用户第一眼看到的视图页面，但仅限于应用程序被启用时展示。由于Apple独有的虚拟后台技术，及时应用程序挂至后台也是处于虚拟启用状态，因此不是每一次都能看到启动页。
接下来，我们在完成启用页，结合前两章的引导页、登录页的基础上完成应用程序页面之间的交互逻辑。
实战编程-页面准备
我们创建2个SwiftUI文件，右键，选择New File，选择SwiftUI文件，登录页命名为LoginView，引导页命名为GuidePageView。
并将前两章的代码复制到新创建的SwiftUI文件里，别忘了导入的本地图片也需要再导入到这个SwiftUI项目中。完成后如下图所示：
这时，我们就有了默认的启动页LaunchScreen、引导页GuidePageView，登录页LoginView，首页ContentView。
实战编程-页面交互
在学习页面交互之前，我们先来了解下MVVM开发模式。MVVM开发模式，指的是Model-View-ViewModel模式，简单来说，就是将页面、数据、数据处理分开。
之前的章节内容我们完成的最多的是View的部分，Model数据部分在后面的章节中我们也经常提及，这里我们页面交互逻辑用的的逻辑部分，都属于ViewModel。
在左侧视图工具栏中右键，选择New File，选择Swift文件，命名为ViewModel。键入以下的代码：
import Foundation
import SwiftUI
class ViewModel: ObservableObject {
@Published var isLogin: Bool = false
@AppStorage("App_firstLaunch") var Apps_firstLaunch: Bool = true
}
引用SwiftUI后，我们创建了一个类ViewModel，遵循ObservableObject协议。这里声明了2个变量，一个是isLogin，判断是否登录。另一个是控制引导页，由于引导页是初始首次打开App时才展示，因此需要使用@AppStorage声明。
声明好必要的参数后，我们来到PageSettingsApp页面，这是整个App加载时展示的页面，也就是@main主函数页面。
首先引用创建好的ViewModel类，代码如下：
@StateObject var viewModel = ViewModel()
在主体代码部分，App加载的内容需要根据我们声明好的变量状态进行展示，当我们是第一次展示时，加载引导页GuidePageView，如果不是，则判断是否登录，若没有登录则展示登录页，登录后则展示主页，完整代码如下：
import SwiftUI
@main
struct PageSettingsApp: App {
@StateObject var viewModel = ViewModel()
var body: some Scene {
WindowGroup {
if viewModel.Apps_firstLaunch {
GuidePageView().environmentObject(viewModel)
} else {
if viewModel.isLogin {
ContentView().environmentObject(viewModel)
} else {
LoginView().environmentObject(viewModel)
}
}
}
}
}
完成后，相应地我们在引导页GuidePageView中也需要引用ViewModel类，代码如下：
@EnvironmentObject var viewModel: ViewModel
声明好后，在引导页最后一页点击按钮操作时，更新Apps_firstLaunch状态为false，如下图所示：
同理，在LoginView页面中也需要做同样的操作，引入ViewModel类，将isLogin状态更新为true，如下图所示：
整体效果-预览
点击模拟器顶部的“运行”图标，尝试拖动页面，效果如下：
本章小结
本章涉及到的知识点有点多，如果有哪一块不太了解可以重复看一下实现细节。其实在过往的产品研发过程中，产品、设计、开发，本身就是一体化的工作，只是现在因为劳动分工导致的职业化罢了。
其中引导页、登录页为上两章节的内容，如果不太了解，可以先行学习上两章节内容再回到本章进行学习。
在本章中首次使用到了MVVM开发模式，相比较MVC模式，代码更加清晰简洁，更适合协同开发。当然对个人开发者来说，也更好地符合面向对象编程的方式，但具体使用什么开发方式，还是要根据不同开发环境和业务需求制定。
还是那句，说再多不如自己敲一遍，学习最好的方法便是吸收、转化、输出。下面的章节我们继续来学习和完成一个又一个项目，敬请期待吧～
版权声明
本文为稀土掘金技术社区首发签约文章，14天内禁止转载，14天后未获授权禁止转载，侵权必究！
