做为一个前端开发人员,有时候除去传统的前端开发还需要进行其他开发,比如公众号开发,小程序开发,APP 开发。

本场 Chat 将带你从0开始,基于 APICloud 进行 APP 开发,你只需要会前端就可以。

本场 Chat 主要内容为下:

什么是APICloud?

开发工具的了解;

提供的前端框架;

相关 API;

控制台;

开始你的 APP 开发。

本场 Chat 将会用一个新的案例从0来带领大家,用实际的开发案例来学习,知道开发过程的每一个步骤,让大家真的能开发,而不是一知半解,最后 Chat 结束后大家都可以都拥有一个自己的 APP。

什么是大前端

对于大前端这一词语,没有一个准确的说法,什么叫做大前端。

不同的人对于大前端的定义也是不一样的。对我而言,大前端就是区别与传统的前端开发,具备更多的能力,具备很强的横向技能。

在我看来,如今的一般前端发展都需要具备多种开发技能,除去传统的 PC 端开发,Web 端开发,还有基于微信的公众号开发、小程序开发,配合打包技术实现的混合 APP 开发,以及桌面应用开发,还有基于 node.js 进行后台开发。当然不是说每个人都必须要掌握这些技能,而是说你应该掌握其中的某些技能,它能帮助你获得更多的机会。

来源于压力的成长

在我工作之前,我会的前端技能就是 HTML + CSS + JavaScript + jQuery。

我工作的第一个项目,协同开发,一个月,采用的技术是 Vue.js,于是我一边看一边写 demo,然后转身写项目。一个月,两个前端用 Vue.js 开发了一个 erp 系统,在这一个月中我已经学会了简单的运用 Vue.js。

第二个项目,一个在线预约视频拍摄的网站,一样的一边看教程,一边完成项目

,我不断把新学的内容往项目中加。终于在经历两个项目之后我能够说对 Vue.js 比较了解了,基本对于 Vue.js 不存在什么大的技术问题了。

然而,我的第三个项目,就得到了一个微信小程序开发,所幸的是我已经回了 Vue.js,而小程序和 Vue.js 又十分的相似,很快的上手,在一个月的时间里独立开发出来了一个小程序。

接下来,又换手,变成了一个公众号开发…

工作半年,五个项目,学会了 Vue.js 框架,angula.JS 框架,几个 CSS 框架,小程序开发,公众号开发。

第六项目,就是一个 APP 的开发。

刚开始我是拒绝的,我,一个前端工程师,我怎么去开发 APP?还只有两个月的周期?

大前端开发:前端如何开发APP

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

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

在某竞价排名为网站搜索关于前端开发 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

APP开发之旅

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

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

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

大前端开发:前端如何开发APP

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

大前端开发:前端如何开发APP

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

step4:同步项目代码

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

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

大前端开发:前端如何开发APP

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

端设置:在这里设置 APP 的图标,启动动画,横屏竖屏等

证书管理:这里上传或者更新 APP 的相关证书,安卓端与 IOS 端的,需要你自己去申请

代码管理:在这里查看你的代码操作记录,查看你代码所在云端的地址与管理密码或者设置 GIT

模块管理:里面有很多官方提供的模块,如果你要在你的 APP 中使用就需要在这里进行管理

云编译:对你已经提交到云端的代码进行打包生成安装包

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

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

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