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

  • 时间:2020-07-29 23:09
  • 作者:福运快3
  • 阅读:

  授予每个自然月内发布4篇或4篇以上原创或翻译IT博文的用户。不积跬步无以至千里,不积小流无以成江海,程序人生的精彩需要坚持不懈地积累!

  授予原创文章总数达到1024篇的博主,感谢你对CSDN社区的贡献,CSDN与你一起成长。

  授予每个自然周发布9篇以上(包括9篇)原创IT博文的用户。本勋章将于次周周三上午根据用户上周的博文发布情况由系统自动颁发。

  微信添加「GitChat小姐姐」, 加入技术交流群,领取最新干货福利。

  IDEA 命令行缩短器助你解决此问题:Command line is too long. Shorte

  进击的 Kubernetes 调度系统(二):支持批任务的 Coscheduling/Gang sc

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

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

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

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

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

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

  第二个项目,一个在线预约视频拍摄的网站,一样的一边看教程,一边完成项目,我不断把新学的内容往项目中加。终于在经历两个项目之后我能够说对 Vue.js 比较了解了,基本对于 Vue.js 不存在什么大的技术问题了。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  layout:页面布局,也就是我们在 APP 中看见的一个一个的页面,由 window 和 frame 组成。

  window:一个独立的页面,我们的实际页面都是由一个一个的 window 来组成,每一个 window 都是全屏的。

  frame:frame 也是一个独立的页面,但是它存在与 window 中,你可以给他指定他的高和宽,还可以指定它位于 window 的哪个位置。

  UIModule:UI 模块,用于实现某些特定的页面效果,既可以全屏,也可以占据部分屏幕。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  你点击编译,然后再将编译成功的安装包安装到你的手机上,安装好之后,会有一个白色的小圆点,点击之后会让你设置 IP 以及端口号

  在这里我们可以进行编译,当然,如果你是正式版,你还需要具备证书。在没有证书的情况下,只能编译测试版。如果不清楚如何获得证书,页面上有对应的引导,去教你如何获取证书。

  文章没有对于纯粹的技术做过多的讲解,只是对如何使用 APICloud 进行 APP 开发的方式以及流程进行讲解。如果你从第一部跟着我走,那么到现在,你已经有了一个 APP,即使这个 APP 只有一个页面,一个 DEMO。

  APP 中内容取决与开发着自己,如果你只需要能有一个 APP,这完全已经能够满足了。如果你需要开发一个让自己满意的 APP,那肯定,你还需要对 APICloud 官方提供的内容进行一些学习。但是对于开发者而言,这些学习都是非常简单的。也可以需要什么学习什么。都是独立的。

  推荐新手系列教程,十分简单,讲得通俗易懂,也有实际案例。整个教程几个小时就完了。

  有任何问题都可以前往文档中心查找,包括之前提到的内容。这里主要推荐两个API 对象和前端框架(类似 JQ)掌握这二者基本的开发都可以完成了。

  如果有问题,文档无法解决,那么社区无疑是很好的选择,在这里提出你的问题,会有很多人来回答你的问题的。当然你也可以加入官方的 QQ 群,在群里询问。有问题还可以@差不多先生,我是社区版主之一。

  本文首发于GitChat,未经授权不得转载,转载需与GitChat联系。

  您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ,阅读更多 GitChat 专享技术内容哦。

  人员能够轻松的创作出各种精美的界面效果。整合 HTML5 & CSS3 最强大效果,有的是网站

  中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。 课程介绍: 本季课程为CSS特效篇,着重介绍了使用CSS使用页面的特效以实现页面的美化。 内容包含: ◆绘制各种图形 ◆设置容器的背景图片 ◆实现多张背景图的拼接 ◆实现背景色的渐变 ◆使用阴影美化容器或者图片 ◆实现二维空间中图像的移动、旋转、缩放倾斜等 ◆实现三维空间中的图像的移动、旋转、缩放等 ◆在页面中灵活使用过度的特效 ◆在页面中使用动画的特效 ◆使用下拉菜单等内容。 在本季课程的讲解中结合了大量的案例演示,通过案例演示可以清楚的加深对CSS常见数据的理解, 学习的过程中,一定要动手实战,这样才能真正的领悟到CSS特效的使用细节 以下为课程项目展示:

  课程背景混合应用相对于原生应用而言,是原生应用和Web应用的结合体。过去几年,混合应用

  的各种利弊已得到充分的讨论和验证。关于混合应用是什么、为什么使用的问题,相信大家都有自己的答案,但如何

  混合应用,从现有资料中却很难找到一个系统、全面的回答。刚上手或准备上手混合应用的

  团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际

  请以本公司的规范为标准。A.基本原则符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为......

  本文仅代表博主自己观点,希望对大家有所帮助。(只推荐以下三款,其余不推荐使用) 1、HBuilder、HBuilderX(下载地址)(1)介绍:入门首推这两款工具。高校可能也有很多老师使用这两款教授学生。区别在于HBuilderX更加轻量,是HBuilder的下一代版本(Hbuilder已经停止更新维护),其压缩包大小仅10几M,通过自定义插件......

福运快3

上一篇:开发一个微信小程序需要多少钱? 下一篇:web前端学习