2024年Web前端最新大前端开发：前端如何开发 APP，2024大厂Web前端春招面试经历

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

然而领导是不会管这些的，面对这样的情况，我一度想要辞职回家要饭。

然而，贫穷使我不得开心颜，贫穷也使我努力，于是我开始想办法解决问题。

在某竞价排名为网站搜索关于前端开发 APP 的相关内容，在抛去第一屏的广告之后，开始寻找有用内容。

在了解了原生开发、web 网页加壳生成 APP、HTML5 开发、混合 APP 开发之后，对于目前的项目情况，决定使用混合 APP 开发。然而我还是不清楚该如何开发，所以还需要继续学习了解。

在 CSDN 看见一篇博客，讲的就是前端开发 APP，分别讲述了 DCloud 与 APICloud，关于这二者我都去学习并尝试写了 DEMO，但是很无奈，做为一个纯粹的前端开发人员，有很多地方我确实不清楚，我需要更多的帮助。然而 DCloud 官方并没有一个很好的社区，我有太多的疑惑不能得到解决，于是我就选择了 APICloud，好在与 APICloud 有比较活跃的社区，也有官方的很多 Q 群，有问题你可以在社区询问，也可以在群里咨询他人。

一、什么是 APICloud

APICloud 是中国领先的“云端一体”的移动应用云服务提供商。 APICloud 为开发者从“云”和“端”两个方向提供 API，简化移动应用开发技术，让移动应用的开发周期从一个月缩短到7天。基于 APICloud 提供的“云 API”和“端 API”，开发者甚至可以忘记繁杂的服务端编码，也可以忘记复杂的 Objective-C和Java，更可以忘记那数不清的屏幕适配。

以上内容都是 APICloud 放在某竞价网站的的官方介绍。

实际上它就是一个平台，为你提供很多组件和 API，然后帮你把你的 html 文件打包成为安卓和苹果的安装包。

二、开发 IDE

做开发 IDE 是必要的，官方有自己的开发 IDE，也支持其他 IDE，如果你不介意你可以试着用用官方的 IDE，或者在你原有的 IDE 中下载相关插件使用。

• 官方的 IDE：APICloud Studio 2

此外他还提供了：

• Sublime APICloud Plugins：Sublime APICloud Plugins 是 APICloud 为开发者提供的一套开源的 Sublime Text 扩展插件
• Eclipse APICloud Plugins(Studio 1)Eclipse APICloud Plugins：基于 Eclipse 和 Aptana Studio3 进行扩展
• WebStorm APICloud PluginsWebStorm APICloud Plugins 是 APICloud 为开发者提供的一套开源的 WebStorm 扩展插件
• Atom APICloud PluginsAtom APICloud Plugins 是 APICloud 为开发者提供的一套开源的基于 nodejs 的 Atom 扩展插件
• APICloud CLIAPICloud CLI 是 APICloud 为开发者提供的一套开源的基于 nodejs 的命令行关于 IDE 介绍点我了解更多

而我日常开发使用的是官方提供的 IDE

样式和内容跟其他开发 IDE 没有什么过大的区别。

APP开发之旅

step1：注册帐号你需要在APICloud官网注册一个开发帐号。https://www.apicloud.com/

step2：登录登录之后你会到达控制台，如果没有，请在右上角前往。

step3：创建应用需要在你的控制台创建一个应用，创建按钮位于控制台的左上角。

然后选择Native App，输入应用名称和说明。

然后就创建好了你的第一个应用。

step4：同步项目代码

当你创建好项目之后，云端会自动生成相关的文件以及代码，你需要将代码从云端下载下来，然后进行开发工作。

在控制台左边有你新建的应用，点击就会进入应用的页面。

在右边是一些菜单选项，我们前端开发涉及的就是第一个端开发里面的内容：

1. 端设置：在这里设置 APP 的图标，启动动画，横屏竖屏等
2. 证书管理：这里上传或者更新 APP 的相关证书，安卓端与 IOS 端的，需要你自己去申请
3. 代码管理：在这里查看你的代码操作记录，查看你代码所在云端的地址与管理密码或者设置 GIT
4. 模块管理：里面有很多官方提供的模块，如果你要在你的 APP 中使用就需要在这里进行管理
5. 云编译：对你已经提交到云端的代码进行打包生成安装包

SVN: GIT：

根据你使用的不同工具进行不同的操作，而我是用的是 SVN，在本地安装好 SVN 之后直接同步到本地就可以了。

小提示：输入地址后，SVN 会让输入帐号与密码，这时候你填写的帐号就是你在平台注册的号码，邮箱，一定填邮箱，我之前填手机，然后一直给我报错，然后密码输入点击获取分支密码弹出来的那一串。

然后你在通过 IDE 打开这个文件夹就可以进行开发了。

