APP混合开发解析

       【尚武科技APP开发原创内容】这段时间石家庄很多APP开发的客户做的一次分享会上很多客户,首先我们应该知道混合开发应用场景到底是什么,为什么要用混合开发:1、集合优势——如用 Hybrid 开发方法,就能集Native 和web两者之所长。一方面,Native 让开发者可以充分利用设备所提供的全部不同的特性和功能。另一方面,Web 语言编写的所有代码都可以在不同的移动平台使用,使得开发和日常维护过程变得集中式、更简短、更经济高效。2、HTML5的可用性和功能都在迅速改进。会成为开发前端 App 的默认技术。用 HTML 来编写 App 的大部分代码,在需要时才使用 Native 代码,确保今天的投入在明天不会变得过时, HTML 功能变丰富,可以满足现代企业一系列更广泛的要求。

       接下来系统的了解一下混合开发框架和层次结构图

       APP混合开发结构图

 APP混合开发

 

       1)移动终端web壳:是使用操作系统的 API 来创建嵌入式 HTML的渲染引擎。主要功能是定义Android应用程序与网页之间的接口,允许网页中的JavaScript调用Android应用程序,提供基于web的应用程序的Android API,将Web嵌入到Android应用程序中。

       2)前端交互js:包括基础功能js和业务功能js。

       3)前端适配器:适配不同的终端:Pad、android、ios、wap。

       接下来我们最关心的莫过于性能优化的问题了:

       1、 单个页面,我们观察登录、首页以及共用代码(样式文件、JS文件、页面加载loading代码)等放在index页面里。页面展示前显示fake页面(过场页面),首屏加载完后,fake页面消失。页面虽然按照业务模块分为不同的页面,但是展示的时候会在同一个页面即index页面展示。具体的说,需要某个功能页面的时候将页面以AJAX的形式请求到index页面,使用完毕删除。

       使用一个页面,公共的CSS和JS只会加载一次。

       2)CSS、JavaScript
       一般情况下,在本次混合开发框架开发中,CSS全部写在一个文件里。CSS和Jquery Mobile的相关文件写在index页面头部,其余公用JS等写在index页面底部。防止JS阻塞页面加载。各业务逻辑JS写在各业务页面的底部。开发完成后,CSS和JS需要进行压缩,减少用户使用时初次请求时间。这个是开发很关键的因素。

       3) @font-face
       混合开发中使用@font-face来实现图标字体化,统一控制图标的颜色和大小。优点在于可以:减少页面因使用图片而带来的流量,大大缩短页面响应时间;图标可以随意改变大小和颜色,而不会导致失真。

       4) 本地存储LocalStorage,HTML5本地存储LocalStorage,在混合开发中主要用来存储最近查询记录等。首页最近查询来说,用户每次在综合查询中点击一个模块,通过LocalStorage将图标和对应的功能名字存储起来,如果用户不清除,LocalStorage中的数据是一直存在本地的。下次打开应用的时候从LocalStorage中读取最近查询记录等。这样可以大大的优化整个流程。

       使用LocalStorage的好处是,不进行后台交互,速度快。

       5)异步AJAX
       通过使用AJAX,显示页面时,先显示框架,然后异步加载内容;其次,分页功能中,先显示部分简项列表,上拉获取更多内容。再次,每打开一个新功能,页面以AJAX的形式获取新页面的内容并展示出来。交互体验更好。从性能的角度考虑,速度也更快。

       今天我们比较系统的让用户从系统结构上面去了解APP混合开发框架的体系结构,就是让用户更清晰的认识混合开发和更深入了解。

 

推荐阅读
  • APP的开发价格是多少?

    APP的开发价格是根据不是一概而论的,但是首先要知道,费用较之网站开发和微信小程序的开发要高出一些,首先你

  • APP开发的时间和周期

    APP开发的时间确定要根据实际需求确定,或者说根据复杂的程度确定。我们需要你了解开发的阶段,一般的APP的开

  • APP开发要做什么准备

    APP开发的准备马主要是市场调研和需求分析明确、对开发公司的选择、准备开发资金和运营资金三个方面。

Copyright 2017 Jogeo All Rights Reserved | 冀ICP备13015346号-1