热门关键字:
jquery > jquery教程 > jquery教程 > 如何从HTML5快速转型快应用?

如何从HTML5快速转型快应用?

284
作者:管理员
发布时间:2021/7/13 18:29:36
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=5052
  2018年3月份,由小米,中兴,华为等10家厂商成立了快应用联盟,共同发布了快应用的标准。自此我们可以采用一套标准去开发应用,而无缝的运行在各个手机厂商上。一次开发,一次上传,自动分发到所有联盟厂商的设备。


  根据快应用官方的说法,快应用是采用前端的技术栈来开发的,这篇文章以一个前端开发者的角度,来介绍怎么开发快应用,快速入门快应用的开发。


  什么是快应用?


  快应用是基于手机硬件平台的新型应用形态,标准是由主流手机厂商组成的快应用联盟联合制定;快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放;快应用具备传统APP完整的应用体验,无需安装,即点即用。


  快应用的技术特点包括:


  采用前端技术栈,运行和开发效率高,学习成本低,代码可以复用;原生渲染能力,功能完备,体验等同于应用,资源消耗小。


  从上面我们可以了解到:


  1、快应用不是HTML5,但是可以用前端已有技术栈直接上手开发;


  2、快应用是原生渲染,有着比H5更加完备的功能及原生体验;


  3、快应用即点即用,无需安装。


  快应用 vs HTML5开发


  首先,我们来回顾一下,在Web项目中是怎么进行开发的?


  简单的说下,可以分为以下9个步骤:


  拿到PSD设计图;切图;将PSD转成HTML;写JS业务逻辑;mock数据,自测;与后端联调;提交测试;上线;迭代与优化。


  如下图所示:


  做过前端的同学对这个步骤应该很熟悉了,快应用的开发步骤和这差不多,主要有2点差别,我们来比较一下:


  HTML5开发是基于浏览器的,直接写完后在浏览器下就可以运行,看效果。但是快应用开发是基于NodeJS环境的,所以我们开始需要搭建一下开发环境;在将PSD转成HTML的时候,快应用提供了一个脚手架,当然HTML5的一些项目里面也有脚手架,比如Vue、React项目,官方都提供了一个脚手架,方便开发者进行开发。


  如下图所示,下面是快应用的开发过程:


  下面从搭建环境、hap-toolkit的使用、静态页面书写(PSD转成HTML)、JS业务逻辑的书写、调试这5个方面来说说如何开发快应用。其他的步骤都是HTML5开发常见的步骤,和HTML5一样,直接迁移过来就行。


  1、搭建开发环境


  快应用开发是基于前端技术栈的,官方团队提供了基于NodeJS的开发环境,可以参考官网的详细教程。


  主要是:


  NodeJS(推荐 Node 8以上版本);hap-toolkit 编译工具;快应用调试器和快应用预览版(方便调试和查看效果)。


  当然快应用官方也提供了IDE,也可以直接安装一个IDE。


  2、hap-toolkit的使用


  安装好hap-toolkit后,可以在控制台输入hap -v 看看当前的版本。


  当前的最新版本是0.1.1。


  下面是hap-toolkit的一些常见用法:


  具体可以参考:


  3、静态页面书写


  快应用提供了组件和指令,方便PSD转化成HTML。


  01.组件


  快应用中组件与Vue中组件类似,一个快应用,可以组织为一个嵌套的组件树,如下图所示:


  组件分类:


  原生组件;自定义组件。


  当一个页面的业务逻辑变得复杂时,就需要将页面拆成多个模块,完成解耦。所以,快应用提供了自定义组件的能力,定义自定义组件与开发页面一致。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