关于APICloud 开发 APP 的概念：

我们前端在使用 APICloud 进行开发的时候，依然是写 HTML 结构，CSS 样式，JS 逻辑。关于样式以及 JS 逻辑，和大家平时的写法都没有什么区别。在 HTML 结构这块，我们日常开发，一个 HTML 就是一个页面，但是在 APICloud 中，页面所展示的，并不是以 HTML 文件为展示单位。在这里要给大家讲述关于 APICloud 的页面布局的五大组件。

五大组件：

1. widget：APP 的最外层，我们的内容都装在 widget 中。
2. layout：页面布局，也就是我们在 APP 中看见的一个一个的页面，由 window 和 frame 组成。
3. window：一个独立的页面，我们的实际页面都是由一个一个的 window 来组成，每一个 window 都是全屏的。
4. frame：frame 也是一个独立的页面，但是它存在与 window 中，你可以给他指定他的高和宽，还可以指定它位于 window 的哪个位置。
5. UIModule：UI 模块，用于实现某些特定的页面效果，既可以全屏，也可以占据部分屏幕。

我们在使用前端开发的时候，页面跳转都是通过标签或者路由进行，但是我们在APICloud中进行开发，页面之间的切换我们所采用的方法另一种方法。

下面就让我们来开始我们的开发工作，在开发中学习与理解。

通过之前的操作，我们已经建立好我们的项目，通过 IDE 打开，我们就开始进行我们的编程工作了。

通过 IDE 打开我们的项目文件，右边能看见很多文件夹和两个文件。

有的文件是系统的，有的是用户根据自己的需求新建的。这和一般的前端项目结构没有什么大的区别，各个文件夹用于存放相对应的文件，从名称就能看出来他们的作用。

config.xml：每一个 Widget 包必须有一个名为 config.xml （大小写敏感）的配置文件，它位于 Widget 包的根目录下。该配置文件包含了关于该 Widget 的重要信息，如：名称、作者信息、描述、云端ID、偏好设置、权限配置、模块概览等等，并且该配置文件也是整个 Widget 的入口。

点我前往官方文档

index.html：

我们的首页文件，当 APP 运行之后就会首先打开我们的 index.html

打开 index.html 它会有一个简单的案例给你参考。

在这里给大家讲下关于 APICloud 的 API：

api 对象是您入门 APICloud 必须了解和熟练掌握的一个基础对象。api 对象提供了构建应用程序所需要的一些基本的方法 [Method]，如窗口操作、相册和网络数据访问等；以及一些常见的属性 [Attrbute]，如屏幕宽度（screenWidth），系统类型（systemType）等；还有一些常用事件 [Event]，如电量低（batterylow）事件、应用进入后台（pause）事件。api 对象不需要 require 引用，可以直接在 js 中使用。

它为开发者提供了基础操作，比如之前提到的页面间的切换等，以及很多属性事件。 它是每一个页面都需要引入的。

我们会在每个页面都通过 script 引入 api.js，而 apiready 则是和 window.onload 差不多的意思，也就是我们的 api.js 已经加载完成。

如果我们要进行某些处理需要设计调用 api，那一定记得需要在 apiready 之后执行。

接下来我们就可以开发我们的首页了，会前端的这块都不需要在额外多的说，在这里，就为大家演示关于 window 和 frame 这二者的区别使用。我们要实现页面切换，往往都是通过 api.openWin和api.closeWin 来执行，也就是打开一个页面，关闭一个页面。如果我们要在当前页面的某个位置打开一个窗口，也就是之前提到的 frame，也是同样的通过 api.openFrame和api.closeFrame 来实现。

      api.openWin({            name: 'page1',            url: './page1.html',            pageParam: {                name: 'test'            }        });

一旦执行了代码，它就会根据url来进行页面跳转，然后给跳转的页面一个名字。如果是关闭的话，只需要执行下面这段代码就 OK 了。

    api.closeWin({        name: 'page2'    });

我们只需要告诉它需要关闭的页面的名称就可以了

这里简单的对这个进行介绍，大家可以前往官网文档对 API 进行学习。

事实上，你只需要知道 api.openWin 和 api.closeWin 都已经可以开发出一个 APP 了，当然，这是不推荐的做法。

官方提供的 API 有很多，大家都可以根据需要进行查阅，或者在开发前都看一遍。

API对象官方文档

如何边开发边测试

当我们进行开发的时候都会边开发，边看效果，而在 APICloud 中，我们通常会借助自定义 loader 来进行测试。

在我们的控制台，菜单栏有一个叫做模块，之前给大家讲述过，模块库中有很多功能模块能提供给大家使用，有收费的也有免费的。大家可以在模块库进行查看，有需要的就添加到 APP中。

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

要点：**

1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-cWX0iBJj-1715459985457)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-gymUUIbo-1715459985457)]